Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션

마진(Margin)

- 테두리(border)와 이웃하는 요소들의 간격 
- 마진은 눈에 보이지 않음
- 세로 겹침 현상이 일어난다.

✔ 세로 겹침 현상
세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 더 큰 값을 선택하는 현상

 

박스사이징(Box-Sizing)

- width, height 값에 padding border영역은 포함되지 않는다.(content 크기만!)

- 만약content width가 100%로 설정되는 경우 padding이나 border 속성을 사용하면 content가 찌그러진다.

- box -sizing속성값을 border-box로 설정하면, width와 height값에 padding과 border를 포함 
-> 한마디로 찌그러지지 않는다.

디스플레이

- 웹페이지의 레이아웃을 결정하는 속성

-속성: block, inline, inline-block, none

✔visiblitity: hidden; -> visiblitity:visible 화면에서 사라짐 화면에 나타남

 

 

포지션

 

- 요소의 위치를 결정하는 방식을 설정

1. 정적 위치 지정방식
- static position. 기본값
- HTML 요소의 위치를 결정하는 기본적인 방식
- 단순히 웹 페이지의 흐름에 따라 차례대로 요소들이 위치를 결정하는 방식

2. 상대 위치 지정방식
- relative position
- HTML 요소의 기본 위치(정적 위치 지정방식)을 기준으로 위치를 재설정하는 방식
- top,left,right,bottom 속성값을 사용하여 재설정

3. 고정 위치 지정방식
- fixed position
- 웹페이지가 스크롤 되어도 고정위치로 지정된 요소는 항상 같은 곳에 위치
- 뷰포트를 기준으로 위치를 설정하는 방식
- top,left,right,bottom 사용 가능

4. 부모태그를 이용한 고정위치 지정방식
- sticky position
- fixed가 브라우저 화면의 절대위치를 사용하는 반면 sticky는 부모 태그의 절대 위치값을 사용하는 방식
- 익스플로러에서는 작동하지 않음

5. 절대 위치 지정방식
- absolute position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 지정할 수 있음 (괄호 밖에 있는 요소 기준)
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 결정
- 조상요소를 기준으로 위치를 지정하려면, 조상요소는 반드시 static(정적)위치가 아니여야함

- top,left,right,bottom 속성 값을 사용할 수 있음