본문 바로가기
프로젝트 & 실습/WEB Project

포트폴리오 화면 만들기

by hhyyyjun 2023. 1. 5.

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>포트폴리오</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/portfolio.css" />
  </head>
  <body>
    <div>
      <div id="blurheader"></div>
      <section id="wrap">
        <header><span id="darkMode" class="whiteFont">BLUE</span></header>
        <div id="smallCircle" class="whiteBackground"></div>
        <div class="fontsize15rem whiteFont bold subject">Hi,</div>
        <div class="fontsize10rem whiteFont bold subject line80">
          IM HYANG <br />
          JUN
        </div>
        <div id="bigCircle" class="whiteBackground"></div>
      </section>
      <section>
        <div class="whiteFont fontsize5rem centerTextBox10 bold">
          HYANGJUN'S PORTFOLIO
        </div>
        <div
          class="fontsize2rem bold centerTextBox10 whiteBackground whiteFont"
        >
          ABOUT ME
        </div>
        <div>
          <p class="fontsize2rem whiteFont bold subject">SKILLS</p>
          <div class="flexAlignStart">
            <div class="whiteboxWidth whiteBox17rem"></div>
            <div>
              <div class="whiteboxWidth whiteBox7rem"></div>
              <div class="whiteboxWidth whiteBox13rem"></div>
            </div>
            <div class="whiteboxWidth whiteBox13rem"></div>
            <div class="whiteboxWidth whiteBox20rem"></div>
          </div>
        </div>
      </section>
      <section class="flexCenter">
        <div id="pojectBox" class="whiteBackground flexCenter whiteFont">
          PROJECT 01
        </div>
      </section>
      <section>
        <div class="whiteFont fontsize5rem bold subject contact">
          Contact Me
        </div>
        <div class="footer whiteBackground"></div>
      </section>
    </div>

    <script>
      window.onscroll = function () {
        if (
          document.body.scrollTop > 48 ||
          document.documentElement.scrollTop
        ) {
          document.getElementById("blurheader").style.display = "block";
        } else {
          document.getElementById("blurheader").style.display = "none";
        }
      };

      window.onload = function () {
        console.log(
          document.getElementById("bigCircle").getAttribute("data-id")
        );

        console.log(document.getElementById("bigCircle").getAttribute("class"));

        document.documentElement.setAttribute("color-theme", "yellow");
        //최상위 root에 이 속성을 셋팅
      };

      let darkMode = document.getElementById("darkMode");

      darkMode.addEventListener("click", (event) => {
        //e ===> 이벤트가 일어난 객체
        //e.target ==> 이벤트가 일어난 객체를 선택
        //e.target.innerText => 일어난 개체를 선택해서 innerText 속성을 선택

        if (event.target.innerText === "BLUE") { //텍스트가 BLUE와 일치하다면
          document.documentElement.setAttribute("color-theme", "blue"); //css 컬러테마를 blue로 변경
          event.target.innerText = "YELLOW"; //텍스트를 YELLOW로 변경
        } else {
          document.documentElement.setAttribute("color-theme", "yellow");
          event.target.innerText = "BLUE";
        }
      });
    </script>
  </body>
</html>

| 공통 css

CSS :root 가상 클래스는 문서 트리의 루트 요소를 선택한다. HTML의 루트 요소는 <html> 요소이므로, :root의 명시도가 더 높다는 점을 제외하면 html 선택자와 똑같다

:root[color-theme="yellow"] {
  --boxColor: rgb(238, 172, 17);
}

:root[color-theme="blue"] {
  --boxColor: #2ab1f5;
}

.bold {
  font-weight: bold;
}

.whiteFont {
  color: #fff;
}
.whiteBackground {
  background-color: var(--boxColor);
}

.fontsize2rem {
  font-size: 2rem;
}

.fontsize5rem {
  font-size: 5rem;
}

.fontsize7rem {
  font-size: 7rem;
}

.fontsize8rem {
  font-size: 8rem;
}

.fontsize10rem {
  font-size: 10rem;
}

.fontsize15rem {
  font-size: 15rem;
}

.line80 {
  line-height: 80%;
}

.whiteboxWidth {
  width: 20rem;
  background-color: #fff;
  border-radius: 1rem;
}

.whiteBox7rem {
  height: 7rem;
}

.whiteBox13rem {
  height: 13rem;
}

.whiteBox17rem {
  height: 17rem;
}

.whiteBox20rem {
  height: 20rem;
}

.centerTextBox10 {
  padding-top: 1.5rem;
  width: 100%;
  height: 15rem;
  text-align: center;
}

.subject {
  padding-top: 2rem;
  padding-left: 6rem;
}

| 포토폴리오 css

:root[color-theme="yellow"] {
  --background: #f0e10a;
  /*const background = #ffb6ea;*/
  --fontColor: #fff;
}

:root[color-theme="blue"] {
  --background: rgb(71, 109, 212);
  --fontColor: #fff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

header {
  width: 100%;
  height: 3rem;
  text-align: right;
  padding-top: 1rem;
  padding-right: 3rem;
}

header > span {
  cursor: pointer;
}

section {
  width: 100%;
  height: 100vh;
  background-color: var(--background);
}

#smallCircle {
  position: absolute;
  width: 32rem;
  height: 32rem;
  top: -10rem;
  left: -10rem;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #fff;
}

#bigCircle {
  position: absolute;
  width: 46rem;
  height: 46rem;
  bottom: -5rem;
  right: -18rem;
  opacity: 0.2;
  border-radius: 50%;
  background-color: #fff;
}

.flexAlignStart {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexAlignStart > div {
  margin-left: 4rem;
}

.flexAlignStart > div > div {
  margin-bottom: 1rem;
}

#pojectBox {
  width: 100%;
  height: 90vh;
  font-size: 3rem;
  font-weight: bold;
  color: var(--fontColor);
}

#aboutme {
  color: var(--fontColor);
}

.contact {
  height: 70%;
}

.footer {
  height: 30%;
}

#blurheader {
  z-index: 100;
  width: 100%;
  height: 3rem;
  background-color: #fff;
  opacity: 0.4;
  position: fixed;
  display: none;
}

결과

영상 확인 : https://blog.naver.com/yyhhhjun/222778957592

 

프론트 엔드 day 21 - Git 업로드

| HTML | 공통 css CSS :root 가상 클래스는 문서 트리의 루트 요소를 선택한다. HTML의 루트 ...

blog.naver.com

 

'프로젝트 & 실습 > WEB Project' 카테고리의 다른 글

[프로젝트] JavaScript를 통한 중고나라 홈페이지 제작  (1) 2022.12.31
[프로젝트] 전주한옥마을 페이지 퍼블리싱  (0) 2022.12.31
[실습] 페이지 따라 만들기  (0) 2022.12.31
[실습] table 태그를 이용한 이력서 만들기  (0) 2022.12.31

관련글

댓글

티스토리툴바