Coding Diary.

(CSS코딩일기) 글자 색 변경하기, 링크 색 변경하기 본문

Coding/HTML&CSS

(CSS코딩일기) 글자 색 변경하기, 링크 색 변경하기

life-of-nomad 2023. 2. 18. 16:48
728x90
반응형
저번 시간에 영역을 나누고 배경색을 변경하는 방법에 대해 알아보았습니다.
이번 시간에는 글자색을 변경하는 방법을 알아보겠습니다.

1. 글자색 변경하기

글자색은 color라는 CSS 문법을 사용합니다. 맨 위에 있는 h1 태그에 <h1 style="color: #ffffff"> 라고 입력하면 제목의 글자색이 하얀색으로 바뀌는 것을 알 수 있습니다. p태그에도 마찬가지 방법으로 하면 글자색을 변경할 수 있습니다. 모든 페이지의 글자색을 바꾸고 싶으면 어떻게 해야 할까요? 방법은 페이지를 모두 감싸고 있는 태그를 찾아 글자색을 변경하면 됩니다. body 태그를 찾아 글자색을 <body style="color: #원하는색상">을 입력하면 글자색을 지정하지 않은 문장에는 글자색이 모두 바뀝니다. 그러면 만약 저번시간에 학습한 배경색을 넣은 영역의 글자색을 바꾸고 싶다면 어떻게 해야 할까요? 그 방법은 ;(세미콜론)을 넣어 CSS를 추가하면 됩니다. 예를 들어, <p style="background-color: #f6f1ff; color: #7844e8">로 하면 배경색과 글자색을 모두 바꿀 수 있습니다. 하이퍼링크 태그인 a태그에도 아래의 방법으로 글자색을 변경할 수 있습니다.

 

1  <!DOCTYPE html>
2  <html>
3    <head> 
4      <title>Weekly Codeit</title>
5      <meta charset="utf-8">
6    </head>
7    <body>
8    <div style="background-color: #703fda">
9        <h1>Weekly Codeit</h1>
10         금요일에 만나는 코딩 한 스푼
11   </div>
12   <div>
13        <h2>코드잇이 엄선한 <br> 프로그래밍 꿀팁</h2>
14         <img src="banner-programming.png">
15        <p>
16         컴퓨터 개론, 프로그래밍 기초, 업무 자동화 ... 인기 코드잇 강의를 뉴스레터로 만나보세요.
17        </p>          
18        <p>
19         유용한 팁과 개발 지식을 매주 금요일 여러분의 메일함으로 보내드려요.
20       </p>
21        <a href="https://codeit.kr/catalog" style="color: #7844e8">
22         수업 살펴보기
23       </a>
24  <div style="background-color: #f6f6fb">
25      <h2>배움의 기쁨을 세상 모두에게.<br>많은 코둥이들이 구독하고 있어요!</h2>
26      <img src="banner-students.png">
27       <p style="background-color: #ffffff">
28         iloveprincess 님 안녕하세요, 5년차 코둥이입니다! 제가 구독 중인 뉴스레터 중 가장 읽기 편하고 재밌어요.
 매주 금요일이 기다려지네요 :)
29       </p>
30      <p style="background-color: #ffffff">
31        코드냠냠 님 뉴스레터 정말 잘 보고 있습니다. 다양한 주제에 대한 소개 덕분에 기술 면접에서도 당황하지 않을 수 있었어요! 항상 감사드립니다.
32      </p>
33      <p style="background-color: #ffffff">      
34        냐리 님 덕분에 프로그래밍 상식이 풍부해지는 느낌임. 깊이있는 내용을 알기 쉽게 소개해줘서 더 좋은듯. 초보 코둥이들에게 추천해요.
35       </p>
36       <a href="https://codeit.kr/reviews" style="color: #7844e8">
37     후기 더 보기
38       </a>
39    <h2>코딩이 즐거워지는 뉴스레터, <br>Weekly Codeit</h2>
40  </div>
41  <div style="background-color: #5b2eb0">
42     <p>          
43        Weekly Codeit
44     </p>
45     <p> 
46          Weekly Codeit 을 아직 구독하지 않으셨다면? 구독 신청 Subscribe 최신 뉴스레터들을 놓치지 않기 위해 weekly@codeit.kr을 메일 주소록에 추가해주세요.
47     </p>
48     <p>       
49        (주)코드잇 | 서울 중구 청계천로 100 시그니쳐타워 동관 10층 | 수신 거부 Unsubscribe
50     </p>   
51   </div>
52   </body>
53  </html>

위의 코드대로 작성하면 나오는 화면은 아래와 같습니다.

이러한 식으로 수업 살펴보기, 후기 더 보기 부분이 연한 보라색으로 바뀌는 것을 볼 수 있습니다.

이상으로 오늘은 글자색을 변경하는 CSS 코드에 대해 알아보았습니다.

728x90
반응형
저작자표시

'Coding > HTML&CSS' 카테고리의 다른 글

(CSS코딩일기) 글자 크기와 굵기 변경하기  (0) 2023.02.18
(CSS코딩일기) 글꼴 변경하기, 구글 폰트  (1) 2023.02.18
(CSS코딩일기) div로 영역 나누고 배경색 설정하기  (0) 2023.02.13
(HTML코딩일기) 웹페이지에 이미지 넣기  (0) 2023.02.10
(HTML코딩일기) 페이지에 하이퍼링크 추가하기  (0) 2023.02.10
'Coding/HTML&CSS' Related Articles more