[35일차] 웹 페이지 제작

💚2022-08-08💚

https://thebook.io/080313/part04/ch13/

코딩 자율학습 HTML + CSS + 자바스크립트: 13장 HTML+CSS+자바스크립트로 완성하는 최종 프로젝트

thebook.io

https://github.com/GyuWonLee/homepage.git

GitHub - GyuWonLee/homepage

Contribute to GyuWonLee/homepage development by creating an account on GitHub.

github.com

index.html

<!DOCTYPE html>
<html lang="zxx">
<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>Final Project</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="style.css">
<style>
  /* width */
  ::-webkit-scrollbar {
    width: 20px;
    border-radius: 10px;
    background: #000000;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    background: #BDBDBD;
    border-radius: 10px;

  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #ED4848;
    border-radius: 10px;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #ED4848;
    border-radius: 10px;

  }

  *{
    font-family: 'KOTRA_BOLD-Bold';
  }

  @font-face {
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>

</head>
<body>
  <!-- header -->
  <header>
    <div class="container">
      <h1>
        <button data-animation-scroll="true" data-target="#main">BLOG</button>
      </h1>
      <nav>
        <ul>
          <li>
            <button data-animation-scroll="true" data-target="#about">
              About
            </button>
          </li>
          <li>
            <button data-animation-scroll="true" data-target="#features">
              Features
            </button>
          </li>
          <li>
            <button data-animation-scroll="true" data-target="#portfolio">
              Portfolio
            </button>
          </li>
          <li>
            <button data-animation-scroll="true" data-target="#contact">
              Contact
            </button>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <!-- //end header -->
  <!-- main -->
  <main id="main">
    <div class="container">
      <h4>Welcome</h4>
      <h2 class="active">I`M A <span></span></h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolor quas nulla unde ea officiis?</p>
      <button class="download">DOWNLOAD CV</button>
      <button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>
    </div>
  </main>
  <!-- //end Main -->
  <!-- About Me -->
  <section id="about" class="about">
    <div class="container">
      <div class="title">
        <h4>Who Am I</h4>
        <h2>About Me</h2>
      </div>
      <div class="about-self">
        <div class="left">
          <img src="images/me_alone.jpg" alt="">
        </div>
        <div class="right">
          <h3>Hello, <strong>I`m Sucoding</strong></h3>
          <p>I`m Web Publisher And Web Front-End Developer.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe veritatis aperiam accusantium.</p>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit praesentium doloremque quos quis est officiis.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem, omnis quibusdam.</p>
          <div class="social">
            <a href="#">
              <i class="fa-brands fa-facebook"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-instagram"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-twitch"></i>
            </a>
            <a href="#">
              <i class="fa-brands fa-youtube"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- end About Me -->
  <!-- What I Do -->
  <section id="features" class="do">
    <div class="container">
      <div class="title">
        <h4>Features</h4>
        <h2>What I Do</h2>
      </div>
      <div class="do-me">
        <div class="do-inner">
          <div class="icon">
            <i class="fa-brands fa-html5"></i>
          </div>
          <div class="content">
            <h3>HTML5</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
          </div>
        </div>
        <div class="do-inner">
          <div class="icon">
            <i class="fa-brands fa-css3-alt"></i>
          </div>
          <div class="content">
            <h3>CSS3</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
          </div>
        </div>
        <div class="do-inner">
          <div class="icon">
            <i class="fa-brands fa-bootstrap"></i>
          </div>
          <div class="content">
            <h3>BootStrap v5.0</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo culpa magni laboriosam sit excepturi quibusdam adipisci, vero debitis?</p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- //end What I Do -->
  <!-- Background -->
  <div class="bg"></div>
  <!-- //end Background-->
  <!-- PortFolio -->
  <section id="portfolio" class="portfolio">
    <div class="container">
      <div class="title">
        <h4>PORTFOLIOBACK</h4>
        <h2>PortFolio</h2>
      </div>
      <div class="portfolio-me">
        <div class="portfolio-inner">
          <img src="images/mock1.png" alt="">
          <strong>BRANDING</strong>
          <h3>Package Design</h3>
        </div>
        <div class="portfolio-inner">
          <img src="images/mock2.png" alt="">
          <strong>DEVELOPMENT</strong>
          <h3>Tablet App Dev</h3>
        </div>
        <div class="portfolio-inner">
          <img src="images/mock3.png" alt="">
          <strong>MARKETING</strong>
          <h3>Coka Cola </h3>
        </div>
        <div class="portfolio-inner">
          <img src="images/mock4.png" alt="">
          <strong>APP</strong>
          <h3>FaceBook Clone</h3>
        </div>
        <div class="portfolio-inner">
          <img src="images/mock5.png" alt="">
          <strong>APP</strong>
          <h3>Netflix Clone</h3>
        </div>
        <div class="portfolio-inner">
          <img src="images/mock6.png" alt="">
          <strong>WEB</strong>
          <h3>FirmBee Web</h3>
        </div>
      </div>
    </div>
  </section>
  <!-- //end PortFolio -->
   <!-- Contact With Me -->
   <section id="contact" class="contact">
    <div class="container">
      <div class="title">
        <h4>CONTACT</h4>
        <h2>Contact With Me</h2>
      </div>
      <div class="contact-me">
        <div class="left">
          <div class="card">
            <div class="icon">
              <i class="fa-solid fa-phone-volume"></i>
            </div>
            <div class="info-text">
              <h3>phone</h3>
              <p>010-2222-1111</p>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <i class="fa-solid fa-envelope-open-text"></i>
            </div>
            <div class="info-text">
              <h3>email</h3>
              <p>sucoding@naver.com</p>
            </div>
          </div>
          <div class="card">
            <div class="icon">
              <i class="fa-solid fa-location-crosshairs"></i>
            </div>
            <div class="info-text">
              <h3>address</h3>
              <p>Samseong-ro, Gangnam-gu, Seoul, Republic of Korea</p>
            </div>
          </div>
        </div>
        <div class="right">
          <form action="#">
            <div class="form-group">
              <label for="name">name</label>
              <input type="text" id="name">
            </div>
            <div class="form-group">
              <label for="email">email</label>
              <input type="text" id="email">
            </div>
            <div class="form-group">
              <label for="msg">message</label>
              <textarea id="msg"></textarea>
            </div>
            <button>send</button>
          </form>
        </div>
      </div>
    </div>
  </section>
  <!-- end Contact With Me -->
  <!-- script 태그는 수정하지 않습니다. -->
  <script src="script.js"></script>
</body>
</html>

script.js

/* text_iife.js */
// 텍스트 작성과 삭제 즉시 실행 함수
(function(){
  const spanEl = document.querySelector("main h2 span");
  const txtArr = ['Web Publisher', 'Front-End Developer', 'Web UI Designer', 'UX Designer', 'Back-End Developer'];
  let index = 0;
  let currentTxt = txtArr[index].split("");
  function writeTxt(){
    spanEl.textContent  += currentTxt.shift();
    if(currentTxt.length !== 0){
      setTimeout(writeTxt, Math.floor(Math.random() * 100));
    }else{
      currentTxt = spanEl.textContent.split("");
      setTimeout(deleteTxt, 3000);
    }
  }
  function deleteTxt(){
    currentTxt.pop();
    spanEl.textContent = currentTxt.join("");
    if(currentTxt.length !== 0){
      setTimeout(deleteTxt, Math.floor(Math.random() * 100))
    }else{
      index = (index + 1) % txtArr.length;
      currentTxt = txtArr[index].split("");
      writeTxt();
    }
  }
  writeTxt();
})();
/* end text_iife.js */

/* scroll_request.js */
/* 수직 스크롤이 발생하면 header 태그에 active 클래스 추가 및 삭제 */
const headerEl = document.querySelector("header");
window.addEventListener('scroll', function(){
  requestAnimationFrame(scrollCheck);
});
function scrollCheck(){
  let browerScrollY = window.scrollY ? window.scrollY : window.pageYOffset;
  if(browerScrollY > 0){
    headerEl.classList.add("active");
  }else{
    headerEl.classList.remove("active");
  }
}
/* end scroll_request.js */

/* move.js */
/* 애니메이션 스크롤 이동 */
const animationMove = function(selector){
  // ① selector 매개변로 이동할 대상 요소 노드 가져오기
  const targetEl = document.querySelector(selector);
  // ② 현재 브라우저의 스크롤 정보(y 값)
  const browserScrollY = window.pageYOffset;
  // ③ 이동할 대상의 위치(y 값)
  const targetScorllY = targetEl.getBoundingClientRect().top + browserScrollY;
  // ④ 스크롤 이동
  window.scrollTo({ top: targetScorllY, behavior: 'smooth' });
};
// 스크롤 이벤트 연결하기
const scollMoveEl = document.querySelectorAll("[data-animation-scroll='true']");
for(let i = 0; i < scollMoveEl.length; i++){
  scollMoveEl[i].addEventListener('click', function(e){
    const target = this.dataset.target;
    animationMove(target);
  });
}
/* End move.js */

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&family=Varela+Round&display=swap');
/* header.css */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'GangwonEduPowerExtraBoldA';
}

* {
  font-family: 'ONE-Mobile-POP';
}
a, a:link, a:visited{
  color:inherit;
  text-decoration:none;
}
li{
  list-style:none;
}
.container{
  width:1140px;
  margin:0 auto;
}
header{
  position:fixed;
  color:white;
  top:0;
  z-index:1;
  width:100%;
  padding:1rem;
}
header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
}
header nav ul{
  display:flex;
}
header nav ul li{
  padding:10px;
}
header button{
  background: transparent;
  border:0;
  cursor: pointer;
  color:white;
}
header h1 button{
  font-size: 2rem;
  font-weight: bold;
}
header nav ul li button{
  font-size: 1.2rem;
}
/* End header.css */
/* main.css */
main{
  width:100%;
  height:100vh;
  color:white;
  background:linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('images/me.jpg') center center;
  background-size:cover;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
main h4{
  font-size:2rem;
}
main h2{
  font-size:3.5rem;
  margin:2rem 0;
  letter-spacing:3px;
  font-family:'Varela Round', sans-serif; /* 웹 폰트 추가 */
}
main p{
  max-width:500px;
  margin:0 auto;
  font-size:1.25rem;
}
main button.download{
  background-color:transparent;
  border:3px solid white;
  border-radius:20px;
  padding:1rem 2rem;
  margin-top:3rem;
  color:white;
  font-weight:bold;
  cursor:pointer;
}
main button.mouse{
  background-color:transparent;
  border:none;
  color:white;
  font-size:2rem;
  position:absolute;
  bottom:1rem;
  left:50%;
  transform:translateX(-50%);
  animation:upDown 1s ease-in-out infinite;
  cursor:pointer;
}
@keyframes upDown{
  0%{
    bottom:1rem;
  }
  50%{
    bottom:1.5rem;
  }
  100%{
    bottom:1rem;
  }
}
main h2 span::after{
  content:"";
  height:40px;
  width:3px;
  background-color:#fff;
  display:inline-block;
  animation: blink .7s ease-in-out infinite;
}
@keyframes blink {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

/* about_me.css */
section{
  font-family:'Poppins', sans-serif;
  padding:5rem 0;
}
section:nth-child(2n){
  background-color:#f8f8f8;
}
section .title{
  margin-bottom:3rem;
}
section .title h4{
  font-size:1.35rem;
  color:#ed4848;
  position:relative;
}
section .title h2{
  font-size:3.5rem;
}
section .title p{
  font-size:1.15rem;
}
/* float 속성 해제 */
section .about-self::after{
  content:"";
  clear:both;
  display:block;
}
/* 본문 너비 절반 지정 & 왼쪽 배치 */
section .about-self .left{
  width:50%;
  float:left;
}
/* 이미지 크기가 부모 영역을 넘지 않도록 부모 영역의 최대 크기로 지정 */
section .about-self .left img{
  max-width:100%;
}
/* 본문 너비 절반 지정 & 오른쪽 배치 */
section .about-self .right{
  width:50%;
  float:left;
  padding:0 2rem;
}
/* 본문 오른쪽 h3 태그의 글자 크기와 여백 지정 */
section .about-self .right h3{
  font-size:2.25rem;
  margin-bottom:1rem;
}
/* 본문 오른쪽 h3 태그의 strong 태그 색상 강조 */
section .about-self .right h3 strong{
  color:#ed4848;
}
/* 본문 오른쪽 p 태그의 크기와 여백 지정 */
section .about-self .right p{
  font-size:1.15rem;
  margin:1rem 0;
}
/* 본문 오른쪽의 아이콘 폰트 크기와 여백 지정 */
section .about-self .right .social a{
  font-size:2.5rem;
  margin-right:0.2rem;
}
/* End about_me.css */
/* what_i_do.css */
/* float 속성 해제*/
section .do-me::after{
  content:"";
  display:block;
  clear:both;
}
/* 사각형 크기와 간격, 내부 여백 설정 */
section .do-me .do-inner{
  background-color:#fff;
  width:30%;
  padding:2rem;
  float:left;
  margin-right:5%;
  cursor:pointer;
}
/* 마지막 사각형의 외부 여백 설정 */
section .do-me .do-inner:last-child{
  margin-right:0;
}
/* 아이콘 폰트 크기와 색상 */
section .do-me .do-inner .icon i{
  font-size:2.5rem;
  color:#ff6a6a;
}
/* HTML5, CSS3, BootStrap v5.0 텍스트 크기와 간격 */
section .do-me .do-inner .content h3{
  font-size:2rem;
  margin:1rem 0;
}
/* 사각형 텍스트 크기 */
section .do-me .do-inner .content p{
  font-size:1.15rem;
}
/* do-inner 클래스에 마우스를 올리면 배경색과 텍스트 색상 변경 */
section .do-me .do-inner:hover{
  background-color:lightcoral;
  color:white;
}
/* do-inner 클래스에 마우스를 올리면 아이콘 폰트 색상 변경 */
section .do-me .do-inner:hover i{
  color:white;
}
/* End what_i_do.css */
/* background.css */
.bg{
  background:url('./images/background.jpg') center center;
  background-size:cover;
  background-attachment:fixed;
  height:650px;
}
/* End background.css */
/* portfolio.css */
/* clear 속성으로 float 속성값 해제*/
section.portfolio::after{
  content:"";
  display:block;
  clear:both;
}
/* portfolio-inner 사각형 꾸미기 */
section.portfolio .portfolio-inner{
  width:30%;
  margin-right:5%;
  padding:1rem 1rem 1.5rem 1rem;
  float:left;
  background-color:#f8f8f8;
  border:1px solid #ccc;
  margin-bottom:3rem;
}
/* 3번째마다 margin-right 0 적용 */
section.portfolio .portfolio-inner:nth-child(3n){
   margin-right:0;
}
/* 이미지의 크기가 부모 요소를 넘지 않도록 100%로 지정 */
section.portfolio .portfolio-inner img{
  width:100%;
  display:block;
}
/* strong 태그 색상과 간격 */
section.portfolio .portfolio-inner strong{
  color:#ff6a6a;
  margin:0.5rem 0;
  display:block;
}
/* h3 태그 색상과 간격 */
section.portfolio .portfolio-inner h3{
  font-size:1.75rem;
}
/* End portfolio.css */
/* contact_with_me.css */

section.contact .contact-me::after{
  content:"";
  display:block;
  clear:both;
}
section.contact .contact-me .left{
  width:30%;
  float:left;
}
section.contact .contact-me .right{
  float:left;
  width:65%;
  margin-left:5%;
}
section.contact .contact-me .left .card{
  border:1px solid #ccc;
  padding:1rem;
  display:flex;
  align-items:center;
  margin-bottom:1.25rem;
}
section.contact .contact-me .left .card .icon i{
  font-size:2rem;
  margin-right:15px;
}
section.contact .contact-me .right{
  float:left;
  width:65%;
  margin-left:5%;
  margin-bottom:2rem;
  border:1px solid #ccc;
  padding:1rem;
}
/* form-group 사이 간격 지정 */
section.contact .contact-me .right .form-group{
  margin-bottom:1.25rem;
}
/* label 태그가 인라인 성격이어서 외부 여백을 적용하기 위해 block으로 변경 */
section.contact .contact-me .right .form-group label{
  display:block;
  margin-bottom:0.85rem;
}
/* input 요소 꾸미기 */
section.contact .contact-me .right .form-group input{
  padding:0.625rem;
  width:100%;
  outline:none;
  border:1px solid #ccc;
  border-radius:10px;
}
/* :focus 가상 클래스 선택자로 입력 요소에 커서가 활성화되면 파란색 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group input:focus{
  border:1px solid #719ECE;
  box-shadow:0 0 10px #719ECE;
}
/* textarea 요소 꾸미기 */
section.contact .contact-me .right .form-group textarea{
  height:300px;
  width:100%;
  resize:none;
  border:1px solid #ccc;
  border-radius:10px;
}
/* textarea 요소에 커서 활성화가 되면 파란색 테두리와 그림자 효과 추가 */
section.contact .contact-me .right .form-group textarea:focus{
  outline:none;
  border:1px solid #719ECE;
  box-shadow:0 0 10px #719ECE;
}
/* 버튼 요소 꾸미기 */
section.contact .contact-me .right button{
  width:100%;
  padding:1rem;
  background-color:#ED4848;
  border:none;
  color:white;
}

/* End contact_with_me.css */
/* media.css */
@media screen and (max-width: 1140px){

  /* 메인 container 기준 1140 -> 992px */
  main .container{
    width: 992px;
  }

  /* 섹션 container 기준 1140 -> 600px */
  section .container{
    width:600px;
  }

  /* About me 영역 왼쪽을 너비를 50% -> 100% 변경 */
  section .about-self .left{
    width:100%;
    margin-bottom: 1.5rem;
  }
  /* About me 영역 오른쪽 너비를 50% -> 100% 변경 */
  section  .about-self .right{
    width:100%;
    padding:0;
  }

  /* What I Do 영역의 콘텐츠 박스의 너비를 30% -> 48% 변경 */
  section .do-me .do-inner{
    width:48%;
    margin-bottom: 1.5rem;
    margin-right: 0;
  }

  section .do-me .do-inner:nth-child(2n+1){
    margin-right:4%; /* 1, 3, 5...번째 본문 사각형에 margin-right 4% 적용 */
  }

  /* PortFolio 영역의 콘텐츠 박스 너비를 30% ->  48% 변경 */
  section .portfolio-me .portfolio-inner{
    width:48%;
    margin-right: 0;
  }

  section .portfolio-me .portfolio-inner:nth-child(2n+1){
    margin-right:4%;
  }

  /* Contact With Me 영역 */
  section.contact .contact-me .left{
    width:100%; /* 너비 변경 30% -> 100% */
  }

  section.contact .contact-me .right{
    width:100%;/* 너비 변경 65% -> 100% */
    margin-left: 0; /* margin 초기화 */

  }
}

@media (max-width: 992px){
  html{
    font-size: 14px;
  }

  /* 메인 영역 container 기준 너비 변경 */
  main .container{
    width: 768px; /* 992px -> 768px */
  }

  /* PortFolio 영역 */
  section .portfolio-me .portfolio-inner{
    width:100%; /* 48% -> 100% 변경 */
  }
}

@media (max-width: 768px){
  html{
    font-size: 13px;
  }

  /* 메인 영역 container 기준 너비 변경 */
  main .container{
    width: 576px; /* 768px -> 576px */
  }

  section .container{
    width:400px; /* 600px -> 400px */
  }

  section .do-me .do-inner{
    width:100%; /* 48% -> 100% */
    margin-right: 0; /* margin 초기화 */
  }
}

@media (max-width: 576px){

  html{
    font-size: 12px;
  }

  main .container{
    width: 400px; /* 576px -> 400px */
  }

  section .container{
    width:360px; /* 400px -> 360px */
  }
}

@media (max-width: 400px){

  html{
    font-size: 11px;
  }
  main .container{
    width: 320px;/* 400px -> 320px */
  }

  main h4{
    font-size: 1.5rem;
  }
  section .container{
    width: 320px;/* 360px -> 320px */
  }
  section .title h2{
    font-size: 3rem; /* 3.5rem -> 3rem */
  }
}
/* End media.css */
header.active{
  background-color:rgba(0,0,0);
  animation:fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn{
  0%{
    opacity:0;
  }
  100%{
    opacity:1;
  }
}

'IT > HTML' 카테고리의 다른 글

[34일차] 10장 윈도우와 브라우저 관련 객체 (0)	2022.08.05
[34일차] 9장 이벤트 기초 및 활용 (0)	2022.08.05
[34일차] 8장 HTML DOM과 Document (0)	2022.08.05
[33일차] 7장 자바스크립트 코어 객체와 배열 (0)	2022.08.04
[33일차] js02 (0)	2022.08.04

blog

노력하는 개발자

[35일차] 웹 페이지 제작

💚2022-08-08💚

'IT > HTML' 카테고리의 다른 글

댓글

티스토리툴바

[35일차] 웹 페이지 제작

💚2022-08-08💚

'IT > HTML' 카테고리의 다른 글

관련글

댓글

티스토리툴바