2022년 5월 2일

Daisy🌼·2022년 5월 2일
TIL
0

CSS의 다양한 개념 중 박스모델과 셀렉터(선택자)를 위주로 학습했다. 사실 CSS에 자신이 없었는데, 쉬운 개념은 한 없이 쉬워보이고 좀만 더 파고들면 어렵지만 그렇다고 시간을 많이 투자하기에는 아깝다고 생각해서 그런 것 같다. 그래서 이번 기회에 미뤄둔 CSS를 복습할 수 있어서 좋았다. 하지만 여전히 공부할 게 많다.😅

오늘 학습한 내용 중 떠오르는 단어

  • 절대 단위, px, 상대 단위, %, rem, em, vw, vh

  • 박스 모델, inline 요소, block 요소, inline-block, content-box, box-sizing: border-box, overflow

  • (필요에 의해 자의적으로 분류했습니다.) 기본 셀렉터, attribute 셀렉터, 자식/후손/형제 셀렉터(또는 결합자), 가상 클래스 셀렉터, 가상 요소 셀렉터

단어를 조합해 오늘 배운 내용 설명

절대 단위

  • 글자의 크기, 화면의 크기 등 CSS를 사용할 때 다양한 컨텐츠의 크기를 고려해야하는 경우가 많다.

  • CSS에서 글자 크기, 너비, 높이와 같은 값을 나타내는 단위에는 절대 단위와 상대 단위가 있다.

  • 절대 단위는 기기나 브라우저의 크기에 영향을 받지 않는 고정된 단위다. 대표적으로 px(픽셀)이 있다.

  • px는 화면의 해상도를 나타내는 단위다. 즉 1px은 화면의 픽셀 1개만큼을 차지하는 크기이다.

  • px은 고정된 값이기 때문에 한 번 지정하면 사이즈가 변하지 않는다. 따라서 절대 단위 px는 사용자의 필요에 따라 값을 변경할 수 없기 때문에 반응형 웹에 적합하지 않다.

상대 단위

  • 상대 단위는 이러한 절대 단위와 달리 사용자의 기기 또는 브라우저 크기에 따라서 크기가 다르게 보여지는 단위를 의미힌다.

  • CSS에는 다양한 상대단위가 존재한다. %, rem, em, vw, vh 등이 있다.

  • %는 요소가 화면 상에서 차지하는 비율을 백분율로 나타낸 것이다.

  • em은 상위 요소의 크기를 기준으로 배수가 되는 상대 단위다. (정확한 full name을 찾을 수 없었다.🥲)

  • 상속받는 상위 요소의 크기에 따라 em의 값이 달라질 수 있으므로 의도하지 않은 크기 변경이 일어날 수 있다.

  • em 값이 상위 요소에 따라 변경되는 것을 보완하는 상대 단위가 rem이다.

  • rem의 r은 root, 최상위 루트 요소를 의미한다.

  • rem은 HTML 문서의 글자 즉 최상위 요소의 사이즈를 기준으로 배수가 되는 상대 단위다.(예를 들어 HTML 문서 글자 크기가 14px일 때, 1.2rem은 14 * 1.2 = 16.8px이 된다. (1rem = 14px))

  • 편의를 위해 단위 rem (1rem)을 10px로 지정해서 사용하는 방법도 있다.

  • 일반적으로 HTML 문서의 기본 글자 크기는 16 픽셀로 지정되는데, font-size를 62.5%로 지정하면 10픽셀이 된다.(16 * 0.625 = 10)

  • 따라서 rem을 사용할 때 1 em = 10px로 단위를 지정하고 계산하면 편리하다고 한다.(출처: 웹 디자인에 px 단위를 쓰면 안 되는 이유(번역본))

  • vw, vh는 각각 viewport width와 viewport height를 의미한다.

  • viewport는 화면에서 보이는 영역을 의미한다.

  • viewport를 사용하면 디바이스마다 가지고 있는 특성과 화면 크기 등을 고려하여 기기 별 화면에 최적화된 웹페이지를 제공할 수 있다.

개인적으로, CSS는 실습으로 익히는 것이 더 중요하다고 생각합니다. 그래서 아래 CSS 단위와 반응형 웹을 학습할 수 있는 유튜브 강의 영상을 링크합니다. 저 또한 이론보다는 실습을 통해 익숙해지려고 합니다.😊

📚 참고자료

profile
Daisy🌼
커피와 재즈를 좋아하는 코린이 | 좋은 글 좋은 코드를 쓰고 싶습니다
이전 포스트

2022년 5월 1일

다음 포스트

2022년 5월 3일

0개의 댓글

관련 채용 정보