[TIL] 20210906

🎯 오늘 공부한 것

• [CSS] Float
  • float 요소를 적용한 요소는 float을 적용하지 않은 요소와 형제 요소로 두면 안된다.
  • float이라는 속성이 부여되어 있다면 요소의 display 속성은 block 요소로 자동으로 바뀌고, 임의로 inline 요소로 바꿀 수 없다. flex, grid 요소는 예외적으로 block 요소로 바뀌지 않는다.

 

• [CSS] Position
  • 조상 요소 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 기준으로 삼는다.
  • position 속성이 absolute 혹은 fixed 인 경우, 그 요소의 display 속성 값은 block이 된다. (너비와 높이 값을 가질 수 있는 상태가 된다)

 

• [CSS] 쌓임 맥락(Stacking Context)
  • transform이나 opacity를 사용(1보다 작을 때)하면 요소를 더 위에 쌓을 수 있다.
  • z-index 는 동작할 수 있는 환경이 정해져 있다.
    • position 속성에 static 을 제외한 relative, absolute, fixed, sticky 의 값이 있어야 한다.
    • z-index 기본값은 auto → 조상으로부터 물려받은 게 없다면 0과 동일
    • flex의 컨테이너 자식이나 grid의 컨테이너 자식 요소에도 사용할 수 있음

 

• [CSS] Flex, Grid [공부한 내용 정리]

 

---

📚 더 공부해야 할 것

• BEM(Block Element Modifier)
• 10진수를 16진수로 변환하는 방법

 

---

🎇 Reflection

• 나름 CSS는 열심히 공부했다고 생각했는데 아직도 모르는 게 많은 것 같다. CSS 너마저... 정말 쉽지 않다... grid랑 flex 개념 정리가 잘 안 된 느낌이었는데 이번에 정리하면서 개념이 좀 더 뚜렷해진 느낌이다.
• 원래는 이벤트 버블링, 캡쳐링, 위임에 대해 정리해보려고 했는데 CSS 심화 강의만 들었는데 하루가 끝났다... 내일은 아침에 시간 있으니까 꼭 코드 리뷰하고.. 내일치 강의 듣고도 시간 남으면 정리해봐야겠다.
• javascript 입문자를 위한 25가지 미니 프로젝트를 구현해보는 스터디에 참여하기로 했다. 아직도 빈 화면을 보면 어떻게 시작해야할지 막막한 기분부터 드는데... 1번 프로젝트는 10진수를 16진수로 변환하는 것만 잘하면 금방 할 수도 있을 것 같다?! (과연)