블록체인 TIL-2Week-12Day(휴강일)

디오·2023년 3월 24일
0

개인공부

목록 보기
12/28

2023.03.24 <휴강일>

오늘은 처음으로 맞이하는 휴강일이다. 오전에는 이것저것 정리를 하고 청소도하고 멋사에서 제공한 Javascript 기초강의를 다시 한번 보면서 어떤 내용들이 있었는지 보았다. 처음 강의영상을 볼때는 50%도 이해못하고 넘어갔었는데 성현강사님 강의를 듣고 다시 강의영상을 보니 이해되는 부분이 꽤 많았다. 정말 시간이 약인가 보다. 하나씩 다시 생각해보며 듣다보니 이해하고 넘어갈 수 있는 부분도 있었지만 아직 어려운 부분도 존재했다. 그렇게 강의영사을 듣다가 평일에 강의가 끝나고 보통 1~2시에 잠이 들었다보니 하루 평균 7시간 이상 자던 내가 5시간정도로 수면시간이 줄어 피로감이 있었는데 오늘 그 피로감이 몰려온 듯 했다. 점심도 먹지않고 낮잠을 자야겠다는 생각이 들었고, 30분만 자야지 하고 생각했는데 몸이 너무 피곤했는지 일어나기가 너무 힘들어서 1시간을 넘게 자버렸다. 처음에는 이러면 안되는데라는 생각이 먼저 들었는데 민서강사님이 장기적으로 바라보고 건강관리나 컨디션관리를 잘해야한다고 하셨기 때문에 이런 피로감을 이렇게 휴강이 있을때 조금이라도 풀어주는것도 나쁘지 않다고 생각했다. 내가 지금 너무 조바심을 가지고 있는게 아닌가 싶기도 하고, 조바심을 내야하는게 맞다고 생각하기도 하고..
사실 어떤게 맞는 행동인지는 모르겠지만 그때그때 상황에 맞춰서 해나가야하지 않을까 싶다. 오늘은 어제 TIL작성에 적었던 내용처럼 오후에는 성현강사님과 진행하고 있는 개인프로젝트를 Javascript를 이용해 만드는법을 공부했다. 모르는 코드가 워낙 많기 때문에 하나씩 이해해 나가기 위해서 코드를 하나하나 다 찾아보고 정리해 보려고 한다.



✅ 개인프로젝트 준비 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>Document</title>
  </head>
    </html>
  • 여기까지는 기본적으로 작성되는 HTML5. ("body"부분은 따로 작성하겠다.)



<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  • 하단의 코드는 html5에 포함된 css 연결코드이고, 상단 link 코드는 animate를 시계디자인에 적용하기 위해 가져온 링크를 포함하고 연결하는 코드다. 해당 link코드는 둘다 head안에 title밑에 포함되어있다.



<body>
    <main>
      [1번]<div class="time animate__animated animate__fadeInDownBig">Time</div>
      [2번]<div class="quotes">
      [3번]<div class="quotesMsg">Quotes</div>
      [4번]<button class="quotesAddBtn" onclick="onClickAdd()">
          새 명언 추가하기
        </button>
      </div>
      [5번]<div class="newQuotes">
      [6번]<input class="newQuotesInput" type="text" />
      [7번]<button class="newQuotesButton" onclick="onClickRegist()">등 록</button>
      </div>
    </main>
      [8번]<video
      class="bgVideo"
      src="images/background.mp4"
      autoplay
      muted
      loop
</video>
      [9번]<script src="main.js"></script>

  • 1번코드는 애니메이션을 적용하기 위해 div class를 만들어 Time에 적용시켰다.

  • 2번코드는 div class를 만들어 명언으로 크게 묶어주었다.

  • 3번코드는 div class를 만들어 명언Massge로 "Quotes"를 출력해주었다.

  • 4번코드는 button class="quotesAddBtn"로 묶고, onclick 이벤트를 추가하였다.
    div를 클릭하면 onclick 이벤트에 지정된 onClickAdd() 함수를 호출하고,'새 명언 추가하기'라는 메세지를 출력하는 alert 창이 뜬다.

  • 5번코드는 "newQuotesInput"와 "newQuotesButton"를 div class="newQuotes"로 묶었다.

  • 6번코드는 class="newQuotesInput"를 만들고 안에 type="text"를 넣어 글을 입력할 수 있는 창을 만들었다.

  • 7번코드는 4번코드와 마찬가지로 button을 만들어주기 위해 코드를 짰는데 등록버튼을 만들기 위해 onClickRegist() 함수를 호출하고 '등록'을 작성하여 출력될 수 있도록 했다.

  • 8번코드는 메인페이지 background에 영상이 재생될 수 있도록 넣은 코드인데 세부적으로 살펴보면

    • class 속성을 사용하여 "bgVideo"적용.
    • src 속성을 이용해 영상파일의 경로를 지정.
    • autopaly 속성을 이용해 자동으로 재생되도록 설정.
    • muted 속성을 이용해 영상의 소리를 끔.
    • loop 속성을 이용해 영상이 끝나면 반복되도록 설정.

  • 9번코드는 Javascript와 html을 연결하기 위해 작성된 코드이다.



✅ 개인프로젝트 준비 input.scss

@font-face {
  font-family: "Humanbumsuk";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Humanbumsuk.woff2")
    format("woff2");
  font-weight: normal;
  font-style: normal;
}
  • 이 코드는 web font를 적용하기 위해 만든 코드이다.
    • font-family: "Humanbumsuk";를 사용해 해당 font를 지정.
    • src 속성을 사용해 사이트와 링크 연결.
    • font-weight: normal; / font 굵기
    • font-style: normal; / font 디자인
body {
  margin: 0;
  color: rgb(22, 22, 22);
  font-family: "Karla", sans-serif;
}

  • margin: 0; : margin을 지정하지 않아 빈 여백을 채움.(특정 방향을 넣지 않으면 상하좌우 모두 동일하게 적용.

  • color: rgb(22, 22, 22); : 해당 색상을 body안에 모두 적용.

  • font-family: "Karla", sans-serif; : body 전체에 "Karla", sans-serif font적용.

.bgVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

  • bgVideo class.

    • position: fixed; : 해당 속성을 사용해 영상의 위치를 고정.

    • top: 0; 와 left: 0; 을 적용해 영상의 여백을 채움.

    • width: 100vw; : vw를 사용하여 영상을 전체화면에 채웠는데 %를 사용하지 않은 이유는 vw를 사용하면 부모의 영향을 받지않고 뷰포트 기준이므로 어떠한 기기에서도 전체 화면을 꽉채우는 width값을 가질 수 있기때문이다. (참고로 %를 사용하면 부모의 영향을 받기 때문에 상위 요소의 크기에 따라 크기가 결정된다.)

    • height: 100vh; : vh 또한, 부모의 영향을 받지 않기 위해서 사용하였다. 위에 width와 동일한 환경을 만들기 위해 적용.

    • object-fit: cover; : object-fit속성은 bgVideo에 맞게 크기를 조정하기 위해 적용되었다. 여기에 cover을 적용해 요소의 가로나 세로크기에 맞춰 조정하고, 비율을 고정한다. 영상은 개체크기에 맞춰 잘리고, 그 상태로 화면이 가득 채워질때까지 확대된다.

main {
  position: fixed;
  z-index: 2; // 레이어정렬 (z축을 말함) - 3D관점으로 봐야함
  width: 100vw;
  height: 100vh;
  display: flex; // 아래 3가지 요소를 배치시킬것임
  flex-direction: column; // column을 이용해 세로로 정렬
  justify-content: center; //세로방향 기준 가운데로 정렬
  align-items: center; //세로방향 교차축
}

  • position: fixed; : 위와 마찬가지로 main도 해당 속성을 사용해 위치를 고정.

  • z-index: 2; : z-index속성은 위치 지정 요소와, 그 자식 또는 하위 플렉스 아이템의 Z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.(한마디로 z-index 속성을 적용함으로서 z축을 기준으로 시계와 명언을 영상 위로 올리는 기능을 한다.)

  • width: 100vw; / height: 100vh; : 이전에 설명했던 내용과 동일하게 부모의 영향을 받지 않으며 넓이와 높이를 전체 화면에 채우기 위해 사용.

  • display: flex; : 이 속성을 이용하여 아이템들을 가로로 배치한다.

    • flex-direction: column; : display: flex;가 부모로 설정이 되어있어야 사용할 수 있는 속성이다. 부모속성을 기준으로 이 속성을 사용하지 않으면 기본값은 가로로 정렬된다. 단, flex-direction: 속성을 사용하고 column; 값을 입력했기 때문에 가로정렬이 세로정렬로 변경된다.

    • justify-content: center; : 위에 flex-direction: column을 적용해 세로형태로 정렬시켰다면 justify-content 속성을 적용해 가로축 기준으로 좌우정렬을 하고, center값을 입력하여 요소들을 컨테이너의 중앙으로 정렬시키는 역할을 한다.

    • align-items: center; : justify-content와 반대되는 개념인데 justify-content가 가로축 기준-중심축으로 이동시켰다면 align-items: center는 그 기준에서 다시 세로축 기준-교차축으로 이동시킨다.

❗display: flex;
  ❗flex-direction: column; 
  ❗justify-content: center;
  ❗align-items: center;
}

💠 이 4가지 속성을 이용하여 원하는 부분을 중앙정렬 시킬 수 있다.



.time {
  font-family: Humanbumsuk;
  animation-delay: 2s;
  font-size: 80px;
  font-style: italic;
  color: whitesmoke;
  text-shadow: 100vh;
  border: 5px solid whitesmoke;
  border-radius: 50%;
  font-weight: 500;
  padding: 50px;
  width: 310px;
  box-shadow: 5px 8px 10px 1px rgb(255, 255, 255);
}

  • font-family: Humanbumsuk; : input.scss 가장 상단에 작성했던 font style을 .time에 적용.

  • animation-delay: 2s; : animation-delay라는 명칭의 animation을 2초후 적용되도록 설정.

  • font-size: 80px; : font-size를 80px로 적용.

  • font-style: italic; : .time에 작성된 font를 italic값을 주어 기울임.

  • color: whitesmoke; : whitesmoke라는 색상을 font에 적용.

  • text-shadow: 100vh; : .time에 있는 text에 100vh의 그림자효과를 적용.

  • border: 5px solid whitesmoke; : 시계 font 주변에 테두리를 만들고 굵기는 5px, 테두리 스타일을 solid, 테투리 색상을 whitesmoke를 적용.

  • border-radius: 50%; : border-radius를 50% 적용하여 테두리를 둥글게 만들어줌.

  • font-weight: 500; : font 굵기를 500으로 적용.( 이 부분은 변경하여도 변화가 없음. 확인필요.)

  • padding: 50px; : content와 border 사이의 공간을 50px로 키워 border의 형태를 키움.

  • width: 310px; : border 테두리 넓이를 가로축으로 310px만큼 늘림.

  • box-shadow: 5px 8px 10px 1px rgb(255, 255, 255); : 테두리에 우측,아래,명암,spread,색상 기준으로 각각 위 px만큼 적용함.



.quotes {
  position: relative;
  font-size: 40px;

  • position: relative; : 요소를 자기 자신을 기준으로 배치. / (부모)

  • font-size: 40px; : quotes(명언) font-size 40px로 설정.



.quotesAddBtn {
    display: none;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
  }

  • display: none; : 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하기위해 적용. (새 명언 추가하기 text 마우스커서를 가져다 대지 않으면 보이지 않게 하기위해 적용.)

  • position: absolute; : 위에 .quotes에 position: relative; 속성을 적용해 부모로 만들어주고, position: absolute;를 quotesAddBtn에 적용해 자식으로 만듬.

  • top: 50%; / right: 50%; : 이 두가지 속성을 적용해 quotesAddBtn를 text 중앙에 위치하도록 적용.

  • transform: translate(50%, -50%);

    • transform : 변환함수를 프로퍼티값으로 쉼표없이 나열한다. 나열순서에 따라 차례대로 효과가 적용된다.

    • translate(50%, -50%) : translate (x, y) 함수는 요소를 왼쪽에서부터 x거리(距離), 위에서부터 x 거리만큼 상대적으로 위치를 정하거나, 이동 및 재배치를 지정한다. Y 방향의 거리는 생략할 수 있지만, 이 경우의 Y방향의 거리는 "0"이 된다.



 &:hover {
    .quotesAddBtn {
      display: inline-block;
    }
  }
}

  • &:hover : hover는 html에서 요소에 마우스를 올렸을 때 반응하게 하는 css요소다.

  • display: inline-block; : display: inline-block; 속성을 넣어줌으로서 quotesAddBtn이 quotes와 같은줄에 있도록 적용할 수 있다.



.newQuotes {
  display: none;
}
  • display: none; : 화면 상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하기위해 적용.(newQuotes class에 있는 모든 부분이 노출되지 않도록 적용)



🌜하루를 마치며..

개인프로젝트 강의에 진행되는 내용을 하나씩 코드리뷰해보며 알게된 것들이 많다. 물론 html과 scss의 경우 어느정도 이전 성현강사님 강의서 들었던 내용이기 때문에 반복학습으로 인해 익숙한 부분도 영향이 있을것이다. 내일 정리할 부분인 javascript는 전혀 익숙하지 않은 부분이 많아서 코드리뷰를 하며 사용되는 이유와 구조를 정확하게 파악하는게 중요할것이라고 생각한다. 확실한건 이게 왜 이렇게 작성이 되었고, 코드가 하나씩 쌓여가는 과정을 내가 직접 그릴수 있는 정도의 수준까지 올라가야하지 않을까 라는 생각을 하게된다.

profile
디오
개발자가 되어가는 개린이"
이전 포스트

블록체인 TIL-6Week-42Day(일요일)

다음 포스트

블록체인 TIL-7Week-48Day(토요일)

0개의 댓글