1. CSS 파일 만들기
VS Code에서 파일을 추가한 다음 '파일명.CSS'라고 입력해주면 CSS 파일을 만들 수 있다.
이후 html 파일 <head> 태그 내에 <link rel="stylesheet" href="파일명.CSS">를 입력해주면 앞서 만든 CSS 파일과 기존 html파일을 연결할 수 있다. 이때, rel="stylesheet"는 CSS파일과 HTML 파일 사이의 관계(relationship)이 stylesheet(CSS가 HTML 파일의 스타일을 나타낸다.)라는 것을 의미한다.
2. 태그 선택자
우리는 원하는 스타일을 웹사이트의 원하는 부분에 적용시켜야한다. 즉, 알맞은 CSS 언어를 원하는 HTML 파일 부분과 연결시켜주어야한다. 이때, 우리가 HTML에서 사용했던 '태그'를 이용한다.
내가 만든 HTML 코드를 실행시켜보면 다음과 같은 웹사이트 화면이 나온다.
만약, '자기소개, 취미생활, 소속'이라고 적혀있는 글씨의 색을 바꾸려한다고 가정하자.
이 글자들은 모두 h2태그로 사용되어있으므로 'h2 태그로 되어있는 글자들을 모두 색 ff8888로 바꾼다.' 라고 CSS에서 설정해주면 된다.
다음과 같이 선택자(태그)를 앞에 써준 뒤, 중괄호 { }를 이용해 묶어준 다음, 그 안에 속성과 속성값을 적어준다.
- 선택자: 어디에 적용할 것인가. 여기에서는 태그 이름(h2)가 선택자에 해당.
- 선언: 어떤 스타일을 적용할 것인가. 속성과 속성값으로 이루어짐.
- 속성: 바꾸고자하는 것. color가 속성에 해당하는데 이는 글자색을 의미한다.
- 속성값: 구체적으로 어떻게 바꿀 것인가? #ff8888(특정 색깔을 의미)가 속성값에 해당.
3. id(아이디)와 class(클래스)
하나의 HTML 파일에 h2태그, p태그가 여러번 사용되는데 그 중 몇개만 골라서 스타일을 적용시키고싶다면 사용할 수 있는 것이 id와 class이다. id와 class의 이름은 자유롭게 설정할 수 있으며, 태그 안에 id="아이디명" 혹은 class="클래스명" 이라고 넣어줘서 설정할 수 있다.
이 때, id는 요소 하나만 사용 가능하고(중복할 수 없고), class는 중복해서 쓸 수 있다.
id와 class를 CSS에서 이용하는 방법은 다음과 같다.
id의 경우 선택자로 #아이디명 을 적어주면 되고, class의 경우 선택자로 .클래스명 을 적어주면 된다.
위의 CSS 파일에서는 id가 introduction인 '자기소개'부분에 아쿠아색 배경을 깔아주었고, details를 클래스명으로 가지는 부분에 밑줄을 그어주었다.
'어찌저찌 코딩생활' 카테고리의 다른 글
| [CSS] 여러가지 속성, 속성값 / 폰트 설정, 배경 설정 (0) | 2023.12.04 |
|---|---|
| [CSS] 폰트 적용하기, 색상을 나타내는 법 (0) | 2023.12.04 |
| [HTML] 특수문자 표기, 블록 레벨요소, 인라인 레벨요소 (0) | 2023.11.15 |
| [HTML] 텍스트 정의 요소들/강조, 약어, 정의, 인용 (0) | 2023.11.15 |
| [HTML] HTML 문서의 구조, DTD 선언, 언어 설정 (0) | 2023.11.06 |
