TIL - 17 | Layout의 모든 것

Position

static : 모든 요소의 default 값

relative: 자기 자신이 원래 있던 자리 (원래 있던 자리를 기억하고 있음)

absolute: 기준점 설정 필요 | Block으로 바뀐다.(float과 동일)

fixed : viewport 기준으로 움직인다.

relative와 absolute 이해하기

검색창을 만들기 위해 html에서 input을 만들고 돋보기 아이콘을 삽입해봤다.

돋보기 아이콘을 검색창안에 넣기 위해 위치를 조정했지만, 인풋 안에 들어가지는 못했다.

relative와 absolute를 다시 학습하고 코드를 수정해 보았다.

.search {
  position:relative;
  width: 300px;
 
}

input {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding:10px 12px 10px 12px;
  font-size: 14px;
}

img {
  position:absolute;
  width: 17px;
  top: 10px;
  right: 12px; 
}

input과 돋보기 아이콘을 div로 묶고 부모 요소에 relative를 주고 자식 요소인 돋보기 아이콘에 absolute를 주어서 부모 요소인 search가 기준점을 잡아주고 제자리를 찾아가는 모습을 확인했다.

fixed 이해하기

다양한 웹사이트를 보다 보면 스크롤을 하더라도 상단 네비가 고정된 상태에서 스크롤이 되는 사이트를 많이 본 경험이 있다. 이는 사용자가 스크롤을 하더라도 다른 영역으로 넘어가기 위한 요소가 상단에 고정되어 사용자에게 다시 상단으로 올라가 네비를 확인하지 않더라도 그 자리에서 바로 다른 페이지로 넘어갈 수 있는 선택권을 준다.

fixed는 생각보다 간단했다.
일단 html에서 header를 만들어주고, css를 수정해준다.

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  background-color: rgba(45, 45, 45, 0.95);
}

가장 상단 부분이기 때문에 top, left, right을 0으로 주고 position을 fixed로 설정하면,

header가 만들어졌고, 스크롤을 하게되면

투명도를 주어 확인하면 header가 고정된 상태에서 스크롤 되는 모습을 확인할 수 있다.

inline, inline-block, block?

block -> 길막!, inline -> 흐름!
block은 비유하자면 면, inline은 선이다! 한 마디로 면(영역)과 선(흐름)으로 이해하면 쉽다.

block? 길막!

block은 면! 즉, 한 영역을 차지하고 있기 때문에 기본적으로 width 값이 100%가 된다.
그러므로 width, height, margin, padding을 지정할 수 있다.

inline? 흐름!

inline은 block과 반대로 width값이 100%가 아닌 컨텐츠 영역만큼 지정된다.
그러므로 width,heigh을 명시 할 수 없고 margin을 위아래로 적용할 수 없다.

inline-block? 길막 && 흐름

block && inline! block과 inline의 특징을 모두 가진다. block처럼 width와 height을 지정할 수 있는 요소이다. 물론 width와 height을 지정하지 않으면 기존 inline과 같이 컨텐츠 만큼 영역이 잡히는 걸 확인할 수 있다.

Float? 집나간 자식!

float 속성을 사용해 왼쪽 또는 오른쪽으로 화면 배치를 유연하게 할 수 있다.
float된 요소는 부모 요소에서 자식으로 취급하지 않고 집나간 자식으로 취급한다.

left: 요소를 왼쪽 방향으로 부유하게 설정
right: 요소를 오른쪽 방향으로 부유하게 설정
none: default

• float으로 레이아웃을 잡은 후 영역깨짐이 발생할 때 해결방법으로 Clearfix가 있다.

1. 가상요소 ::after 사용
   가상 요소(Peudo-elements)는 가상의 요소를 만들고 출력하겠다는 뜻이다. ::after, ::before가 대표적이다.

.clearfix::after {
	content:'';
	display:block;
    	clear:both;
    	}

이 코드를 보면 빈 블락을 만들고, float:left, float:right을 초기화 시킨다는 뜻이다. 만약 코드를 clear:left면 float:left를 초기화 한다는 뜻이고, clear:right을 쓰면 float:right을 초기화 한다는 뜻이다.

2. overflow
   float을 가진 부모 요소에 overflow:hidden을 적용시켜준다.
   하지만 넘치는 부분이 잘리기 때문에 1번 가상요소를 사용하는 것을 권장!