CSS 포지셔닝 - float 복습

[CSS 포지셔닝]

1. CSS 포지셔닝의 목적

레이아웃 만들기 위함

 

 

 

2. CSS 위치 지정을 위한 속성

• float 속성 - 세로 정렬된 것을 가로로 정렬, float 속성을 뒤에 따라오는 코드들도 상속받는다.
• clear 속성 - float 속성 해제
• Position 속성 - 배치 방법 지정
• Box-sizing 속성 - 상자 너비 기준 설정
• z-index 속성 - 순서 요소 정렬

 

 

3.  float 속성

: block 요소에 적용되는 것

none(default) - float 속성 적용 x

left - 요소가 컨테이너의 왼쪽에 배치됨(왼쪽 정렬)

right - 요소가 컨테이너의 오른쪽 배치(오른쪽 정렬)

margin : auto - 요소를 중앙에 배치(가운데 정렬)

 

 

4. vs code에서 연습

 

1번 연습

 1-1. 클래스 지정하여 clear : both (하나하나 입력해야 해서 2번 방식 활용)

 

  ... 

 

1-2. clearfix 암기***

 

1-1과 달리 클래스 하나마다 clear:both 안해도 돼서 편리함.

 

 

 

 

 

 

 

 

 

5. float, clearfix 활용

3번 연습

 

주의할 점 : 

- ul class=nav clearfix 로 지정하고 검사 돌리면 부적합 뜸

div class 뒤에 clearfix 붙여주기

 

 

6. 추가 공부 (코딩웍스 따라 연습하기)

 

 

새로 배운 거:

 

* 높이만큼 행간값을 주면 글자가 박스 중앙으로 온다.

예)

height: 100px

line-height: 100px

 

*border값 계산하면서 전체 컨테이너 크기에 맞춰 박스값 주기 어려우니깐 간단하게 box-sizing을 이용한다.

예)

box-sizing: border-box ;

 

*.inner : hover (x)

 .inner>div: hover (o)