[HTML/CSS] 레이아웃(feat. position 속성과 display 속성)

position 속성

 relative 

- 자신의 원래 위치를 기준으로 위치를 변경하고 싶을 때 사용

 

 absolute 

- 자신이 아닌 자신을 감싸고 있는 부모 기준으로 위치 좌표를 잡을 때 사용

( 이때 부모는 static 속성이 아닌 가장 인접해 있는 부모를 의미 )

- 이 속성을 부여하면 나머지 태그들이 이 속성이 있는 태그를 무시. 즉, 태그들의 위치가 겹칠 수 있음

 

 fixed 

- 브라우저 전체를 기준으로 위치 좌표를 잡음. 스크롤이 생겨도 해당 태그는 그 자리에 고정

 

---

 

display 속성

 inline 

- display 속성이 inline으로 지정된 요소는 전 후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치

- <span>, <a>, <em> 태그 등..

 

 inline-block 

- 하이브리드 모드처럼 동작

- 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치

- block 요소처럼 width와 height 속성 지정 및 margin과 padding 속성의 상하 간격 지정 가능

- 다시 말해, 내부적으로는 block, 외부적으로는 inline 규칙 따름

 

 block 

- 전 후 줄바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지

- <div>, <p>, <h1> 태그 등..

 

레퍼런스
- https://m.blog.naver.com/xowns4817/222138686218
- https://www.daleseo.com/css-display-inline-block/