CSS3

🔍 CSS ✔ CSS 문법 구성 👀 CSS로 기본적인 스타일링하기 ✔ CSS 스타일 적용 방법

👀 Id , Class Seletor ✔ id로 이름 붙여서 스타일링 적용 ✔ class로 스타일을 분류하여 적용 🔗 셀렉터, id와 class 차이점

👀 CSS를 이용해 텍스트 꾸미기 ✔ 색상 ✔ 글꼴 ✔ 크기 기타 ✔ 정렬

👀 절대 단위와 상대 단위 ✔ 글꼴 사이즈 ✔ 화면 사이즈

👀 박스모델 ✔ 줄 바꿈이 되는 박스 vs 옆으로 붙는 박스 🔗 Block vs Inline-block vs Inline 박스 비교

👀 박스를 구성하는 요소 ✔ 1. Border (테두리) ✔ 2. Margin (바깥 여백) ✔ 3. Padding (안쪽 여백) ✔ 4. Contents ✔ 박스를 벗어나는 콘텐츠 처리

👀 박스 크기 측정 기준 ✔ 1. Content-box ✔ 2. Border-box

🔍 CSS Selector 👀 기본 셀렉터 ✔ 전체 셀렉터 ✔ 태그 셀렉터(그룹 셀렉터) ✔ id 셀렉터 ✔ class 셀렉터 ✔ attribute 셀렉터 👀 자식/후손/형제 셀렉터 ✔ 자식 셀렉터 ✔ 후손 셀렉터 ✔ 형제 셀렉터 ✔ 인접 형제 셀렉터 👀 기타

🔍 Layout 와이어프레임(Wireframe) 목업(Mock-Up) 👀 화면을 나누는 방법 🔍 Flexbox(CSS) 👀 부모 요소에 적용해야하는 Flexbox 속성 ✔ display: flex 1. flex-direction: 2. flex-wrap:

CSS Diner

Flexbox Froggy 정답