CSS(Cascading style sheets): HTML과 같은 마크업 언어가 표시되는 방법을 기술하는 스타일 언어
HTML로 구조를 만들고 내용을 작성했으면 이제 CSS로 디자인 요소를 가미해 보자.
● CSS 구성 요소: 선택자, 속성, 값
→ 특정 선택자의 속성(폰트, 색, 크기 등)에 어떤 값을 줄 지 설정하는 것
● CSS는 HTML 파일 안에 적용할 수도 있고, CSS 확장자 파일을 만들어서 HTML 안에 링크를 넣어 적용할 수도 있다.
- HTML 파일에 직접 적용할 땐 <head> 하위에 <style>로 열어서 작성한다. </style>로 닫아주는 것 꼭 잊지 말기.
- <body> 안의 요소에 직접 넣을 수도 있다 → <h1 style="color:green;">Hello, world!</h1>
- CSS 파일 링크를 넣을 땐 <head> 하위에 <link rel="stylesheets" href="style.css">를 넣어준다. rel(relationship)은 현재 파일과의 관계를 말한다. 디자인 요소를 적용하는 stylesheets(스타일시트)임을 명시해 주면 된다. href(hypertext reference)에는 "폴더 위치/파일명.css"를 넣는다. 동일 폴더에 있는 경우 파일 이름만 넣는다.
위의 파일은 다음과 같이 실행된다.
CSS 굿이다. 디자인이 가미되니 훨씬 예뻐졌다.
위에서 <h1>요소 선택자와 <p> 요소 선택자의 색상을 변경해 주었다. 선택자는 종류가 몇 가지 있는데 한 번 살펴보도록 하자.
● 선택자 종류
- 요소 선택자: <p>, <h1>와 같은 요소의 이름을 사용하여 스타일을 변경한다.
- 클래스 선택자: 여러 요소를 한번에 선택하기 위해 클래스를 준다. 바디에 다음과 같이 클래스와 함께 써 주고 <h1 class="hello">Hello, world!</h1>, 헤드 - 스타일에서는 다음과 같이 써 준다. ↓↓
이렇게 클래스를 지정하면 다른 <p>문단에도 해당 클래스를 지정할 수 있어 여러 요소의 스타일을 한번에 바꿀 수 있어 편리하다.
- 아이디 선택자: 말그대로 id를 설정해 주는 것! 아이디는 클래스와 달리 한 번만 사용할 수 있다. 바디에 다음과 같이 써 주고 <p id="hellp">Hello, world!</p>, 헤드 - 스타일에서는 다음과 같이 써 준다. ↓↓
HTML 요소들은 가족(?)을 구성하고 있다. 하나의 요소 안에 들어가 있는 모든 요소는 자손 선택자이고, 하나의 요소 바로 아래에 위치한 하위 요소는 자식 선택자이다. 그리고 부모 요소가 같은 요소들은 형제 선택자이다. 이 또한 스타일을 주기 위한 편의성을 가지는 선택자이다. ※스타일 변경이 적용되는 건 오른쪽에 위치한 선택자이다.
- 자손 선택자를 선택하고 싶을 때 헤드 - 스타일에 다음과 같이 입력한다. 요소 자손 선택자{color: green;} 참고로 자손은 자식과 손자를 모두 포함한다.
- 자식 선택자를 선택하고 싶을 때 헤드 - 스타일에 다음과 같이 입력한다. 부모요소 > 자식 선택자{color: green}
- 형제 선택자를 선택하고 싶을 때 헤드 - 스타일에 다음과 같이 입력한다. 형제 + 형제{color: green}
다음은 부모 요소인 <div>와 <div> 하위에 구성된 자식 선택자인 <h1>의 관계를 이용하여 <h1>에 green color를 적용한 것이다. ※<div>는 영역을 지정하는 태그이다.
스타일은 글자의 색상(color), 크기(font-size), 굵기(font-weight) 등에 변화를 줄 수 있다. 주의할 점으로는 지정한 폰트가 사용자 컴퓨터 안에 설치되어 있지 않으면 제대로 표시되지 않는다는 것이다. 이것을 방지하기 위한 방법으로 대체 폰트를 설정하는 방법, 웹 폰트를 쓰는 방법이 있다.
● font-family를 사용하여 대체 폰트 지정하기
● 구글 웹 폰트: https://fonts.google.com/
복습하면서 보니 더 재밌게 느껴진다.
다음 포스팅에서는 매우매우 중요한 박스모델을 공부해 보겠다.
'MS AI School' 카테고리의 다른 글
| DAY 5 - 자바스크립트 기초(데이터 유형, 함수, HTML에서 작성하기) (0) | 2022.10.13 |
|---|---|
| DAY 4 - CSS 심화 공부(레이아웃, 반응형) (0) | 2022.10.11 |
| DAY 3 - CSS기초 박스모델 공부 (0) | 2022.10.11 |
| Day 1 - HTML을 배워보자 (0) | 2022.10.09 |
| DAY 0 - Hello, world! 개발자 마인드, CS 기초 (0) | 2022.10.05 |