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..

지난시간에 "선택자" 에 대해서 공부를 했다면, 본격적으로 자식, 자손, 형제 선택자에 대해서 알아보려고 합니다. [CSS] 선택자 Selector (Type, Class) 1. 선택자 (Selector) 선택자 "Selector"란 말 그대로 선택을 해주는 요소입니다. 1.1 Type선택자 (태그 선택자) [HTML] A선택자1 A선택자2 A선택자3 A선택자4 Type선택자는 태그에 대한 스타일을 지정합니다. a torimaru.tistory.com * 오늘의 예제 /* div = 부모 */ Welcome to Bamtory Blog /* h1 = div의 자식 */ /* ul = div의 자식 */ Sub Content /* h2 = div의 손자, ul의 자식 */ begin CSS1 /* li =..