CSS 4. Layout

1. position 속성 - relative, absolute, fixed

position : 요소의 위를 나열하기 위해 사용하는 css속성

[종류]
① static : default값. 아무런 변화 없음
② relative : 상대적 위치
 용도1) 요소 자기 자신의 상대적 위치를 잡기 위함
 용도2) 자식요소의 기준요로 사용
③ absolute : 절대적 위치
 부모요소를 기준으로 자기 자신의 위치를 잡음
④ fixed : 위치를 절대적으로 고정할 때 사용 → header에 주로 사용

✔ position : relative

👇구현 화면

✔position: absolute

👇구현 화면

2. display - inline / inline-block / block

💡block 요소? 요소의 너비가 가지는 영역이 화면 전체가 가지는 너비와 같다. width 100%인 요소 (한 줄에 하나씩!)
💡inline 요소? 요소의 너비가 요소가 가지는 크기만큼인 요소. 자기 자신만큼만 영역을 잡는다.
💡inline-block요소? inline인 요소가 block처럼 적용됐으면 할 때 사용하는 방법

display: 요소의 내부, 외부 표시 유형
css에서 display 속성 변경을 통해 block → inline-block, inline요소로 반대로 inline요소를 block 또는 inline-block으로 변경할 수 있다.

(1) display: inline

span#mySpan {
  background-color:red;
  display:inline;
}

A span element. mySpan. Another span element.

(2) display: block

span#mySpan {
  background-color:red;
  display:block;
}

A span element.
mySpan.Another span element.

3. float

💡float이란?

사전적 의미 - 뜨다/부동
컨텐츠의 위치를 지정하는 또다른 속성.

✔float의 속성

  left: 요소가 container의 왼쪽에 떠있다.
 right: 요소가 container의 오른쪽에 떠있다.
 none: default값
 inherit: 부모의 float값을 상속함(자주 사용하지 않음)
✔float의 특성상 요소가 떠다니므로 요소의 배치가 끝나면 float처리 된 요소들을 감싸는 container의 높이값을 제대로 설정해주기 위해서 종료 처리가 필요하다.

✅float 종료하는 법

1_Float된 박스들의 바로 다음 박스에게 clear:both; 처리
👉바로 다음에 박스가 없으면 사용할 수 없다.

2_Float된 박스들을 감싸는 박스를 다시 float:left; 처리
👉해당하는 float까지 연쇄적으로 해제해야 하며 width값을 주어야 크로스 브라우징이 된다.

3_Float된 박스들을 감싸는 박스에 overflow:auto; 처리
👉세로 스크롤바가 생길 경우 사용할 수 없으며 width값을 주어야 크로스 브라우징이 된다.

4_Float된 박스들을 감싸는 박스에 height 값을 준다.
👉본문 내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우에만 사용한다.

5_Float된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제
👉width 값 주어져야 크로스 브라우징이 된다.

참고사항: 1번, 5번 방법이 가장 많이 사용된다!

float 예제 살펴보기

👇구현화면

전체 container역할을 하는 '.wrap'의 자식요소인 box1, box2, box3에 float:left 처리를 하였다. 이는, 주어진 부모요소 공간의 왼쪽에서 부터 요소의 크기만큼 붙는다는 뜻이다. 각 박스요소에 margin-right값이 들어가 있어서 일정한 간격을 두고 왼쪽에서부터 차례로 붙어서 가로 나열된 모습을 볼 수 있다.