저번에 만든 포트폴리오 ver.1에 이어 이번에는 ver.2를 만들어보기로 했다.
최종 결과
HTML과 CSS로 포트폴리오 만들기 ver.2의 최종 결과는 다음과 같다.
이 웹 페이지를 만들기까지 5단계로 나누어 살펴보았다.
1단계. Pinterest에서 다양한 디자인 찾아보기
먼저 코딩을 하기 전에, 내가 바라는 포트폴리오의 모습을 Pinterest에서 찾아봤다.
- Pinterest 주소: https://www.pinterest.co.kr/
2단계. 원하는 디자인의 웹 페이지 그려보기
그리고 찾은 사진을을 참고해서 만들 웹 페이지를 디자인했다.
3단계. HTML로 뼈대 잡기
이제 디자인한대로 웹 페이지를 만들 차례인데, HTML로 웹 페이지의 뼈대를 잡아줬다.
화면 보다 작은 박스를 두고 그 안에 내용물을 집어넣고 싶었기 때문에, 모든 내용물을 <div>로 감싸고 home_container라는 클래스를 선언했다.
이후에 CSS에서 home_container에 여러가지 설정을 해줄 것이다.
(1) 메인 페이지
아래는 메인 페이지의 html 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>포트폴리오</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="home_container">
<main>
<section class="image">
<img src="images\ham.png" width="350">
</section>
</main>
<section class="home">
<div class="name">
<h1 class="leename"><a href="index.html" class="LEEname">biyam</a></h1>
</div>
<ul class="list">
<li><a href="about.html" class="about"><b>About</b></a></li>
<li><a href="activities.html" class="activities"><b>Activities</b></a></li>
<li ><a href="project.html" class="project"><b>Project</b></a></li>
<li><a href="education.html" class="education"><b>Education</b></a></li>
</ul>
</section>
<aside class="url">
<ul>
<li><a href="https://github.com/biyamn"><img src="images\github.png" width="30" class="github"></a></li>
<li><a href="https://velog.io/@hamham"><img src="images\velog.png" width="30" class="velog"></a></li>
</ul>
</aside>
</div>
</body>
</html>(2) About을 누르면 나오는 페이지
About을 누르면 나오는 페이지 안에는 또다른 작은 상자 두 개가 있고, 그 안에 내용물이 들어간다. 이 작은 상자의 클래스는 container1, container2라고 설정했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="small_container">
<a href="index.html" class="noline"><h2>About Me</h2></a>
<section class="about_container">
<div class="container1">
<h3>Profile</h3>
<hr>
<p>안녕하세요, biyam입니다🤗</p>
<p>학부에서는 아동가족학과 심리학을 전공하고 있고, 제 전공을 사랑합니다. </p>
<p>그리고 리버싱과 프론트엔드 개발에 관심이 있습니다.</p>
</p>
</div>
<div class="container2">
<h3>Like</h3>
<hr>
<p>리버싱 워게임을 좋아합니다. 문제를 해결하기까지 오랜 시간이 걸리지만, 하나하나 분석해가는 과정에 즐거움을 느낍니다.</p>
<p>카페 가는 것을 좋아합니다.☕
코로나 전에는 하루에 한두번씩은 꼭 카페에 갔는데, 지금은 그럴 수 없어 아쉽습니다.</p>
<p></p>
</div>
</section>
</div>
</body>
</html>4단계. CSS로 디자인하기
(1) 메인 페이지
메인 페이지의 home_container에 display: flex;과 justify-content 속성을 주어 햄스터 사진, 메뉴바, url버튼 등을 정렬했다.
그리고 flex-flow: row wrap; 속성을 주어 가로로 정렬하고 화면이 작아지면 아래로 넘어가게 했다.
그리고width:1200px; height: 600px; 속성을 주어 사각형의 크기를 설정했다.
.home_container {
background: url("images\\sky.jpg");
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
width:1200px;
height: 600px;
margin: 90px;
margin-left: auto;
margin-right: auto;
border: 15px solid white;
padding: 30px;
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.3);
border-radius: 50px;
}(2) About을 누르면 나오는 페이지
About을 누르면 나오는 페이지에서는 div에 클래스 container1, container2를 만들고 width:350px; height: 350px;라는 속성을 두어 더 작은 상자를 만들었다.
.container1 {
width:350px;
height: 350px;
margin: 90px;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
padding: 30px;
border-radius: 50px;
margin-top: 0;
}
.container2{
width:350px;
height: 350px;
margin: 90px;
margin-left: auto;
margin-right: auto;
border: 10px solid white;
padding: 30px;
border-radius: 50px;
gap: 0 0 ;
margin-top: 0;
}
5단계. 반응형 웹 디자인하기 - 미디어쿼리
창의 크기를 작게했을 때 출력되는 웹의 디자인을 바꾸기 위해 미디어쿼리를 이용했다.
@media screen and (max-width: 768px) {
.small_container_about {
width:450px;
height: 1000px;
}
.about_container {
display: flex;
flex-wrap: wrap;
}
}라고 쓰고 그 안은 창의 크기가 작을 때의 속성으로 채웠다. max-width: 768px은 창의 너비가 768px 이하일 때: 를 의미한다.
.small_container_about은 미디어쿼리 안에 있는 속성 중 하나를 가져온 것인데, 저 클래스의 width와 height를 조절함으로써 작아진 창의 크기에 맞게 했다.
그리고 about_container 클래스를 가진 박스는 flex-wrap의 속성을 wrap로 하여 창의 크기가 작아지면 아래로 내려오게 했다.
참고로 저 햄스터처럼 배경화면을 지워서 png로 만들어주는 사이트는
https://www.fococlipping.com/clip 여기를 이용했다.👍
