폰트
위 폰트들은 기본 제공 폰트들이다. 하지만 이런 폰트만 사용할게 아니라 우린 외부에 있는 폰트들도 사용하고 싶을때가 있을 것이다. 그때 무료로 이용할 수 있는 구글에 구글폰트 검색하면 나오는 제일 첫번째 사이트에 들어가면 폰트가 여러가지 나온다
홈페이지에서 필요한 폰트에 들어가면 이렇게 나온다 . 일단 링크로 걸어서 하는것 먼저 설명을 하겠다 1.원하는 폰트에 + 버튼을 눌러주면 장바구니에 담듯이 옆에 창이 열린다 ( 동시에 여러개도 가능 )
그럼 2. 장바구니에 link부분부터 끝까지 복사하여 해드영역 메타 아래에 붙여 준다
<title>Trying Out Different Fonts</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Roboto:wght@300&display=swap" rel="stylesheet">
<style type="text/css">그리고 나서 실제 적용 할때는 3번을 스타일에 해당하는 부분에 붙여 준다 .
다운로드 방법
다운로드를 받아와 내가 원하는 폴더에 만들어 넣어준다
나는 fonts라는 폴더에 넣어주었다 그리고 나서 프로그램을 보면
이렇게 들어간 것을 볼수 있다 그리고 css 경로를 설정해주고 이름을 만들어 준뒤에 사용 할 수 있다 ,
@font-face {
src: url("../fonts/Gugi-Regular.ttf");
font-family: Nanum;
/* 이름 정해주는것 나중에 이 이름으로 사용 가능하다 */
}
p{
font-size: 30px;
font-family: Nanum;
}
어제 div로 묶어서 그룹화 시켜줄수 있다고 했다 . 하지만 div는 블럭 방식이라 글에는 적합하지 않다 그래서 사용하는게
span 이다
<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>
<meta charset="utf-8">
<style type="text/css">
.red {
color: red;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet,<span class="red"> consectetur adipiscing elit,</span> .
sed do eiusmod tempor
incididunt ut labore et doloreF
magna aliqua.</p>
</body>
</html>
나머지 배운 것들
a태그에 데코레이션 달기 text-decoration:
a태그는 링크를 줄수 있는데 그때 nodecoration 이라고 주게 되면 이런 모양
none 주었을때
패딩과 마진
프로그램에서 많이 다뤄봐서 자세한 설명은 생략
여기 그림에서 보는것처럼 패딩을 따로도 줄수 있지만 한번에 줄수도 있다.
4면 한번에 주기 위 오른쪽 아래 왼쪽 순서로 작성
2면만 주기 상하 , 좌우 이렇게 2개를 작성하면 같이 들어간다
지금까지 배운 내용으로 화면 만들기
아래에 버튼을 눌럿을때 화면전환 되면서 다른 그림이 나오도록 만들것이다.
css
#logo{
width: 165px;
height: 58px;
margin-top: 80px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
a{
text-decoration: none;
margin: 10px;
font-size: 16px;
color: rgb(88, 89, 91);
font-family: Helvetica;
margin-top: 60px;
margin-bottom: 60px;
}
div{
text-align: center;
margin-top: 60px;
margin-bottom: 60px;
}
div #ho{
font-weight: bold;
}
화면구성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self_check</title>
<link rel="stylesheet" href="css/Style.css">
</head>
<body>
<img id="logo" src="images/logo.png">
<div>
<a id="ho" href="traval.html">Home</a>
<a href="Seoul.html">Seoul</a>
<a href="Tokyo.html">Tokyo</a>
<a href="Paris.html">Paris</a>
</div>
<img src="images/home.png" width="90%">
</body>
</html>이렇게 4가지 화면이 있고 화면마다 사진과 글자의 강조만 바꿔주면 된다 .
'아옳옳의 코딩공부 > 아옳이의 html5 + css3 공부' 카테고리의 다른 글
| 21-04-29 웹 html5 태그 정리 (0) | 2021.05.10 |
|---|---|
| 21-04-29 웹 html5 + css3 (4) (0) | 2021.05.03 |
| 21-04-29 웹 html5 + css3 (3) (0) | 2021.04.30 |
| 21-04-28 웹 html5 + css3 (2) (0) | 2021.04.28 |
| 21-04-27 새로운 출발~ html5 + css3 (0) | 2021.04.27 |
