- CSS의 사용 목적을 이해한다.
- CSS의 기본 문법과 구조를 이해한다.
- CSS를 HTML에 적용하는 방법에 대해서 이해한다.
- HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다.
- CSS를 이용해 텍스트를 꾸밀 수 있다.
- CSS에서 쓰이는 단위의 두 가지 구분을 이해한다.
- 각 단위가 적합한 경우를 구분할 수 있다.
- MDN 또는 W3School 등의 레퍼런스 사이트를 이용해 CSS 속성을 검색하고 사용할 수 있다.
HTML이 웹 페이지의 구조🏠를 담당한다면, CSS는 HTML로 구성한 구조의 외부와 내부를 꾸미는👕역할을 담당!
⭐CSS (Cascading Style Sheets)⭐
: 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어.
-
더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하는 것!
-
웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역할
-
개발자는 CSS로 사용자 인터페이스(user interface)를 만든다.
⭐사용자 인터페이스(UI; user interface)
컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스가 바로 사용자 인터페이스, UI이다. (검은 화면에 흰 암호같은 코드(CLI; Commend Line Interface)가 아니라 버튼, 아이콘 등을 클릭하면 작동하는 것!)
👽즉, 일반 사용자는 UI 없이는 애플리케이션과 소통이 불가능👽(이들에게는 CLI는 외계어와 같을 것이다! UI는 매우 중요)좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다.
직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양
🚨주의🚨: CSS는 심미적인 화려함 뿐 아니라, 더 나은 사용자 경험(UX, user experience) 을 주기 위한 콘텐츠 배치와 타이포그래피 등을 적용하기 위해 사용하는 것이다.
⭐CSS 내용 분해하기
⭐CSS 파일 추가
CSS 파일을 HTML 파일에 연결할 때는, <link> 태그 안에서 href 속성을 통해 파일을 연결
<link rel="stylesheet" href="index.css" />
<link>: HTML 파일과 다른 파일을 연결- rel 은 연결하고자 하는 파일의 역할이나 특징을 나타냄
- href 속성에는 파일의 위치 (절대, 상대 구분)
💫CSS 스타일을 적용할 수 있는 방법은 3가지
1. 같은 줄에서 스타일을 적용하는 인라인 스타일
2. <style> 요소 내에 작성하는 내부 스타일 시트
3. 외부 스타일 시트
⭐기본적인 셀렉터 (selector)
1. id로 이름 붙여서 스타일링 적용하기
<h4 id="navigation-title">navigation section.</h4>
위와 같이 id를 붙여서,
#navigation-title { color: red; }
id로 요소를 선택해서 스타일링한다.
🚨주의🚨: id는 문서 내에 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 함!
➡ 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서는 class를 사용
2. class로 스타일을 분류하여 적용하기
- class는 #이 아닌 .을 이용해 선택
- 여러 class를 하나의 요소에 적용하기 위해서는, 띄어쓰기로 적용하려는 class들의 이름을 구분
| id | class |
|---|---|
| #으로 선택 | .으로 선택 |
| 한 문서에 단 하나의 요소에만 적용 | 동일한 값을 갖는 요소 많음 |
| 특정 요소에 이름을 붙이는 데 사용 | 스타일의 분류(classification)에 사용 |
⭐색상
.box{ color: #155724; /* 글자 색상 */ background-color: #d4edda; /* 배경 색상 */ border-color: #c3e6cb; /* 테두리 색상 */ }
⭐글꼴 & 글자 크기
-
글꼴의 속성은 font-family
-
fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책.
fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력. 입력된 순서대로 fallback이 적용된다. -
BUT! 내가 설정한 글꼴이 사용자의 컴퓨터에 안깔려 있을 확률 높음 ➡ 구글 웹폰트를 사용하자.
-
글자의 크기를 변경하기 위해서는 font-size
⭐기타 스타일링
- 굵기: font-weight
- 밑줄, 가로줄: text-decoration
- 자간: letter-spacing
- 행간: line-height
⭐알아야 할 몇 가지 단위
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
반응형 웹을 만들 때...
- 글꼴의 크기 단위로는, 상대 단위인 rem을 추천
- 가로, 세로는 vw(viewport width), vh(viewport height) 사용하기.
(viewport = 웹사이트의 보이는 영역)
