layout 관련 속성 - css 배우기

layout 관련 속성

block (기본값)

• width, height 속성을 가질 수 있다.
• margin, padding 속성을 가질 수 있다.
• div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, table, header, footer, section, article, nav, aside, blockquote, address 등

<div class="show">보였다</div>
<p class="hide">안보였다</p>

.show {
    display: block;
}
.hide {
    display: none;
}

inline

• width, height 속성을 가질 수 없다.
• margin-top, margin-bottom, padding-top, padding-bottom 속성을 가질 수 없다.
• span, a, img, input, button, select, textarea, label, strong, em, b, i, u, s, small, big, tt, sub, sup, strike, q, cite, code, abbr, acronym, dfn, kbd, samp, var, mark, ruby, rt, rp, bdo, bdi, wbr, time 등

<img src="https://ssl.pstatic.net/melona/libs/1378/1378592/987b5942cbc05aa620e8_20231124190652192.png" />
<span>인라인</span>
<p>블록</p>

img {
    display: block;
}
.inline {
    display: inline;
}

flex

https://www.w3schools.com/css/css3_flexbox_container.asp

flexbox 레이아웃을 위한 속성

flex Container

표로 정리

속성	설명
flex-direction	flex item의 배치 방향을 결정한다. (row, row-reverse, column, column-reverse)
flex-wrap	flex item의 여러 줄 묶음(줄 바꿈)을 설정한다. (nowrap, wrap, wrap-reverse)
flex-flow	flex-direction과 flex-wrap의 단축 속성이다. (flex-direction flex-wrap)
justify-content	flex item을 수평 방향으로 정렬한다. (flex-start, flex-end, center, space-between, ...)
align-items	flex item을 수직 방향으로 정렬한다. (flex-start, flex-end, center, baseline, stretch)
align-content	flex item의 여러 줄 묶음(줄 바꿈)을 수직 방향으로 정렬한다. (flex-start, flex-end, ...)

flex Item

표로 정리

속성	설명
order	flex item의 순서를 결정한다. (숫자가 작을수록 앞에 배치)
flex-grow	flex item의 증가 너비 비율을 설정한다. (기본값 0)
flex-shrink	flex item의 감소 너비 비율을 설정한다. (기본값 1)
flex-basis	flex item의 (공간 배분 전) 기본 너비를 설정한다. (기본값 auto)
flex	flex item의 너비를 설정한다. (flex-grow, flex-shrink, flex-basis의 단축 속성)
align-self	flex item의 수직 방향 정렬 방법을 설정한다. (align-items의 단축 속성)
flex-flow	flex-direction과 flex-wrap의 단축 속성이다. (flex-direction flex-wrap)
justify-self	flex item을 수평 방향으로 정렬한다. (flex-start, flex-end, center, space-between, ...)
align-self	flex item을 수직 방향으로 정렬한다. (flex-start, flex-end, center, baseline, stretch)
align-content	flex item의 여러 줄 묶음(줄 바꿈)을 수직 방향으로 정렬한다. (flex-start, flex-end, ...)

grid

https://www.w3schools.com/css/css_grid_container.asp

grid 레이아웃을 위한 속성

grid Container

표로 정리

속성	설명
grid-template	grid의 행과 열의 개수, 크기를 설정한다. (grid-template-rows, grid-template-columns)
grid-template-rows	grid의 행의 개수, 크기를 설정한다. (grid-template-rows: 100px 100px 100px;)
grid-template-rows	grid의 열의 개수, 크기를 설정한다. (grid-template-columns: 100px 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: 100px 100px 100px / 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: repeat(3, 100px) / 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: repeat(3, 1fr) / 1fr 1fr;)

grid Item

표로 정리

속성	설명
grid-template	grid의 행과 열의 개수, 크기를 설정한다. (grid-template-rows, grid-template-columns)
grid-template-rows	grid의 행의 개수, 크기를 설정한다. (grid-template-rows: 100px 100px 100px;)
grid-template-rows	grid의 열의 개수, 크기를 설정한다. (grid-template-columns: 100px 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: 100px 100px 100px / 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: repeat(3, 100px) / 100px 100px;)
grid-template-rows	grid의 행과 열의 개수, 크기를 설정한다. (grid-template: repeat(3, 1fr) / 1fr 1fr;)

position

https://www.w3schools.com/css/css_positioning.asp

요소의 위치를 지정하는 속성

static (기본값)

• 일반적인 문서 흐름에 따라 배치된다.
• top, right, bottom, left, z-index 속성을 사용할 수 없다.

relative

• 일반적인 문서 흐름에 따라 배치된다.
• top, right, bottom, left, z-index 속성을 사용할 수 있다.
• 자신의 원래 위치를 기준으로 이동한다.

absolute

• 일반적인 문서 흐름에서 제거되고, 가장 가까운 조상 요소를 기준으로 배치된다.
• top, right, bottom, left, z-index 속성을 사용할 수 있다.
• 자신의 원래 위치를 기준으로 이동한다.

fixed

• 일반적인 문서 흐름에서 제거되고, 뷰포트를 기준으로 배치된다.
• top, right, bottom, left, z-index 속성을 사용할 수 있다.
• 자신의 원래 위치를 기준으로 이동한다.

sticky

• 일반적인 문서 흐름에 따라 배치된다.
• top, right, bottom, left, z-index 속성을 사용할 수 있다.
• 자신의 원래 위치를 기준으로 이동한다.
• 스크롤 영역을 기준으로 top, bottom이 적용된다.

float

https://www.w3schools.com/css/css_float.asp

요소를 좌우 방향으로 띄워서 배치하는 속성

left

• 요소를 왼쪽으로 띄워서 배치한다.
• 요소의 블록 레벨 특성을 없애고, width 속성과 height 속성의 영향을 받는다.

right

• 요소를 오른쪽으로 띄워서 배치한다.
• 요소의 블록 레벨 특성을 없애고, width 속성과 height 속성의 영향을 받는다.

none (기본값)

• 요소를 띄워서 배치하지 않는다.

clear

https://www.w3schools.com/cssref/pr_class_clear.asp

float 속성이 적용된 요소의 영향을 받지 않는 속성