5. CSS 속성

CSS 속성

display(block, inline, inline-block)

display 속성이 block, inline-block이면 블록을 쌓듯이 위에서 아래로 쌓이듯이 채워진다.

display 속성이 inline 이면 오른쪽으로 흐른다. <span>, <p>, <strong>, <a>등은 기본 속성이 inline이다.

position (static, absolute, relative, fixed)

postion 속성은 기본이 static이다. 순서되로 배치된다.

absolute 속성이면 기준점에 따라서 위치한다. 기준점은 상위 엘리먼트가 static 이 아닌 것을 기준으로 한다.

relative 속성은 원래 자기가 위치해야 할 곳을 기준으로 한다. (top, left, right, bottm)

fixed는 viewport(전체화면) 왼쪽, 가장 위를 기준으로 동작한다.

float(left, right)

위에서 아래로 쌓이는 블록들을 left나 right 속성을 주면 물에 둥둥 뜨듯이 float속성이 없는 태그 위로 마치 3차원에 있는 것처럼 표시 된다.

clear 속성

overflow 속성

box-sizing

box-sizing : content-box 인 경우 box의 내용에 따라 박스 크기가 달라진다.

box-sizing : border-box 인 경우 box의 크기는 고정된다.

justify-content

float가 아닌 정렬 방법.

참고 자료

html 태그 종류별 예시 : https://htmlreference.io/

Sabjil Log