[CSS] Day3

1. CSS 디스플레이

css 디스플레이
- 웹 페이지의 레이아웃을 결정하는 속성(display)
(block, inline, inline-block, none)

✓ visibility: hidden; <-> visibility: visible;

 

 

2. CSS 폼 및 Postition

css 폼
- tcp school, w3schools, mdn 참고

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

 

3. 정적 위치 지정방식

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

 

4. 상대 위치 지정방식

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

 

5. 고정 위치 지정방식

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

 

6. 부모 태그를 이용한 고정 위치 지정방식

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

 

7. 절대 위치 지정방식

- absolute position
- 뷰포트를 기준으로 위치를 설정하는 방식
- 조상요소를 기준으로 위치를 저장할 수 있음
- 조상요소를 가지지 않으면 body 요소를 기준으로 위치를 지정
- 조상요소를 기준으로 위치를 설정하려면 조상요소는 반드시 정적 위치 지정 방식이 아니여야 함
- top, left, right, bottom 속성값을 사용할 수 있음

 

8. Z-Index

- HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠 수 있음
- 겹쳐지는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용
- 순서는 숫자의 크기가 클수록 위에 위치하고 작을수록 아래에 위치하게 됨
    z-index: 10

 

9. float

- HTML 요소가 주변(수평으로 나열된)의 다른 요소들과 자연스럽게 어울리도록 만듦
- float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐
- float를 적용받은 요소의 다음애 나오는 요소방향을 결정(left, right)
- 컨텐츠 크기 만큼만 영역을 설정(블록)
- float를 적용받은 요소는 다른 요소보다 위쪽(배경보다 위)에 위치

 

10. clear

- float 속성이 적용된 이후 나타나는 요소들의 동작을 조절
- float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기 힘듬
- clear 속성을 이용하여 float 이후에 등장하는 요소들이 더이상 float 속성에 영향을 받지 않도록 설정(left, right, both) 
# bott : 양쪽에서 올라오는것을 막아줌