대학생 쩡딱구리
코뮤니티 모각코 웹 기초 3일차: CSS, 폰트 적용하기 본문
서포터즈 활동에 뭐에 바빠서 3~5일차를 밀려버렸는데 설 연휴가 있어서 다행이다...!
기본적인 CSS 사용법에 대해서는 2일차 게시글에 다루었으니 아래 게시글을 참고하면 좋을 것 같다.
코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기
2일차 후기를 쓰기 전 좋은 소식이 하나 생겼다. 바로바로...! 내가 코뮤니티 서포터즈에 합격했다! 열심히 하겠습니다. 뽑아주셔서 감사드려요😊! 메일이 빨리 오기를 손꼽아 기다리는 중이다.
jjeongttakgoori.tistory.com
오늘은 모각코 3일차 내용, CSS를 보다 효과적으로 사용하는 방법과 폰트를 사용하는 방법을 공부해보려 한다!
1. CSS를 적용하는 세 가지 방법
HTML 태그에 바로 적용
<!DOCTYPE html>
<html>
<head>
<title>코딩을 하자</title>
</head>
<body>
<h2 style="color: blue; background-color: lightgray;">코딩은 코뮤니티에서!</h2>
</body>
</html>HTML 문서에 직접 속성: 속성값;을 여러 개 사용해 여러 속성을 나타낼 수 있지만 잘 쓰지는 않는다.
head 안에 <style> 태그 넣기
<!DOCTYPE html>
<html>
<head>
<title>모각코가 좋아</title>
<style>
h1 {
color: blue;
background-color: lightgray;
}
</style>
</head>
<body>
<h1 style="color: red; background-color: grey;">빨강이 좋아!</h1>
</body>
</html>
외부 스타일 시트(CSS 분리)
CSS 속성을 별도의 스타일 시트로 분리한 뒤 link로 불러오는 방식이다. 이 방식이 좋은 몇 가지 이유를 들자면 우선 다른 사람이 만든 라이브러리 파일을 불러오거나 용도에 따라 분리한 여러 스타일 시트를 나누어 쓸 때 좋다! 외부 CSS 파일을 불러오는 방법은 아래와 같다.
1) CSS 파일을 HTML 문서가 있는 폴더에 넣어주기
2) CSS 파일에 원하는 속성 마음껏 적어주기!
3) 상대 경로에 맞춰 css 파일을 불러오는 링크 작성하기
이 문서의 경우 static이라는 폴더 안에 style.css 파일을 만들었고 그 파일을 불러오고자 한다. 그러므로 이 코드를 head태그 안에 추가해주면 된다.
<link rel="stylesheet" href="./static/style.css" />이 코드에 대해 조금 더 자세하게 소개를 하면 다음과 같다.
- rel = "stylesheet" -> 불러오고자 하는 문서가 CSS 파일임을 명시
- href = "~~~" -> 불러오고자 하는 문서가 있는 상대 경로 / 파일명
2. 폰트 적용하기
HTML에 폰트를 적용하기 위해서는 웹 폰트를 사용해야 하는데 .doc문서나 ppt 문서와 달리 폰트를 다운받을 필요가 없이 폰트를 적용할 수 있다. 그렇다면 어디서 어떻게 폰트를 보고 웹 폰트를 써야 할까?
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누
상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누
noonnu.cc
보통 웹 폰트를 사용하기 위해 구글 폰트나 눈누 폰트 사이트(둘 다 무료다)를 많이 이용하는데, 이 게시글에서는 구글 폰트를 보려 한다. 눈누 폰트도 사용법이 비슷해서 굳이 둘 다 볼 필요는 없을 것 같다.
우선 구글 폰트 홈페이지에 들어가 검색창 및 'language' 로 들어가 'Korean'으로 설정한 후, 적용할 폰트를 선택한다.
아무 폰트나 선택해보자. 우측 하단을 보면 html 태그와 CSS 속성값이 쓰여 있는 것이 보일 것이다. 위의 <link>와 <import>는 이 웹 폰트를 어떻게 문서 안으로 불러올 것인지의 방식을 결정하는 것이다. 둘 중 하나를 고르면 된다.
<link> 방식으로 웹 폰트 불러오기
아래와 같이 HTML 파일 내 태그 안에 표시된 부분을 복사해 넣어주면 된다.
<!DOCTYPE html>
<html lang="ko">
<html>
<head>
<meta charset="UTF-8" />
<title>코딩을 하자</title>
<link rel = "preconnect" href = "https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap" rel="stylesheet"/>
</head>
<body>
</body>
</html>
<import> 방식으로 웹 폰트 불러오기
@import 방식으로 웹 폰트를 불러온다면 내부 스타일 시트에서는 아래 코드를 <head> 안에 넣으면 된다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
</style>
CSS 파일을 외부로 분리할 경우에는 CSS 파일 내에 코드 한 줄만 추가해주면 된다.
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap');
자 그럼 폰트를 잘 불러왔으니 웹 폰트를 CSS에 적용해보자!
적용하기 전혀 어렵지 않다! 폰트 선택 후 구글 폰트 홈페이지 우측 하단을 보자
CSS 파일에 이렇게 코드를 작성한다면 <h3> 태그를 갖고 있는 내용은 모두 나눔 명조 글씨체로 바뀐다.
h3 {
font-family: "Nanum Myeongjo", serif;
}만약 모든 텍스트를 나눔 명조로 바꾸고 싶다면, body태그 안에 폰트 설정을 넣어주면 된다.
body {
font-family: "Nanum Myeongjo", serif;
}
혹시 글자 굵기를 바꿔주고 싶다면 어떻게 해야 할까? 글자 굵기 속성을 여러 개 선택해 다르게 적용해주면 된다.
이 때 font-weight를 사용한다.
.light {
font-family: "Nanum Myeongjo", serif;
font-weight: 400;
}
.bold {
font-family: "Nanum Myeongjo", serif;
font-weight: 700;
}
3. 미션
✅ 2일차에 만든 위키백과 페이지, 또는 다른 페이지 만들기
- 조건 1. static이라는 폴더 안에 style이라는 css 파일 분리해 사용하기
- 조건 2. 두 가지 이상의 웹 폰트 사용하기
HTML 파일
<html lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>3일차 모각코!</title>
<link rel="stylesheet", href="./style.css"/>
</head>
<body>
<h1>다람쥐</h1>
<text><p>🔎하늘 다람쥐 문서를 찾아오셨다면 <blue>하늘다람쥐</blue> 문서를 참고해주세요.</p></text>
<img src="C:\Users\s\Desktop\static\넋놓은다람이.jpg" />
<table>
<tr><th>이름</th><th>이명</th><</tr>
<tr><th>다람쥐 / chipmunk</th><th>시베리아 다람쥐, 얼룩다람쥐</th></tr>
</table>
<hr />
<h2>1. 좁은 의미의 다람쥐(chipmunk)</h2>
<text><p><i>분류법: 동물계 척삭동물문 포유강 쥐목 다람쥣과 땅다람쥐아과 마멋족 다람쥐속</i></p></text>
<text><p>북아메리카와 동아시아 북동부에 사는 <blue>설치류</blue>의 한 종류이다. 작은 동물이 대부분 그렇듯이 경계심이 많고 색 자체가 보호색을 띠고 있기 때문에 얼핏 지나치면 보기 힘들지만 사실은 널리고 널린 동물이다. 웬만하면 먹을 것을 주지 말자.다람쥐가 사람이 주는 먹이에 익숙해져 다른 먹이를 구하지 않게 된다. 먹는 모습이 귀엽더라도 가능하면 눈으로만 바라보자.</p></text>
<hr />
<h2>2. 엄청난 식욕</h2>
<img src="C:\Users\s\Desktop\static\움냠냠다람이.png" />
<text><p>경계심이 많은 동물이지만 식욕이 엄청난데, 볼터질 때까지 먹이를 넣는 모습이 귀엽다. 주로 견과류 등을 먹는 이미지가 있지만, 곤충이나 심지어 자기 몸과 비슷한 동물도 잡아먹는 <b>잡식성</b>이다.</p></text>
<text><p>간혹 나무 구덩이나 바위 사이에 다람쥐가 저장해둔 도토리를 발견하고 도토리를 발견하고 도토리묵하려고 가져가는 사람들이 있는데 <b>그런 행위는 다람쥐에게 엄청난 피해를 준다.</b> 다람쥐가 겨울 한 철 먹으려고 모아둔 먹이를 뺏는 행위이기 때문이다.</p></text>
<hr />
<h2>3. 전투력</h2>
<img src="C:\Users\s\Desktop\static\파이터다람이.jpg", width="500" />
<text><p>다람쥐가 속하는 설치류는 잡식성이다. 집에서 새를 키운다면 운 나쁘게 다람쥐에게 새를 잃는 경우가 생기기도 한다. 새 뿐만 아니라 <blue>비둘기</blue>, <blue>도마뱀</blue>도 잡아먹기도 한다.</p></text>
<text><p>말 그대로 <b>설치류 계의 호랑이</b>. 물론 대형 포식자에게는 간식에 불과하다. <blue>까마귀</blue>나 <blue>왜가리</blue>에겐 잡아먹히는 일도 허다하다.</p></text>
<h2>4. 관련 문서</h2>
<ul>
<li><blue>설치류</blue></li>
<li><blue>청설모</blue></li>
<li><blue>래트</blue></li>
<li><blue>햄스터</blue></li>
<li><blue>하늘다람쥐</blue></li>
<li><blue>다람쥐/대중매체</blue></li>
<li><blue>깡(노래)</blue></li>
</ul>
</body>
</html>
CSS 파일
@import url('https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic&display=swap');
table, th, td {
border: 1px solid black;
<colgroup>
<col>
<colspan = "2" style = "background-color: sandybrown">
</colgroup>
}
text {
font-family: 'Nanum Gothic', sans-serif;
}
h1 {
font-family: "Jua", sans-serif;
font-weight: 700;
}
h2 {
font-family: "Jua", sans-serif;
font-weight: 400;
color: saddlebrown
}
blue{
color: blue;
}
나는 표의 헤더의 색을 갈색으로 바꾸고 싶었는데 코드를 실행했더니 그게 잘 안 됐다.
매니저님께서 이렇게 피드백을 주셨다! 고치고 싶다면 아래 매니저님의 피드백을 참고하면 될 것 같다.
<table>
<th>이름</th><th>이명</th>
<tr>
<td>다람쥐 / chipmunk</td>
<td>시베리아 다람쥐, 얼룩다람쥐</td>
</tr>
</table>
/* 너무너무 친절하신 코딩 금손 짤랑 매니저님의 피드백 */
4. 소감
'CSS 파일이 길어지면 코딩할 때 안 불편한가?' 했던 의문점을 풀 수 있었던 3일차 공부! 폰트까지 적용하면서 점점 내가 만들어가는 문서가 다채로워진다는 것을 느끼니 뿌듯했다. 설연휴 동안 재충전도 하고! 코딩 공부도 열심히 하고 서포터즈 일도 열심히 해야지🥰 모각코에서 공부하고 서포터즈 활동할 기회를 준 코뮤니티의 모든 여러분 정말정말 감사드립니다! 내일 4일차 공부로 돌아와야지
'STUDIES > WEB' 카테고리의 다른 글
| 코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기 (0) | 2021.02.16 |
|---|---|
| 코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법 (0) | 2021.02.14 |
| 코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기 (0) | 2021.02.05 |
| 코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기 (0) | 2021.02.04 |
| 코뮤니티 모각코 웹 기초 합격과 시작 (0) | 2021.02.04 |
