레이아웃은 웹사이트에 여러 구성요소를 보기좋고, 효과적이게 배치하는 작업을 말한다.
레이아웃의 모든것을 공부해보자!
🔍 box-sizing : border-box
사진처럼 div로 생성되어 만들어진 영역은 content를 기준으로 padding margin 등의 영향을 받아 박스의 사이즈가 결정이 된다.
레이아웃 에서의 div박스는 공간을 분할 하는 것이기때문에 그 기준이 content 인 것 보단 box를 통해 보는것이 더 유리하다!
box-sizing : border-box 를 이용한다면 기준이 content 영역이 아닌 box의 border테두리 끝이 기준이 된다!
🔍 Position 속성
1. static
static 은 아무리 left , right, top , boottom 값을 설정해도 위치가 바뀌지 않는다.
2. relative
앞서 설명한 static 과 달리 left, right, top , boottom 값을 주었을 때 이동한다.
이와 같이 부모에 대해 상대적으로 움직인다!
3. absolute
자신의 부모 중 static값이 아닌 부모를 참조해 기준삼아 위치를 선정한다.
4. fixed
부모를 기준으로 삼지 않고 최상위에 있는 태그를 기준삼아 위치를 선정한다.
또한 스크롤을 무시하고 위치를 고정한다.
🔍 Display
1 . inline
-
새 줄에서 시작하지 않는다.
-
필요한 만큼만 너비를 차지한다.
자주 쓰이는 inline 태그의 종류 : span , a , img , button , br , input , script
2 . block
-
항상 새 줄에서 시작한다.
-
항상 사용 가능한 전체 너비를 차지합니다(최대한 왼쪽과 오른쪽으로 늘어남).
-
위쪽 여백과 아래쪽 여백이 있다.
자주 쓰이는 block 태그의 종류 : div, p , form
3. inline - block
- display 속성을 inline-block으로 설정 시 inline 블록 처럼 줄바꿈 없이 필요한 만큼만 너비를 차지한다.
- 하지만 inline 블록에서는 불가능 하던 width 와 height 속성 지정 및 margin , padding 속성 까지 지정 가능하다!
display : inline-block;
