css 중요 문법

 

박스

콘텐츠 영역 : width, height 공간

padding 영역 : 안쪽 여백(콘텐츠와 테두리의 영역) -> 실제 크기에 변화를 줌

border 영역 : 테두리 영역

margin 영역 : 바깥쪽 여백

 

block , inline

block

• 자동으로 줄바꿈이 되는 요소로 화면 전체를 사용
• width 미지정 시 화면공간 100%
• block 안에 block요소와 inline 요소를 포함할 수 있다.

 

inline

• 태그안 콘텐츠만큼 width가 자동으로 지정
• width와 height를 변경할 수 없음
• inline 안에 inline을 포함할 수 있지만 block은 포함할 수 없다.

 

선택자

BEM (.block__Element--Modifier)

• .header .nav { (X) } /* 이렇게 하면 nav가 header 구조에 종속이 된다. */
• .header__nav { (O) } /* 구조도 표현하면서 종속 관계가 없다. */