[HTML / CSS] 자기소개 페이지 만들기

shclew·2021년 8월 5일

아무도 만들라고 한 적은 없지만, html과 css 연습할 겸 갑자기 꽂혀서 만들게 된 자기소개 페이지.

프로그래밍 언어 축에도 안 드는 언어들이라길래, 그리고 실제로도 무료 강의를 보면서 공부할 때 어렵게 느껴지지 않았던 언어들이었어서 만만하게 보고 도전했는데 이런 허접한 결과물도 꼬박 이틀이 걸린 건 안 비밀이다. 😂😂 화면을 줄이거나 모바일로 보면 아직 깨지는 건 함정.

자기소개 페이지 링크
깃허브 링크 (html, css 코드)

꼭 넣고 싶었던 기능 중 하나

css 기능 중 scroll snap 기능을 꼭 넣고 싶었다. 원래는 js만으로 구현 가능했던 기능이라는데, 유튜브에서 설명 소개를 듣고 '아, 홈페이지 만들 때 적용시켜 봐야지!' 했었다. 그런데 원하는 대로 되지가 않아서 마빡만 여러 번 쳤다는 후문이.

scroll snap 참고한 포스트: https://blog.naver.com/ym6688/222442685933
유튜브: https://youtu.be/lkTpOHv1Ros

내가 작업할 때는 html 파일과 css 파일을 여러개로 나누어뒀기 때문에 모두 긁어오기는 조금 그래서, 가장 대표적인 코드 세 개만 가져왔다.

html 작업 코드

<!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>Stella Kim 🍒</title>
    <link rel = "stylesheet" href = "./css/main.css">
    <link rel = "stylesheet" href = "./css/scroll.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');
    </style>
</head>
<body>

<div id="container">
    <header id = "header"> 
        <nav class ="menu">
            <ul>
                <li><a href = "index.html" <b>Home</b></a></li>
                <li><a href = "about.html" <b>About</b></a></li>
                <li><a href = "favorites.html" <b>What I love</b></a></li>
                <li><a href = "contact.html" <b>Contact</b></a></li>
            </ul>
        </nav>
    </header> 
  <div class="list">
      <div class="one">
        <span class="profile"><img src="./imgs/me.jpg" width="550px;" height="550px" alt=""/></span> 
        <h3><strong>Hello! I'm Stella.</strong> <br>You can scroll down if you want to see me more!</h3>
      </div>
  </div>

  <div class="list">
      <div class ="two">
          <img class = "me" src ="./imgs/me2.jpg" alt="" width="450px;" height="500px">
          <h3 class ="intext"> <strong>What would I lose if I learn coding?<br>Absoultely nothing!</strong><br><br>
            Hello! I'm Stella Kim. Welcome to my homepage.<br>
            I majored in English and worked as a hotelier in Singapore. <br>
            After I came back to Korea, I was also in the service fields. <br>
            But I don't want to see myself in the same industry in the few years. <br>
            The reason I want to be a fullstack engineer is that <br>
            there is no limits for studying and developing myself! <br>
            Achievement is one of my motivation of my life. <br><br>
            To be a great developer, <br>
            achievement and developing myself constantly <br>
            is the most important thing, I think.
            <br><br>
            For the future junior developer!</h3>
      </div>
  </div>
  
  <div class="list">
      <div class="three">
          <h1><br><br> 💕 💕 💕 </h1>
          <div class = "favorites">
              <div class="lists">
                  <img class = "list_img" src="./imgs/what i love/mypet.jpg" alt="">
                  <p class = "list_text"> 반려견 두부를 포함한<br>모든 강아지! 🐶</p>
              </div>

              <div class="lists">
                  <img class = "list_img" src="./imgs/what i love/coffee.jpg" alt="">
                  <p class = "list_text"> Coffee ☕</p>
              </div>

              <div class="lists">
                  <img class = "list_img" src="./imgs/what i love/walking.jpg" alt="">
                  <p class = "list_text"> 산책도 즐기고 🏃🏻‍♂️</p>
              </div>

              <div class="lists">
                  <img class = "list_img" src="./imgs/what i love/traveling.jpg" alt="">
                  <p class = "list_text"> 여행도 좋아해요! 💕</p>
              </div>
          </div>
      </div>
  </div>

  <div class="list">
      <div class = "four">
          <img class = "contact_img" src ="./imgs/bg.jpg">
          <a href="https://velog.io/@subtitle1" class="ct">Velog</a>
          <a href="mailto:stella.kim.96211@gmail.com" class="ct">Gmail</a>
          <a href="https://github.com/subtitle1" class="ct">Github</a>
      </div>
  </div>
<div>
</body>

css 작업 코드

h3 {
    font-family: 'Pretendard-Thin';
    color: #ffffff;
    text-align: center;
    font-style: italic;
    font-weight: lighter;
    margin-top: 50px;
    font-size: 20px;
}

/* 상단바 */

.menu * {
    display: inline;
}

.menu li {
    margin: 35px;
}

.menu li a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.menu ul {
    padding-left: 0px;
}

.menu {
    font-size: 20px;
    font-style: italic;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
} 

/* page 1 */

.one {
    background-size: cover;
    text-align: center;
    padding-top: 180px;
    padding-bottom: 130px;
}

.profile {
    border-radius: 30%;
    display: inline-block;
    padding: 0.5rem;
    margin-top: 20px;
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgb(255, 255, 255, 0.5);
}

.profile img {
    border-radius: 30%;
}

/* page 2 */

.intext {
    float: right;
    margin-top: 35px;
    padding-left: 50px;
}

/* page 3 */

h1 {
    text-align: center;
}

.lists{
    text-align: center;
    font-family: 'Pretendard-Thin';
    display: block;
    text-align: center;
    font-weight: 400;
    font-family: 'Pretendard-Thin';
    font-size: 18px;
    line-height: 1.5;
    font-style: italic;
}

.list_img {
    width: 300px;
    height: 300px;
    display: block;
    margin: 7vh 5vh;
    margin-bottom: 50px;
}

.favorites {
    display:inline-flex;
    margin-top: 60px;
}

/* page 4 */

.four {
    text-align: center;
    align-items: center;
}

.contact_img {
    width: 100%;
    height: 500px;
    padding-bottom: 60px;
}

.ct {
    margin-top: 80px;
    font-family: 'Roboto Slab', serif;
    text-decoration: none;
    color: white;
    font-size: 50px;
    font-style: italic;
    margin: 35px;
}

css 스크롤 기능 작업 코드

/* 이 부분이 없으면 스크롤 바 두 개가 생성된다 */

body {
    overflow: hidden;
    font-family: 'Roboto Slab', serif;
}

/* Scroll down */

#container{
    width:100%;
    height:100vh; 
    overflow: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

.list{
    width:100%; 
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
}

/* .list:nth-child(1){
    background-color: rgb(0, 0, 0);
    background-size: cover;
    background-attachment: fixed; 
    background-position: center; 
} */

.list:nth-child(2){
    background-color: #4e5a56;
    background-size: cover;
    background-attachment: fixed; 
    background-position: center; 
}

.list:nth-child(3){
    background-color: #9d949e;
    background-size: cover;
    background-attachment: fixed; 
    background-position: center; 
}

.list:nth-child(4){
    background-color: #e0d8cc;
    background-size: cover;
    background-attachment: fixed; 
    background-position: center; 
}

.list:nth-child(5){
    background-color: #8a6e8a;
    background-size: cover;
    background-attachment: fixed; 
    background-position: center; 
}

보안하고 싶은 부분

반응형 미디어로 수정할 것
모바일로 보거나 창을 작게 했을 때 어그러지는 부분들이 있어서, 이 부분은 천천히 수정하고 싶다.
다른 페이지로 넘어갈 때 부드럽게 넘어가는 애니메이션 효과 적용
아무래도 혼자서 검색해 보며 만든 웹사이트라 코드 부분에서도 부족한 부분이 많기 때문에 보완 예정

그래도 누구 도움 없이 혼자 만들어 본 것에 의의를 둔다. 완벽하지는 않지만, 그래도 재미있는 실습이었다!

shclew

이전 포스트

[백준] 10869번: 사칙연산, 자바의 입출력 (with Java)

다음 포스트

[JAVA] 객체 지향 언어, 클래스란?

1개의 댓글

Jiwon

2022년 12월 1일

좋은 자료 감사합니다:)
덕분에 공부하고 있습니다!

답글 달기