CSS
웹을 스타일링하기 위한 언어입니다.
프런트 엔드의 역할은 직관적이고 사용하기 쉬운 사용자 인터페이스(UI)를 만들어 더 나은 사용자 경험(UX)을 제공하는 것입니다. HTML로 구조화된 웹 페이지는 보다 쉽게 사용하고 볼 수 있도록 CSS로 스타일을 지정할 수 있습니다.
절대 및 상대 단위
절대 단위(px, pt 등)
센티미터(cm)와 마찬가지로 1px는 절대값입니다. 과거에는 절대 단위인 px가 더 자주 사용되었지만 이제 상대 단위를 사용해야 합니다. 1px는 고해상도 디스플레이에서 단일 지점보다 크므로 정확하게 스타일을 지정할 수 없으며 절대값이므로 스마트 기기 화면 및 노트북과 같은 모든 크기의 브라우저에 맞게 변경할 수 없습니다.
상대 단위(%, em, rem, ch, vh, vw 등)
렘을 사용하는 것이 좋습니다. rem은 브라우저의 기본 글꼴과 루트 기호의 글꼴 크기를 기준으로 사용되는 단위로 각각 1rem, 2rem, 0.5rem 크기의 두 배 또는 절반 크기를 의미합니다. Em은 부모 요소의 크기를 기준으로 한 상대적인 단위이지만 rem은 요소별로 계산하기가 복잡할 수 있으므로 편리합니다.
검토
CSS 선택자는 어렵습니다. 35개의 질문이 있는 퀴즈로 그 중 28개가 정답이었습니다. 나는 여전히 잘못된 질문에 혼란스러워합니다. 특히 자손/자손 선택자에 대해 혼란스럽습니다.
오늘의 과제는 CSS 스타일을 소개하는 것입니다. display:flex를 사용하면 소셜 버튼을 수직으로 중앙에 배치하고 목록의 텍스트를 깔끔하게 중앙에 배치할 수 있지만 text-align:center를 사용할 때 가장 좋습니다. 내일 더 많은 CSS를 배우면 개선할 수 있습니다. 예전에 생방송에서 힌트를 얻었는데, 소셜버튼의 높이와 줄높이를 같은 값으로 통일하면 세로로 중앙에 위치하게 됩니다!