영국 척척석사 유학생 일기장👩🏻‍🎓

(CSS코딩일기) 글자색 한번에 바꾸기, 클래스로 글자크기 조절하기, 파일 따로 저장하기 본문

코딩공부/HTML&CSS

(CSS코딩일기) 글자색 한번에 바꾸기, 클래스로 글자크기 조절하기, 파일 따로 저장하기

life-of-nomad 2023. 2. 24. 06:38
728x90
반응형
이번 시간에는 글자색을 한번에 바꾸는 방법을 알아보겠습니다.

1. 글자색 한번에 바꾸기

h3 태그가 여러개이고 각각의 글자색이 다 같다면 한번에 글자색을 바꿀 수 있습니다. 규칙을 정해주면 되는데 <head>태그 안에 <style>이라는 태그를 넣어주면 됩니다. 

예를 들어, 

<h3 style="color: #f56513">우도</h3>
<h3 style="color: #f56513">한라산 국립공원</h3>
<h3 style="color: #f56513">성산 일출봉</h3>
<h3 style="color: #f56513">군산 오름</h3>

와 같이 각각의 h3 태그에 색상을 넣어주면 되지만, h3태그가 많아지면 번거로워 집니다. 따라서 이를 한번에 넣을수 있는 CSS 규칙은 

<head>
 <style>
  h3 {
    color: #f56513;
}
</style>
</head>

위와 같이 head 태그 안에 일명 관심사의 분리를 시켜주는 것입니다. 이런 식으로 관심사의 분리를 시켜주면 한번에 색상을 변경하기도 편하고 HTML 과 CSS 를 따로 저장하기 편합니다. 만약, h3중 하나만 색상을 변경해야 한다면 어떻게 할까요? id를 넣어주면 됩니다. 예를 들어, 한라산 국립공원만 다른 색을 넣는다고 가정해봅시다. 

<head>
 <style>
  #hallasan {
    color: #f56513;
}
</style>
</head>
<body>
 <h3>우도</h3>
 <h3 id="hallasan">한라산 국립공원</h3>
 <h3>성산 일출봉</h3>
 <h3>군산 오름</h3>

위와 같이 id를 주고 style태그에 #hallasan 에 색상을 넣어주면 한라산 국립공원만 색상이 바뀌는 것을 볼 수 있습니다. 또한 주의해야 할 점은 아이디는 중복될 수 없다는 점입니다. 즉, 각 요소마다 고유한 이름을 지어줘야합니다.

2. 클래스

각 요소마다 고유한 id를 지어주어야 하는데 만약, 위의 예시에서 우도, 한라산 국립공원, 성산 일출봉, 군산 오름에 하나의 속성을 적용하고 싶다면 어떻게 해야 할까요? 그 방법은 아래와 같이 클래스를 만들어주는 것입니다. 

<head>
<style>
 .place{
   font-size: 16px;
   font-weight: 400;
 }
    
....(생략)
<h3 class="place">우도</h3>
<h3 class="place">한라산 국립공원</h3>
<h3 class="place">성산 일출봉</h3>
<h3 class="place">군산 오름</h3>

이런 식으로 class를 지정해주면 place라는 class를 가진 것에만 글자크기와 굵기가 적용되는 것을 알 수 있습니다. 

 

따라서 하나만 선택자를 할 때는 id를 쓰고 여러개를 선택자로 지정할 때는 class를 쓰면됩니다.

 

3. 파일 따로 저장하기

CSS코드를 적다보면 내용이 늘어나 확인하기 불편해지는 경우가 있습니다. 그럴 때는 따로 저장해주면 됩니다. 따로 저장해두고, head태그에 링크를 걸어둡니다. style.css라고 같은 폴더에 저장을 해두겠습니다.

<head>
  <link rel="stylesheet" href="style.css">

여기서 rel 은 relationship 의 약자 인데 불러올 파일간의 관계를 나타내는 것입니다. href는 파일의 주소, 경로를 나타냅니다. 

728x90
반응형
저작자표시

'코딩공부 > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) 텍스트 스타일링  (0) 2023.02.27
(CSS코딩일기) CSS 기본 개념 정리  (0) 2023.02.27
(CSS코딩일기) 이미지와 본문 크기, 여백 조절하기  (0) 2023.02.20
(CSS코딩일기) 글 정렬하기  (0) 2023.02.20
(CSS코딩일기) 글자 크기와 굵기 변경하기  (0) 2023.02.18
'코딩공부/HTML&CSS' Related Articles more