블로그 이름을 입력해주세요

내가 배운 css의 flex에 대해 알아보고자 한다 어떻게 사용하는지 바로 보자 이렇게 생긴 red 박스와 blue 박스 여기서 display: flex; 를 주면 가로가 되고 여기서 flex라고 하는 부모 태그에 width를 주고 .flex { padding: 20px; display: flex; width: 1000px; justify-content: space-between; background-color: gray; } justify-content: space-between; 을 주게 되면 width의 양쪽 끝에 달라붙는걸 볼 수 있다 쉽게 말해 두 박스가 줄다리기하듯 찢어져 붙은 것 이걸 잘 활용하면 box를 이리저리 옮기고 float을 쓰고 하지 않아도 쉽고 깔끔하게 정돈된 레이아웃을 만들 수..

웹사이트를 pc에서만 만드는 것은 아니다 요즘은 대부분 스마트폰, 태블릿pc와 같은 기기를 많이 사용하기에 html/css를 작성할때 호환성을 염두에 두고 만들어야 한다 그럴 때 사용하는것이 css mediaquery(미디어 쿼리) 반응형 레이아웃이다 일반적으로 만든 웹사이트 css 예를 들어 여기서 페이지 비율을 줄였다, 늘렸다 하게 되면 폰트 사이즈라던지 아이콘의 가로정렬 등 화면의 비율은 모바일인데 pc 비율을 계속 유지하다 보니 모양? 이 상당히 예쁘지 않다 그럴 때 미디어쿼리를 사용해 보자 코드 @media screen and (max-width: 1200px) { .main-title { font-size: 40px; } } 보통 css 제일 하단에 사용한다 그래야 말끔하게 작동할 수 있다 여..

! VS CODE를 기준으로 작성됨 우리는 보통 html에서 div태그를 여러 개 만들어 쓰는 경우가 많다 그럴 때 마구잡이 식으로 div태그를 필요할 때마다 만들거나 혹은 div태그를 복붙 복붙 해서 사용하곤 한다 그럴 때 유용하게 사용할 수 있는 것이 바로 Emmet이다. HTML div.wrap>div 이렇게 입력하고 엔터 혹은 탭키를 눌러보면 우리가 흔히 아는 div에 class="wrap"가 지정된 레이아웃을 만들 수 있다 여기서 > 표시는 바로 밑 자식 요소라는 뜻 HTML div.wrap>div.content*3 이런 것도 가능하다 대충 무슨 뜻일까? 그렇다 wrap이라는 클래스의 자식 요소들 content를 3개 추가해주었다 그냥 필요할 때마다 div를 만들어서 사용할 수 있지 않은가? 아..

우리가 버튼을 만들어 봤다고 하자 그렇게 버튼을 만들고 CSS로 버튼을 디자인 하면 예쁜 버튼을 만들 수 있다 하지만 버튼을 클릭해도 클릭하는 별 효과가 없다는 것! 그럴 때 쓸 수 있는 것이 css의 hover, focus, active 알아보자 이렇게 예쁘게 만들어 놓은 버튼(button)이 있다 HTML 구매하기 CSS .btn { padding: 15px; font-size: 20px; border: none; border-radius: 10px; background-color: coral; color: white; cursor: pointer; } 이것을 마우스를 가져다 놓거나 클릭 했을 때 나올 수 있는 효과를 줘보자 hover : 커서를 가져다 놓을 때 active : 클릭 했을 때 focu..

html문서에 css를 작성하다 보면 코드도 길어지고 영 못 생겨지기 마련 그럴 때 css파일과 html을 따로 관리하면 훨씬 편하고 보기도 좋다 head태그 안에 넣어주고 ...안에 경로만 지정해주면 끝 예를 들면 styles폴더 안 project.css 파일을 불러와라 이런 뜻 !! 꼭!! html 파일과 css파일이 같은 경로에 있어야 한다

Rest parameters란 함수안에 for문을 돌려 함수에있는 파라미터값을 순서대로 찍어주는것을 말한다 중요한것은 이때 배열로 찍어준다는 것! function printAll(...args) { for (let i = 0; i < args.length; i++) { console.log(args[i]); } printAll('hoon','eun','sunny')

function multiply(a, b = 1) { // a와b는 1이다 return a * b; } console.log(multiply(5, 2)); // a와 b에 5와 2를 집어 넣은것이다 // expected output: 10 // 곱하기니까 값은 10 console.log(multiply(5)); // expected output: 5 보통 매개변수라고도 하고 인자라고 불리는 거 같다 위에 코드를 보면 function multiply(a, b = 1) 여기서 (a , b) 부분이 피라미터가 되는 것이다 return이란 함수 안에 있는 명령을 중지하고 "return값을 반환해라" 하는 의미인데 자세한건 return을 작성할 때 알아보겠다 그렇게 return( a*b ) 즉 multiply(a..

html에 가장 기본이 되는 링크 태그를 부모자식 태그의 개념으로 이미지에 넣을 수 있다 코드 구글사이트로 넘어가지는 것을 확인 할 수 있다 끝