css selector , 박스 모델 (드림코딩 by 엘리)

css - selector

 

css : Cascading Style Sheet

Universal	*
type	tag
ID	#id
Class	.class
State	:
Attribute	[]

 

css 문법

 

selector { 

  property : value;

}

 

<div> 태그 자체는 원래 사용자에게 보여지지 않지만 컬러를 지정하고 width, height 를 설정해 주면 된다.

 

a[href] {   } : a 태그 중 attribute 에 href 가 있는 것만 설정

     a[href = "naver.com"] {      } 라고 특정 주소만 지정할 수도 있고

     a[href^ = "naver"] {     } 라고 ^를 이용해서 naver 로 시작하는 것 / $를 이용해서 naver로 끝나는 것만 지정할 수도 있다.

 

위 캡처에 보면 li와 h1에 id = "special"이 있는데 li 에만 적용하고 싶으면 

li#special 로 넣을 수도 있음

 

박스 모델

 

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현한다.

CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정한다.

 

하나의 박스는 네 부분(영역)으로 이루어진다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부른다.

padding

박스의 안쪽 여백 영역을 설정한다.

padding-top, padding-right... 이런식으로 따로 설정할 수도 있지만 시계방향 순서로 padding : top right bottom left 적어주면 쉽다.

필요한 경우 '위아래' '양옆'만 설정할 수도 있음 : padding : 20px 0px

 

border

요소의 테두리를 설정한다.

width, style, color를 설정하는데 이것도 한 번에 적어 줄 수 있다. border : 2px dotted red

만약 style을 지정하지 않으면 기본값인 none 이 되어 테두리가 보이지 않는다.

 

margin

박스의 바깥쪽 여백 영역을 설정한다.