HTML5 - [8]고급 레이아웃 [ 유연한 박스 레이아웃, 그리드 레이아웃, 사용자 인터페이스]

HTML5 - [8]고급 레이아웃 [ 유연한 박스 레이아웃, 그리드 레이아웃, 사용자 인터페이스]

(1) 유연한 박스 레이아웃

유연한 박스 레이아웃

속성	설명
flex-direction	플렉스 항목의 배치 방법 지정 row | row-reverse | column | column-reverse
flex-wrap	플렉스 항목이 컨테이너에서 사용 가능한 공간을 기준으로 여러 줄에 줄바꿈 될지를 지정 nowrap | wrap | wrap-reverse
flex-flow	flex-direction과 flex-wrap 속성의 일괄 지정
order	플렉스 항목이 배치되는 순서 지정 (정수값, 0)
flex-grow	플렉스 항목의 폭의 확대 비율 지정 (정수값, 0)
flex-shrink	플렉스 항목의 폭의 축소 비율 지정 (정수값, 1)
flex-basis	플렉스 항목의 기준 폭 지정 auto | <width>
flex	flex-grow, flex-shrink, flex-basis 속성의 일괄 지정
justify-content	기본 축을 따라 플렉스 항목의 정렬 방법 지정 flex-start | flex-end | center | space-between | space-around
align-content	교차 축을 따라서 플렉스 컨테이너 줄의 정렬 방법 지정 flex-start | flex-end | center | space-between | space-around | stretch
align-items	항목을 세로 방향으로 정렬할 때 전체 항목을 동일한 기준 축으로 지정 stretch | flex-start | flex-end | center | baseline
align-self	플렉스 항목마다 정렬 기준 축을 별도로 지정 auto | stretch | flex-start | flex-end | center | baseline

(2) 그리드 레이아웃

그리드 레이아웃 생성 관련 속성

그리드 레이아웃 생성 관련 속성

속성			설명
grid	grid-template	grid-template-columns	그리드의 열의 크기 지정
		grid-template-rows	그리드의 행의 크기 지정
		grid-template-areas	특정 그리드 항목과 관련되지 않은 그리드 영역에 이름 지정
	grid-auto-flow		그리드 항목의 자동 배치 지정
	grid-auto-columns		묵시적으로 생성된 그리드 트랙의 크기 표시
	grid-auto-rows

그리드 항목 배치 관련 속성

그리드 항목 배치 관련 속성

속성			설명
grid-area	grid-column	grid-column-start	그리드 라인과 확장 또는 자동 배치를 통한 그리드 내에서 그리드 항목의 크기와 위치 지정
		grid-column-end
	grid-row	grid-row-start
		grid-row-end

(3) 사용자 인터페이스

사용자 인터페이스

속성		설명
content		가상요소 ::before와 ::after를 이용하여 특정 요소의 앞이나 뒤에 콘텐츠를 추가할 수 있도록 지정 <string> | url() | counter() | attr() | open-quote | close-quote | no-open-quote | no-close-quote
box-sizing		해당 요소의 박스 크기를 결정하는 방식 지정 content-box | border-box
박스 윤곽선	outline-color	색상 지정 <color> | invert
	outline-style	모양(스타일) 지정 auto | <border-style 속성값>
	outline-width	굵기 지정 <length> | thin | medium | thick
	outline	outline-color, outline-style, outline-width의 일괄 지정
	outline-offset	요소 박스의 외부 영역과 윤곽선 사이의 간격 지정
resize		사용자로 하여금 요소 박스의 크기 조정 여부 지정 none | both | horizontal | vertical
text-overflow		요소 박스 내의 텍스트가 박스 영역에서 벗어났을 때의 표시 방식 지정 clip | ellipsis
cursor		요소의 테두리, 패딩, 그리고 콘텐츠 위에 있을 때 표시될 커서 모양 지정 auto, default, wait, help, pointer, progress 등