Box-sizing이란? 화면에 보여지는 Box의 크기를 표현하는 방식을 뜻합니다. 기본적으로 모든 Box의 기본값은 content-box 입니다. 구글 이미지 Box의 Box-sizing 값을 살펴보면 아래와 같이 Box-sizing은 content-box라고 표현됩니다. CSS로 입히지 않아도 기본적으로 content-box로 지정됩니다. 그러나, 파란색으로 표시된 부분이 "Content"영역인데, 이 "Content-Box"영역에 한해서 Box의 크기를 지정하는겁니다. 현재 Google의 Content 영역의 크기는 Width : 272px, Heigth: 92px 입니다. 만약 CSS를 추가 적용하는데 Padding-left의 영역을 400px만큼 주었다면,화면에서 보여지는 결과는 Padding-..

Box Model이란 ? HTML element가 웹 페이지에서 차지하는 공간입니다. 키보드의 F12를 누르게되면 개발자 도구를 펼칠 수 가 있는데, 가령 Google에 접속하여 로고 공간에 대해서 생각을 해보겠습니다. 아래와 같은 영역을 선택하여 Element -> "Computed"로 진입하면 네모박스 형태의 CSS를 볼 수 있습니다. Computed탭을 자세히 보겠습니다. Google 로고인 box는 파란색 공간(Content)으로 width : 272, height : 92로 구성 되어있습니다. Google 밑에 있는 키보드 모양의 박스를 살펴보겠습니다. 아래의 CSS표기처럼, 1) div태그의 Umvnrc className의 파란색공간(Content)은 23.993 px * 43.993 px의 ..

!important란? CSS 코드를 살펴보다보면, 속성값에 !important를 어쩌다 한번쯤은 목격했을 것이라 생각됩니다. !important는 선택자의 우선순위 중에서도 가장 최우선으로 적용하고 싶을 때 사용됩니다. 인라인 스타일, id selector, class selector보다도 최최최최최우선 순위로 CSS를 입히고 싶을 때 사용합니다. 사용 방법은 속성값에 !important만 붙여주면 됩니다. [ CSS 적용 우선순위 ] !important > id > class , 가상클래스 > 요소 [예제] id가 first인 h1 요소들이 있습니다. 어떤 CSS를 적용했든 h1의 첫번째 요소를 파란색으로 입히고자 합니다. begin CSS1 begin CSS2 begin CSS3 begin CSS4..

가상 클래스 선택자란? 가상선택자는 기본선택자 뒤에 :(콜론)을 붙인 가상 클래스를 의미합니다. 선택자중에서 첫번째, 마지막, 짝수, 홀수번째의 요소를 선택하고 싶을때 등 사용한다. [사용방법] 선택자:가상클래스 { property : value } 아래의 h1 태그가 있다고 가정합니다. begin CSS1 begin CSS2 begin CSS3 begin CSS4 begin CSS5 :first-child - 첫번째 요소의 CSS를 변경하고 싶을때 :last-child - 마지막 요소의 CSS를 변경하고 싶을때 /* #0000FF 파란색*/ /* #8A2BE2 보라색*/ /* #FACBBA 살구색*/ /* #FFD700 노란색*/ h1:first-child { color : #0000FF; } h1:l..