TIL 25 | CSS position, inline/block, float/clear 복습

✔ CSS replit에서 레이아웃 구성중, 요소 배치에 필히 사용되는 속성값들을 정리해보았다.

position

1. position - static

• static은 모든 요소의 기본 position 상태이다. (default 느낌)

2. position - relative

✔ position: relative 속성 부여 후, top: 20px, left: 20px을 통해 움직였다.

• position : relative 속성값을 부여할 시, 위 그림처럼 본래 자기 자신의 자리를 기준으로 이동하게 된다.

• relative 속성값으로 인해 레이아웃이 무너지지는 않는다.

3. position - absolute

✔ 기준이 되는 부모에게 position: relative 부여, 이동하고자 하는 요소에 absolute 속성 값을 부여후 right: 0, bottom: 0를 통해 빨간색 child 상자를 오른쪽 끝 아래로 움직일 수 있었다.

• relative와 다르게 이동 기준점은 자기 자신이 아닌, position: static이 아닌 부모 요소이다. (일반적으로 부모 요소에게 relative 속성값을 부여함)

• 기준점의 선정이 자유롭기 때문에 움직임의 제한이 없다. (어디든지 배치할 수 있다!!)

4. position - fixed

✔ position: fixed 속성값을 부여한 후 top: 0을 통해 스크린 최상단에 해당 요소를 위치시킬 수 있었다.

• position: fixed의 이동 기준점 (배치 기준)은 viewport, 즉 웹의 전체 영역이다.

• 해당 요소를 특정 영역에 고정시키고자 할 때 사용한다.

display

해당 내용은 사전스터디 CSS Inline, Block, Inline-block 에 정리했기에, 추가로 정리하지 않고 내용 정리 및 복습만 진행했다.

float에 대해서 (float, clear)

1. float - left / right

✔ 첫 번째 child(빨간색)에 float: right, float: left, 순으로 적용했더니 위와 같은 결과가 나왔다.

• float 속성은 이미지 주위에 텍스트 파일을 감싸기 위해 사용되었다. 즉 텍스트, 이미지 등 컨텐츠들간 블록처럼 구분되는 것이 아닌, 자연스럽게 섞임을 위한 속성값인데 float: left 를 적용했을 때(가장 오른쪽) 처럼 레이아웃이 깨지는 경우가 있다.

• 이러한 이유는, float 속성값이 부여된 요소는 부모 요소 밖으로 나가버리기 때문이다. (즉 부모 요소에서 자식 요소를 인식하지 못하게 됨, 속성 이름처럼 붕 뜨는 느낌!)

✔ 실제로 개발자 도구를 통해서 확인해본 결과, 첫번째 child(빨간색)에게 float 속성값을 부여했을 때, 부모 요소의 height에서 자식 요소의 height 만큼의 200px값이 빠지는 것을 확인할 수 있다.

• 위처럼 레이아웃의 망가짐을 방지하고자 overflow: hidden, pseudo element - clear fix 활용 방법이 있다.

2. overflow - hidden

.parent {  /* 부모 요소에 overflow 속성 적용*/
overflow: hidden;
}

• overflow:hidden 속성값 부여를 통해서, tag - clear, 혹은 pseudo element - clear보다 간단하게 레이아웃을 바로 잡을 수 있다.

3. clear (tag, pseudo element)

.parent::after {  /* 부모 요소의 after 가상 요소를 사용한다.*/
  content: '';
  display: block;
  clear: both;
}

✔ 추가로 불필요한 태그의 삽입이 아닌, 부모 요소에게 가상 요소 (::after)를 부여하여 레이아웃이 망가짐을 방지하였다. (clear 는 오로지 float 에 의해 망가진 레이아웃을 고치기 위한 속성이다.)

• 해당 요소가 존재하는 부모 요소 안 가장 마지막에 태그를 추가한 후 clear: left or right or both 속성값을 부여한다. 하지만 이 방법은, 결과적으로 사용하지 않는 태그를 넣는 것이기 때문에 html markup시 권장되지 않으며, 대신 css 자체에서 해결할 수 있도록 pseudo element 를 사용하는 것이 좋다.

• clear는 display: block인 요소에만 적용되기 때문에 반드시 가상 요소의 display: block을 지정해주어야아 한다.