TIL no.16 - CSS -

codeamor·2020년 7월 20일

CSS

목록 보기

4/4

✔ Position 속성

fixed를 이용한 상단 헤더 고정
: position이 absolute이거나 fixed가 되면 주변의 요소에 상관없이 위치하게 된다.
그래서 해당 영역이 무의미해지면서 다른 요소들과 겹치게 된다.

✔ inline VS block

block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.

대부분의 HTML element(이하 요소)는 block 요소이다.
header, footer, p, li, table, div, h1 등이 있다.

inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.

span, a, img 태그 등이 inline 요소이다.

이러한 속성은 css 속성을 통해 쉽게 변환시킬 수 있다.
inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.

.inline-p {
  display: inline-block;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소이다.

줄바꿈이 이루어지지 않는다.
block처럼 width와 height를 지정 할 수 있다.
만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.

✔ float 속성

오늘 float 때문에 조금 애먹었다.
요소를 나란히 배치하기 위해 float을 쓰는데
사실 요새는 간편한 flex가 떠오르는 추세다.
시니어 개발자에게 들은 바
그럼에도 불구하고 다소 불편한 float을 쓰는 이유는
IE 11 이전 브라우저 사용자들이 아직은 완전히 무시할 수 없는 시장 점유율을 가지고 있기 때문이다.
인터넷 사용자 5~10% 가량을 포기할 수 있다면 flex를 쓰라고 하지만
개발자들 입장에서 그러기는 쉽지 않을 것이다.
규모가 큰 서비스 일수록 더더욱.
CSS에는 이처럼 브라우저 지원에 민감한 속성들이 조금 있어서 더 까다롭다.

3.1. float 속성이 설정된 요소의 특징

float 스타일 속성이 적용된 요소는 컨테이닝 블록 안쪽의 왼쪽 또는 오른쪽에 배치된다.
float 스타일 속성이 적용된 요소는 문서의 일반적인 흐름에서 제거되므로 부모 요소의 컨텐츠로 인식되지 않는다.
- 모든 자식 요소들에 float 스타일 속성이 설정되면, 부모 요소의 컨텐츠가 없어진다.
다른 컨텐츠는 float 스타일 속성이 적용된 요소의 영역을 피해서 배치된다.
컨테이닝 블록은 그 요소와 가장 가까운 block 레벨 조상 요소의 컨텐트 영역을 말한다

3.2. float 속성을 적용했을 때의 문제점

부모 요소 내의 모든 요소가 '부유하는 요소'가 된 경우
- 부모 요소 내에 아무런 내용이 없기 때문에 콘텐트 영역이 없다.

'부유하는 요소' 다음에 다른 요소가 따라올 때의 문제점
- '부유하는 요소'로 인해 다음에 나오는 요소가 가려진다.
- 다음에 나오는 요소의 콘텐츠가 밀린다.

3.3. float 속성을 적용했을 때의 문제점 해결

'부유하는 요소'를 담고 있는 부모 요소의 높이 고정
'부유하는 요소'를 담고 있는 부모 요소에 float 속성 적용
- { float: left; }
'부유하는 요소'를 담고 있는 부모 요소에 overflow 속성 적용
- { overflow: hidden; }
'부유하는 요소' 다음에 clear 속성을 갖는 빈 요소 추가
'부유하는 요소'를 담고 있는 부모 요소에 after 가상 선택자를 사용해 clear 속성 적용

/*
- 가상 요소는 인라인 형식의 요소이다.
- 블록 형식의 요소가 필요하므로 display: block 을 준다.
- clear 속성으로 인해 가상 요소는 float 속성이 적용된 요소 아래로 떨어지게 된다.
- 이로 인해 부모 요소는 float 속성이 적용된 요소와 가상 요소를 포함하는 영역을
  차지하게 된다.
*/
 
#container::after { content: ""; display: block; clear: both; }

3.3.1. clear 속성

: 요소의 어느 쪽에 부유하는 요소가 오지 못하게 할 것인지 지정

속성 값	설명
none	요소의 양쪽에 부유하는 요소가 올 수 있도록 허용(기본값)
left	요소의 왼쪽에 부유하는 요소가 오지 못하도록 설정
right	요소의 오른쪽에 부유하는 요소가 오지 못하도록 설정
both	요소의 양쪽에 부유하는 요소가 오지 못하도록 설정

codeamor

이전 포스트