CSS - 레이아웃, Selector: 화면 설계의 기본 학습 목표 * 다양한 CSS 셀렉터 규칙 이해 - 후손 셀렉터와 자식 셀렉터의 차이 * 레이아웃을 위한 HTML 작성 * Flexbox를 이용한 레이아웃 작성 - 방향: flex-direction - 늘리기: flex-grow - 크기 차지: flex-basis - 수평 정렬: justify-content - 수직 정렬: align-items Checkpoint – CSS Selector 일반 셀렉터 h1 { } // “모든” h1을 선택 div { } // 모든 div 를 선택 등전체 셀렉터 모든 엘리먼트를 선택(전체가 아닌 모든) * { } tag 셀렉터 ,(쉼표)는 다중으로 선택한다 section, h1 { } // section과 h1을 다..

텍스트 꾸미기 색상(color) hex코드 또는 주요 색상의 이름을 사용 가능 글꼴(font-family) 글꼴 이름은 “ “(따옴표)를 붙여서 적용 글꼴이 없거나 지원하지 않는 경우를 대비하여 여러 글꼴 추가 가능(fallback 글꼴) → ,(쉼표)를 구분자로 사용. 입력 순서대로 fallback이 적용됨 ex) .emphasize { font-family: "SF Pro KR", "MalgunGothic", "Verdana"; } 보다 다양한 글꼴을 사용하고 싶은 경우? “웹 폰트 기술” 이용 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술 Google Fonts 서비스 이용 HTML의 link태그를 사용하여 간단하게 embed 가능 크기..

ch – CSS 기초 CSS는 Cascading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정 → CSS는 구조의 외부와 내부를 꾸미는 역할 학습 목표CSS의 사용목적 이해 프론트엔드 개발자의 기초소양 CSS의 기본문법과 구조 → 직접 html 안에 css를 정의하는 것을 권장하지 않는 것을 이해 id 및 class와 관련된 selector 규칙 CSS에서 쓰이는 단위(2가지 구분) → 각 단위가 적합한 경우를 구분 CSS 박스 모델 → width, height → margin, padding, border → 박스 크기를 측정하는 2가지 기준의 차이 이해 MDN, w3school 같은 레퍼런스 사이트를 통한 검색과 이용법 CSS 소개 CSS는 스타일링을 위한 도구 ..