https://github.com/seojeounghoon/css_v1_MyHomePage
seojeounghoon/css_v1_MyHomePage
css project Hompage Design . Contribute to seojeounghoon/css_v1_MyHomePage development by creating an account on GitHub.
github.com
안녕하세요 왕초보 코딩 탈출입니다. 이것저것 많이하긴했지만 시간이 없다는 핑계로 블로그에 올리지 못했네요 ㅠ
퍼블리셔는 아니지만 웹이 앱이건 디자인이 많이 발목을 잡아서 CSS를 공부하면서 올려볼까합니다.
오늘은 간단하게 폰트설정하고 개발을 위해 기본 설정 하고 전체 배경 이미지를 넣겠습니다.
우선 폴더 구조는
index.html
css/style.css
img/
index.html 파일을 만들고
css 와 img 폴더를 생성하고
css 에는 style.css 파일을 생성합니다.
img폴더에는 차후에 이미지를 깃에 같이 포함해서 올릴테니 다운받으시면 됩니다.
우선 기본 html 내용을 작성하고
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
다음과 같이 구글 폰트를 가져옵니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font -->
<!-- CSS -->
<title>왕초보코딩탈출</title>
</head>
<body>
<header class="header">
hello World!!!!
</header>
</body>
</html>
|
다음으로
모든 페이지의 margin, padding 을 0으로 주고 box-sizing: border-box 로 기본 설정하겠습니다.
그리고 body에 폰트의 기본 설정들과 컬러 라인높이등을 미리 설정해 둡니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.7;
color:#777;
}
|
이제 index.html 에 작성해둔 header 에 전체 이미지 넣기
|
1
2
3
4
5
6
|
.header {
height: 100vh;
background-size: cover;
background-position: top;
}
|
결과 화면
'웹 프론트엔드 > CSS-나의 홈페이지 만들기' 카테고리의 다른 글
| 3. 우측 상단 로고 넣기 화면 중앙에 텍스트 넣고 간단한 애니메이션 효과 (0) | 2020.04.02 |
|---|---|
| 3. 배경 이미지에 그라데이션 넣기 (0) | 2020.04.01 |
| 1. 프로젝트 개요 (0) | 2020.03.31 |