Web Publishing(기초)

box-sizing: content-box(기본), border-boxcontent-box: width 속성 값을 콘텐츠 영역 너비 값으로 사용border-box: width 속성값을 콘텐츠 영억에 테두리까지 포함한 박스 모델 전체 너비 값으로 사용

position: static, relative, absolute, fixedstatic - 문서의 흐름대로 배치하기position의 기본값으로 요소를 나열한 순새대로 배치하며 top, right과 같은 소성은 사용할 수 없다.relative - 문서 흐름 따라 위치

하위 선택자(descendant selector)는 부모 요소에 포함된 하위 요소 모두에 스타일의 적용되는 것으로 '자손 선택자'라고도 합니다

기본형 속성

그리드 시스템에서는 화면 너비를 몇 픽셀로 하는가에 따라 960픽셀로 고정하는 '960' 그리스 시스템이나 '1200' 그리드 시스템으로 나누기도 하고 몇 개의 컬럼으로 나누는가에 따라 12칼럼, 16칼럼 그리드... 이런식이 있다.고정 그리드 레이아웃으로 만들고 퍼센

텍스트 크기를 픽셀 단위를 사용하면 크기가 고정되기 때문에 유동적으로 크기를 변경하기 위해서 em, rem 단위를 사용한다.1em = 16px부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한다. 단점으로는 부모 요소의 크기에 따라 자식 요소의 글자 크기

display: flex, inline-flexflex : 플렉스 박스를 박스 레벨 요소로 정의합니다.inline-flex : 플렉스 박스를 인라인 레벨 요소로 정의합니다.flex-direction: row, row-inverse, column, column-inver

모바일 화면부터 시작해 태블릿과 PC화면 순서대로 구성해야 편리하다. 이런 방식을 모바일 퍼스트(mobile first)이다.