TIL no.16 - CSS -

codeamor·2020년 7월 20일
0

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요소의 양쪽에 부유하는 요소가 오지 못하도록 설정

0개의 댓글