[TIL] CSS 레이아웃, 선택자

✍ Today I Learned

• <img> 태그는 inline 속성, <div> 태그는 block 속성이다. 이미지 불러올 때 항상 유의할 것!
• CSS class의 변수화 - 각 기능마다 class를 줘서 재사용성 증가!
• float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면, 해당 요소의 일부가 밖으로 흘러넘치게 된다. 이때 overflow 속성값을 auto로 설정하면, 컨테이너 요소의 크기가 자동으로 내부의 요소를 감쌀 수 있을 만큼 커지게 된다.
• 모든 태그에 class를 주기보다 :nth-child() 등 선택자를 잘 활용하자.
• 웹폰트는 임포트 하는 것보다 직접 다운로드하는 게 더 안전하다.
• box-sizing: border-box; 로 설정하면 내가 설정한 width값이 실제 값이 된다. (참고자료)
• 전체 선택자 *(asterisk)는 html 페이지 내의 모든 요소를 선택한다.
• ::before를 이용하면 콘텐츠 앞에 삽입, ::after를 이용하면 콘텐츠 뒤에 삽입
• ::selection을 이용하면 텍스트를 블록 잡았을 때를 꾸며줄 수 있다.
• 역시 개념만 익히는 것보다 많이 만들어 보는 게 훨씬 재밌다😋