프로그래머스 데브코스 TIL - Day 29

 

✅ 오늘의 학습

📌 CSS 심화 (1)

- float

- position

- 쌓임맥락

- flex

 

---

float

요소가 원래의 흐름으로부터 빠져나와서 텍스트와 인라인 요소와 함께
배치할 수 있게 해주는 속성이다.

 

- 자식 요소에 float를 사용하면 부모요소의 높이가 사라져버린다.

* float가 끝났음을 알려주기 위해 해제(clear) 시켜주어야 한다.

 

- float 속성을 부여하면 자동으로 block 요소로 변경된다.

 

float 해제 방법

 

- 부모에 overflow 속성 사용

overflow: hidden;

 

 

- 마지막 자식 요소에 clear속성 적용

.container .item:nth-child(4){
  clear: left;
}

 

- 부모요소에 clearfix 적용

* 가장 적합한 방식

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

 

position

- absolute는 가장 가까운 조상 요소의 position:relative;를 기준으로 배치된다.

* 부모, 조상에 position값이 없을 경우 window 객체의 viewport를 기준점으로삼는다.

 

- position:fixed는 viewport를 기준으로 삼는다.

* 요소의 조상 중 하나가 transform, prespective, filter 속성을 사용하면

기준이 viewport에서 해당 속성을 사용한 부모요소로 변경된다.

 

- position absolute, fixed의 경우 자동으로 block 요소로 변경된다.

 

 

쌓임맥락

z축을 사용한 HTML요소의 3차원 개념

 

position + z-index로만 쌓임맥락을 조절했었는데 다양한 방법으로 쌓임맥락을 형성할 수 있다.

* flexbox와 grid의 자식들 중에서도 z-index를 사용할 수 있다.

 

z-index는 쌓임맥락이 형성된 요소에서만 사용할 수 있는데

flexbox와 grid의 자식들 중에서도 z-index를 사용할 수 있다. 

쌓임 맥락을 형성하는 조건들은 공식문서에서 확인할 수 있다.

 

 

flex

flex에 대한 강의 내용에서 놓치고 있었던 부분과

이전에 올린 flex관련 포스팅의 내용을 다시 정리해서 수정할 예정이다..

 

 

---

✍ 느낀 점

 

css를 처음 배울 때 float를 배웠었는데 flex를 사용하게되면서

사용을 거의 안하게 되다 보니 기억 저편에 있었는데 다시 한번 상기 시켜주었던 강의였다.

쌓임맥락을 형성하는 조건들이나 position의 기준을 변경하는 속성들을 보면서

몰랐던 CSS속성들이 이렇게나 많구나 라는 생각을 하게되었다.

조금씩 몰랐던 부분을 알게되다보니, 이전엔 지루하게만 느꼈던 CSS가 재밌어 질 것 같아서 기대된다!!