Next14 + Netlify 로 새로 작성했습니다.
https://whothatsme.tistory.com/42
[Next14 + Netlify] 나를 소개하는 홈페이지 만들기 (0)
오랜만에 나를 소개하기 카테고리를 보니 뭐 제대로 끝낸게 없어서 이번에 Next14 만져볼 겸 자소서 페이지 만들어 보았다.정적페이지로 배포하기엔 아쉽지만 맛보기 정도이니 그냥 기록을 끄적
whothatsme.tistory.com
---
우선 임의로 기본 페이지를 표현해 보았다. 천천히 코드를 뜯어보자.
html을 기준으로 css과 배경이미지로 사용한 jpg 파일이 존재한다. 저 메인 페이지 내에 필요한 파일을 위의 이미지와 같다.
html에서 css를 불러오기 위해서는 ,
<!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>꿈이 많은 어른 아이</title>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
...<head> 안에 stylesheet 형태로 css파일을 지정해 주어야한다.
홈페이지 내의 폰트는 눈누에서 무료폰트를 사용했다. 구글 폰트에서도 무료 웹폰트를 사용할 수 있다.
css내에 다음처럼 웹폰트를 지정해주고,
@font-face {
font-family: "GowunDodum-Regular";
src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff")
format("woff");
font-weight: normal;
font-style: normal;
}이후 html이나 body에 font-family 로 불러온 폰트를 지정하면 된다.
반응형을 사용하기 위해서 font-size로 크기 변화를 주었다. html내에서 rem을 이용할 예정이라서 html 전체의 폰트를 수정하는 방법을 사용했는데, 음. 아마도 조금 더 페이지를 진행시키면서 수정하지 않을까 싶다. 뭐가 정답인지는 모르겠지만 하면서 고민을 해보며 앞으로 더 진행 해 봐야할 듯 싶다.
html {
height: 100vh;
margin: 0;
padding: 0;
font-size: 16px;
font-family: "GowunDodum-Regular";
}
@media (max-width: 1023px) {
html {
font-size: 14px;
}
}
@media (max-width: 767px) {
html {
font-size: 12px;
}
}
@media (max-width: 480px) {
html {
font-size: 10px;
}
}
따라서 모바일 화면일 때는 다음처럼 나오게 된다. backgroud-size는 cover로 꽉 채웠다.
...
<body>
<div
style="
display: flex;
flex-direction: column;
height: 100%;
background-image: url('workplace.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
"
>
<div
class="mainNav"
style="
display: flex;
height: 8rem;
background: whitesmoke;
justify-content: end;
"
>
<ul style="display: flex; flex-direction: row; list-style: none">
<li style="margin-left: 1rem">
<a href="" style="text-decoration: none; color: black">홈</a>
</li>
<li>소개</li>
<li>홈</li>
<li>홈</li>
</ul>
...나는 전체적인 틀을 제작할 때 인라인으로 작성 이후 class나 id로 지정해서 외부 스타일 시트를 먹이는 형태를 주로 이용한다. 눈에 보이도록 진행하고 전체적인 틀을 작성하기 위해서 인라인을 사용하지만 최종 제작시에는 통일성을 유지하고 스타일시트를 이해하기 위해서 가급적 사용하지 않는 것이 좋다고 생각한다.
외부 스타일 시트로 수정 할 경우 코드가 훨씬 간단해 진다. 아래는 위와 똑같은 코드인데 인라인 => 외부 스타일 시트 로 변경했을때 정리되는 모습이다.
<!-- index.html -->
...
<body>
<div class="container">
<div class="mainNav">
<ul>
<li>
<a href="">홈</a>
</li>
<li>소개</li>
<li>홈</li>
<li>홈</li>
</ul>
.../* index.css */
.container {
display: flex;
flex-direction: column;
height: 100%;
background-image: url("workplace.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.mainNav {
display: flex;
height: 8rem;
background: whitesmoke;
justify-content: end;
padding: 0 1rem 0 1rem;
}
.mainNav > ul {
display: flex;
flex-direction: row;
list-style: none;
}
.mainNav > ul > li {
margin-left: 1rem;
}
.mainNav ul > li > a {
text-decoration: none;
color: black;
}리스트형태인 ul과 li를 이용해서 내비게이션 바와, footer를 제작해 두었다. link (a 태그)를 이용해서 nav바에 버튼을 클릭시 해당하는 위치로 이동할 수 있도록 진행할 예정이다.
'코딩 > 나를 소개하기' 카테고리의 다른 글
| [Vue.js] 나를 소개하는 홈페이지 만들기 (3) - CSS, SASS, SCSS (0) | 2022.05.24 |
|---|---|
| [Vue.js] 나를 소개하는 홈페이지 만들기 (2) - Bootstrap (0) | 2022.05.22 |
| [Vue.js] 나를 소개하는 홈페이지 만들기 (1) - Vue.js, Vue-cli (0) | 2022.05.18 |
| 나를 소개하는 홈페이지 만들기 (3) (0) | 2022.03.08 |
| 나를 소개하는 홈페이지 만들기 (1) (0) | 2022.03.03 |