실행 영상
파일 구성
- src 폴더: 각종 이미지 파일, 동영상 파일 넣어주기
- styles 폴더: 각 섹션별 css 파일들 넣어주기
- index.html: html 작성 파일
- style.css: 전체 css 관리 파일
style.css
@import url('./styles/1-intro.css');
@import url('./styles/2-nav.css');
@import url('./styles/3-info.css');
@import url('./styles/4-work.css');
@import url('./styles/5-footer.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap');
- {
margin: 0;
padding: 0;
font-family: 'Noto Serif KR', serif;
}
section{
width: 100%;
height: 100vh;
overflow: auto;
/ 모든 section의 부모에 scroll-snap 속성 넣기 /
scroll-snap-type: y mandatory;
}
HTML 파트
전체 틀 먼저 잡아주기
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<section>
<nav>
</nav>
<section class="intro" id="intro">
</section>
<section class="info" id="info">
</section>
<section class="work" id="work">
</section>
<footer class="footer" id="contact">
</footer>
</section>
</body>
</html>head 태그 내부 구현
- title은 Portfolio로 설정하고, 파비콘은 원하는 이미지 넣기
<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>Portfolio</title>
<!--CSS 연결-->
<link rel="stylesheet" href="style.css" />
<!--Favicon-->
<link rel="shortcut icon" href="./" type="image/x-icon" />
</head>Intro 섹션 구성하기
- 한줄 소개
- 영어 소개
<section class="intro" id="intro">
<div class="intro__dark">
<div class="intro__type">
<!-- 한줄 소개와 영어 소개 -->
<div>
<!-- 스크린 리더가 읽지 않게 -->
<span aria-hidden="true">👋</span>
안녕하세요! 저는 양가연이라고 합니다<br>
'0'과 '1'로 이루어진 일상에서 저만의 감성을 지켜내는<br> 23살 공대생입니다
<p class="english_comment">
Hello, I am a college student, and I major Computer engineering. <br>
I enjoy watching movies, listening to music and going to art Exhibitions when I am free. <br>
</p>
</div>
</div>
</div>
</section>Nav 구성하기
<nav>
<h1>
<!-- 홈화면으로 이동할 수 있도록 href값을 #으로 준다 -->
<a class="header__homelink" href="http://127.0.0.1:5500/index.html#">
Effy__ee.log
</a>
</h1>
<nav class="header__nav">
<ul>
<li class="header__nav-item">
<a href="http://127.0.0.1:5500/index.html#info">ABOUT</a>
</li>
<li class="header__nav-item">
<a href="http://127.0.0.1:5500/index.html#work">SKILLS</a>
</li>
<li class="header__nav-item">
<a href="http://127.0.0.1:5500/index.html#footer">CONTACT</a>
</li>
</ul>
</nav>
</nav>Info 구성하기
<section class="info" id="info">
<h2>ABOUT ME</h2>
<p>
어쩌다 보니 공대에 와서 컴퓨터공학을 전공하게 된 저는 웹 개발과 앱 개발 등을 경험해보고 흥미를 느끼게 되었습니다.
</p>
<img src="" alt="picture">
<br>
<p>
최근에는 Machine Learning, AR/VR 등등 여러 분야에 관심을 갖고 즐겁게 진로를 탐색해나가고 있습니다.
</p>
</section>Work 구성하기
<section class="work" id="work">
<h2>SKILLS</h2>
<span class="skill_list">
<img src="./src/Html.png" alt="html_img" id="skill_img">
<img src="./src/css.png" alt="css_img" id="skill_img">
<img src="./src/js.png" alt="js_img" id="skill_img">
<img src="./src/react.png" alt="react_img" id="skill_img">
</span>
</div>
</section>footer 구성하기
<footer class="footer" id="footer">
<h1 class="contact">CONTACT ME</h1>
<div class="address">
<a href="https://github.com/gayeon7877">GITHUB</a>
<a href="https://velog.io/@gayean01">BLOG</a>
</div>
</footer>