TIL 20 - css 레이아웃

hojung choi·2021년 7월 5일

TIL html

html / css / jquery

목록 보기

3/3

👉🏻 position

position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.

static : 기본값으로 아무런 영향을 주지 않는다.
relative : 기준점으로 지정한다. top, right, bottom, left의 값에 따라 위치를 적용한다. 다른 요소에는 영향을 주지 않는다.
absolute : 페이지 레이아웃에 공간을 잡지 않는다. 대신 가장 가까운 위치 지정 조상 요소(relative)에 대해 상대적으로 배치한다. 단, 조상 중 위치 지정 요소가 없다면 가장 상위의 블록을 기준으로 배치한다. 위치는 top, right, bottom, left 값이 지정한다.
fixed : 페이지 레이아웃에 공간을 잡지 않는다. 대신 html에 가장 상단의 컨테이너를 기준으로 배치한다. 최종 위치는 top, right, bottom, left 값이 지정한다.
sticky : 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 위치를 적용한다. 다른 요소에는 영향을 주지 않는다.

<div class="box-relative">
   <div class="box-absolute"></div>
</div>

.box-relative {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
.box-absolute {
  position: absolute;
  top: 30px;
  right: 15px;
  width: 100px;
  height: 100px;
  background: red;
}

box-relative를 기준점으로 잡고, box-absolute를 absolute를 통해 relative위에 띄워주었다.

👉🏻 display 속성

✅ inline

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다다. 대표적인 inline 엘리먼트로 span이나 a, em 태그 등이 있다.

inline속성은 width,height,padding,margin이 적용되지 않는다

✅ block

block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄(전체 영역)을 차지한다. 대표적인 block 엘리먼트로 div이나 p, h1 태그 등이 있다

block 속성은 width,height,padding,margin이 적용된다.

✅ inline-block

inline-block으로 지정된 엘리먼트는 기본적으로 inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치된다. 하지만 inline 엘리먼트에서 불가능하던 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정이 가능하다.

👉🏻 float

float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 준다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용된다.

inherit: 부모 요소에서 상속
left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
none - 요소를 부유시키지 않음