Publishing/CSS3

layout 관련 속성 - css 배우기

oodada 2023. 12. 1. 09:40

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 속성이 적용된 요소의 영향을 받지 않는 속성

'Publishing > CSS3' 카테고리의 다른 글

background 속성 - css 배우기  (0) 2023.12.04
font, text 관련 속성 - css 배우기  (0) 2023.12.03
css의 기초 - css 배우기  (0) 2023.11.29
네이밍 가이드(Naming Guide) - css 배우기  (0) 2023.11.26
dd  (0) 2020.10.20
티스토리 친구하기