2022. 10. 30. 22:57ㆍHTML
예쁜 글꼴을 가져와서 웹페이지에 적용할 수 있는 방법, 주석 달기 및 파일 분리에 대해 배워봅니다.
> 폰트는 구글웹폰트에서 제공하는 무료 라이선스 폰트를 활용합니다.
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
(폰트 저작권은 잘 지키셔야 합니다. 폰트 자체가 하나의 프로그램으로 취급되서 그렇습니다. 나중에 기회가 되면 폰트 저작권 관련 내용도 올려보도록 할께요~)
아래 사진과 같이,
- 구글 폰트 페이지에 들어가서, 원하는 폰트를 선택해봅니다.
- Select OOOO 항목을 찾아서 클릭합니다.
- 링크란에 적힌 3번째 태그를 그대로 복사해서, <title> 태그 바로 밑에 붙여넣기 합니다.
- CSS rules를 복사합니다.
- <style> 태그 아래부분에 *를 넣고 복사한 CSS rules를 붙여넣고 {}으로 묶습니다.
- *은 '모든 태그에 적용하겠다' 라는 뜻입니다.
폰트 변경 코딩 예제는 아래와 같습니다.
<title> 태그 바로 밑과,
<style> 태그 안에 * {}를 활용하여 글꼴 변경을 합니다.
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Poor Story', cursive;
}
.mytitle {
background-color:green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 50px;
padding-top: 40px;
}
.mybtn {
margin: 50px;
}
.wrap {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해 주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn"> 로그인하기</button>
</div>
</body>
</html>
> 주석 달기는,
i) 코드를 임시로 작동하지 못하게 쓰거나
ii) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
iii) 주석으로 변경하고 싶은 코드를 선택하고 단축키를 누르면 됨.
[주석 달기 단축키]
MS 윈도우: ctrl + /
Mac iOS : cmd + /
HTML, CSS, JVscript 마다 주석이 표시되는 것은 좀 다릅니다.
> html과 css 파일 분리 방법
- mystyle.css라는 파일을 새로 만들고,
- <style>에 있는 코딩 내용을 mystyle.css로 옮깁니다.
- 그리고, 기존 html 파일에 <style> 부분을 없앱니다.
- 그리고, <link> 태그를 이용해서 mystyle.css라는 파일을 불러와서 사용합니다.
이러면, 스타일 부분에 대한 코딩과 html에 대한 코딩 내용을 각각 관리할 수 있어서 편리하다고 합니다.
'HTML' 카테고리의 다른 글
| [스파르타코딩클럽] 1주차 8번째 - 본격적으로 부트스트랩 써보기 (0) | 2022.10.31 |
|---|---|
| [스파르타코딩클럽] 1주차 7번째 - 부트스트랩(예쁜 CSS 모음집) (0) | 2022.10.31 |
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(2) (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(1) (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 4번째 - CSS 기초 (0) | 2022.10.30 |