HTML과 CSS로 포트폴리오 만들기 ver.2

29041 단어 CSShtmlCSS

저번에 만든 포트폴리오 ver.1에 이어 이번에는 ver.2를 만들어보기로 했다.


최종 결과

HTML과 CSS로 포트폴리오 만들기 ver.2의 최종 결과는 다음과 같다.
이 웹 페이지를 만들기까지 5단계로 나누어 살펴보았다.


1단계. Pinterest에서 다양한 디자인 찾아보기

먼저 코딩을 하기 전에, 내가 바라는 포트폴리오의 모습을 Pinterest에서 찾아봤다.


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 여기를 이용했다.👍

VSCode - Spring Boot 프로젝트에서 MVC 패턴으로 View 호출
Modules and Packages

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage