6월7일15일차 - hover, 가상요소선택자 테두리 구현, 포토샵

시안을 만드는 법에 대해서 간단하게나마 알게 되었습니다.

현장에서 일어나는 일이라면 뭐든 들어 본 적이 있는 것 하고 없는 것은 차이가 클 것 같습니다.

[수업 중 구현한 사이트 주소입니다.]

 

[복습을 위해서 이전 시간에 배운 sticky 와 스크롤 이동 button을 추가로 구현했습니다.]

---

포토샵 세팅 방법
화면사이즈 1900px > 내용 1200px
가이드라인이 중요합니다. 라인을 1px도 틀리지 않고 정확하게 합니다.
강약을 조절합니다. text, 그림(배경)
공간은 최대한 많이 줍니다. 많은 사이트를 참고하고 익숙해진 최적의 위치를 찾아갑니다.
font는 노트산스로 통일합니다. (폰트 사이즈와 두께만으로 조절합니다. 폰트 색상은 반드시 검은색.)
이상한 배경을 넣지 않습니다. (이미지나 흰 배경으로 둡니다.) 
연한 회색 배경으로 구분합니다.

그리드시스템을 검색하여 활용합니다.
12colurm 안에서(1, 2, 3, 4, 6, 12구획으로) 만들어 나갑니다.

 

세팅
edit > preferences > general(ctrl + k) > Use Legacy Free Transform 체크, Use Legacy "New Document" Interface 체크 (옛날 방식으로 하기)
workspace > Open documents as tabs 체크해제합니다.
units & ruleres > rulers, type : pixels > screen resolution 72pixels 로 설정합니다. 

새파일(ctrl + n) 
width 1200
height 4000 작업 중에 계속 바뀝니다.
resolution 72
rgb color 8 bit

ctrl + r 로 ruler 나오도록 설정합니다.
도구메뉴, layers, character 만 이용합니다.

view > grid > new guide layout > number 12 > gutter 30px 로 격자 가이드라인을 만듭니다. > 한 가운데 세로 격자를 하나 추가합니다.
image > canvas size > width 1900 > anchor 위 중앙

구글웹폰트 무조건 노토산스를 받습니다. 
download family > 압축 풀기 > 폰트 우클릭 > 설치
character > noto sans kr, light, 12px, 100%, sharp

격자로 시안을 만들고 블럭안에 이미지를 넣습니다.
이미지를 넣는 방법은 블럭과 이미지를 겹쳐 놓은 뒤, 

alt를 누른 채로 레이어 하단에 마우스 포인터를 놓으면 겹쳐지는 부분만 나타납니다.

---

        letter-spacing: 1em;
폰트사이즈의 1배 만큼 글자 간격을 띄웁니다.

---

한글 자간은 붙여서 쓰는게 이쁘게 나옵니다.
      .hover01 p {
        letter-spacing: -0.025em;
}

---

큰 이미지를 써야 하는 이유는 반응형을 고려해야 하기 때문입니다.
화면 크기에 따라서 변화하는 이미지가 열화되는 것을 막기 위함입니다.
f12 > dimensions 에서 찾는 기종을 선택할 수 있습니다.

---

hover 로 추가 정보 띄우기
box를 만들어 absolute로 겹쳐주는 방법입니다.
          <img src="../img/lesedilarona01.jpg" alt="" />
          <div class="box">
              <a href="">HOVER</a>
          </div>

넘치는 부분을 없애도록 해주고
 .hover01 .container figure {
        overflow: hidden;
      }
넓이를 조절합니다. width: 0; 로 보이지 않게 숨기고,
      .hover01 .container figure .box {
      width: 0;
      opacity: 0;      

    }
hover되었을 때 width: 100px; 이 되면서 나타나게 됩니다.
      .hover01 .container figure:hover .box {
        width: 100px;
        opacity: 1;
      }

---

텍스트가 박스보다 작아져 자동으로 일어나는 줄바꿈을 막는 기능은 white-space: nowrap; 입니다.
width을 변화시킬 때에 입력된 text가 width 길이의 변화에 따라서 줄바꿈이 일어나는 것을 막아줍니다.
.hover01 .container figure .box {
  transition: 0.5s;
  white-space: nowrap;
}

---

가상요소선택자로 퍼져나가는 테두리를 만듭니다. absolute의 위치 속성을 잘 활용하면 됩니다.
      .hover02 .container figure {
        position: relative;
      }
      .hover02 .container figure::before, {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        transition: 0.5s;
      }
      .hover02 .container figure::after {
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        transition: 0.5s 0.2s;
      }
      .hover02 .container figure:hover::before,

      .hover02 .container figure:hover::after {
        width: 100%;
        height: 100%;
      }

---

가상 요소 선택자는 외부 스타일 시트가 적용이 안됩니다.

잘 보면 볼더가 겹치는 부분이 삐져나가고, 볼더가 시작되는 구석 부분에 . 이 생겨있습니다. 이를 지워야 합니다.
우선 삐져나가는 부분을 지우기 위해서는 가상요소 선택자에  box-sizing을 주면 됩니다.
  box-sizing: border-box; 
. 을 지우기 위해서는 opacity를 활용합니다.
  opacity: 0; 과 hover에 opacity: 1; 을 주어 보이지 않게 처리합니다.

---

hover가 되었을 때 아랫줄이 생기도록 하는 방법입니다.
      nav > ul > li::after {
        content: "";
        display: block;
        width: 0;
        height: 3px;
        transition: 0.5s;
      }
      nav > ul > li:hover::after {
        width: 100%;
      }
박스가 가운데에 위치하면 줄이 가운데서 양쪽으로 퍼지는 모양이 됩니다.
      nav > ul > li::after {
        margin: 0 auto;

---

테두리를 따라 네모난 선이 만들어지는 애니메이션을 구현합니다. [이미지로는 잘 보이지 않네요. 스크롤 최하단입니다.]
가상요소선택자 4개가 필요하므로 box로 한 번 감싸줍니다.
        <figure>
          <div class="box">
            <img src="../img/lesedilarona01.jpg" alt="" />
          </div>
        </figure>
top, right, bottom, left 와 가상요소 선택자의 width와 height가 적절히 원하는 테두리에 위치하도록 합니다.

어디가 어디인지 집중 안하면 어렵습니다. after도 마찬가지입니다.
linear-gradient(to left, #fdb195, #df0000); 를 이용하면 색상에 그라데이션을 넣을 수 있습니다.
      .hover03 figure::before {
        top: 0;
        left: 0;
        width: 0;
        height: 1px;
        background: linear-gradient(to left, #fdec95, #df0000);
        transition: 0.1s 0.3s;
      }
      .hover03 figure:hover::before {
        width: 100%;
        transition: 0.1s;
      }

---

되돌아가기까지 0.2초의 딜레이를 넣습니다.  

    .hover03 figure::after {
        top: 0;
        right: 0;
        width: 1px;
        height: 0;
        background: linear-gradient(to bottom, #fff9a7, #2023bc);
        transition: 0.1s 0.2s;
      }

나타나기까지 0.1초의 딜레이를 넣습니다.
      .hover03 figure:hover::after {
        height: 100%;
        transition: 0.1s 0.1s;
      }

---

      .hover03 .box::before {
        bottom: 0;
        right: 0;
        width: 0;
        height: 1px;
        background: linear-gradient(to right, #2affa6, #1a2175);
        transition: 0.1s 0.1s;
      }
      .hover03 figure:hover .box::before {
        width: 100%;
        transition: 0.1s 0.2s;
      }

---

      .hover03 .box::after {
        bottom: 0;
        left: 0;
        width: 1px;
        height: 0;
        background: linear-gradient(to top, #2aff86, #ff2a2a);
        transition: 0.1s;
      }

      .hover03 figure:hover .box::after {
        height: 100%;
        transition: 0.1s 0.3s;
      }