[CSS 기초] display 디스플레이, box position 박스 포지션 static, relative, fixed, absolute,

0. 들어가며

프론트 엔드를 구조적으로 보면 여러 개의 박스로 이루어져 있는데 이 박스를 CSS에서 어떻게 자리배치 할 수 있는지 알아본다.
 

1. display

대상이 블록(blcok) 속성을 따를 것이냐 인라인(inline) 속성을 따를 것이냐
e.g. 디스플레이 바꿔주면 박스도 줄바꾸지 않고 한줄에서 나오게 할 수 있음
 
※ 디스플레이 변경 방법
셀렉터 안에 display: 원하는 상태 넣어주면 됨
 
1) block
- 대상이 block element 속성을 따름
- 한 줄에 하나
 
2) inline
- 대상이 inline 속성을 따름
- 한 줄에 여러개 (너비가 허용하는 한)
 
3) inline-block
- 대상이 inline 처럼 한 줄에 나오는데 block일때 처럼 박스 형태는 유지 함.

4) flex
가운데정렬, 간격 일정하게 등 자주쓰는 기능 있음
align-items: center, ...
justify-contents: space-around, ... 등과 함께 사영
부모 박스에 flex를 주면 자식들이 영향을 받음

5) gird
부모 박스에 grid를 주면 자식들을 일정한 크기의 칸에 나눠 넣을 수 있음
grid-template-comumns: repeat(4, 1fr)
grid-gap: 100px;

 

6) float

left, center, right

텍스트 바다에서 이미지가 어떻게 떠있을 수 있을지 설정

*워드,한글에서 이미지와 본문배치와 비슷한 용도 

 

2. box position

※ 포지션 변경 방법
셀렉터 안에 position: 원하는 상태 넣어주면 됨
 
1) static
- 디폴드값으로 설정 안해도 static으로 설정되어 있다.
- 박스는 블록 엘리먼트라서 자동 줄바꿈이 되고 왼쪽 정렬인데 이게 static으로 설정되어있기 때문.
 
2) relative
- 내가 static 상태에서 있어야 할 자리를 기준으로 위치가 변경됨
 
3) absolute
- 내가 담겨있는 더 큰 박스를 기준으로 위치가 변경됨
 
4) sticky
- 스크롤해서 내려가도 내 위치 유지함.
 

 
📌 내가 구현한 태그, 스타일 등이 브라우저 별 호환 되는지 확인하는 사이트
https://caniuse.com/