🎨 [UIUX] 1221 HTML + CSS Coding, 코딩 고급 18

You_Jin.·2024년 12월 21일

CSS스타일가이드 Root keyframes object-fit var will-change 루트 선택자 브라우저 랜더링 애니메이션 속성 영역에 이미지 넣기

✏️ 2024. 12월 21일 / html + css 언어, 코딩 고급 18

👀 transition 효과를 사용하여 아코디언 메뉴를 만들어봅시다.
✨ 아코디언 메뉴 : 마우스를 올렸을때 2차 메뉴가 샤라락 하고 펼쳐지는 형태의 메뉴입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>아코디언 메뉴 만들기</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap");
      body {
        font-family: "Tektur", serif;
      }
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #222;
      }
      /* 세로 메뉴 */
      .nav {
        width: 200px;
        /* 샤라락 효과를 주기 위해 적용 */
        overflow: hidden;
        position: relative;
      }
      .nav li {
        font-size: 16px;
        background-color: rgb(240, 240, 240);
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid rgb(239, 239, 239);
        line-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        color: #222;
      }
      /* 2차 메뉴 */
      .submenu li {
        font-size: 14px;
        font-weight: 500;
        background-color: rgb(249, 249, 249);
      }
      .submenu li:last-child {
        border-bottom: 0;
      }
      .submenu li:hover a {
        color: rgb(255, 66, 195);
      }
      /* submenu의 높이를 0으로 만듦
      높이가 없어서 글자들이 겹쳐짐 */
      .submenu {
        height: 0px;
        overflow: hidden;
        transition: 0.5s;
      }
      /* 1차 메뉴에 마우스를 올리면 .submenu의 높이를 160px로 만들어서 2차 메뉴를 보여준다. */
      .nav > li:hover .submenu {
        height: 160px;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        menu1
        <ul class="submenu">
          <li><a href="#">menu1-1</a></li>
          <li><a href="#">menu1-2</a></li>
          <li><a href="#">menu1-3</a></li>
          <li><a href="#">menu1-4</a></li>
        </ul>
      </li>
      <li>
        menu2
        <ul class="submenu">
          <li><a href="#">menu2-1</a></li>
          <li><a href="#">menu2-2</a></li>
          <li><a href="#">menu2-3</a></li>
          <li><a href="#">menu2-4</a></li>
        </ul>
      </li>
      <li>
        menu3
        <ul class="submenu">
          <li><a href="#">menu3-1</a></li>
          <li><a href="#">menu3-2</a></li>
          <li><a href="#">menu3-3</a></li>
          <li><a href="#">menu3-4</a></li>
        </ul>
      </li>
      <li>
        menu4
        <ul class="submenu">
          <li><a href="#">menu4-1</a></li>
          <li><a href="#">menu4-2</a></li>
          <li><a href="#">menu4-3</a></li>
          <li><a href="#">menu4-4</a></li>
        </ul>
      </li>
      <li>
        menu5
        <ul class="submenu">
          <li><a href="#">menu5-1</a></li>
          <li><a href="#">menu5-2</a></li>
          <li><a href="#">menu5-3</a></li>
          <li><a href="#">menu5-4</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

아코디언 메뉴 형태에서 구조만 조금 바꿔주면 가로로 나오는 gnb 메뉴를 만들수도 있습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>가로 메뉴 만들기</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap");
      body {
        font-family: "Tektur", serif;
      }
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #222;
      }
      /* 세로 메뉴 */
      .nav {
        width: 1000px;
        /* 샤라락 효과를 주기 위해 적용 */
        overflow: hidden;
        /* 원활한 작업을 위해 포지션 태그를 걸어놓고 작업 */
        position: relative;
        display: flex;
      }
      .nav > li {
        font-size: 16px;
        background-color: rgb(240, 240, 240);
        text-align: center;
        font-weight: 700;
        border-bottom: 1px solid rgb(239, 239, 239);
        line-height: 40px;
        box-sizing: border-box;
        cursor: pointer;
        color: #222;
        width: 200px;
      }
      /* 2차 메뉴 */
      .submenu li {
        font-size: 14px;
        font-weight: 500;
        background-color: rgb(249, 249, 249);
      }
      .submenu li:last-child {
        border-bottom: 0;
      }
      .submenu li:hover a {
        color: rgb(255, 66, 195);
      }
      /* submenu의 높이를 0으로 만듦
      높이가 없어서 글자들이 겹쳐짐 */
      .submenu {
        height: 0px;
        overflow: hidden;
        transition: 0.5s;
      }
      /* .nav > li .submenu 1차 메뉴에 마우스를 올리면 .submenu의 높이를 160px로 만들어서 2차 메뉴를 보여준다. */
      /* 전체 메뉴 내려오게 하기 */
      .nav:hover > li .submenu {
        height: 160px;
      }
    </style>
  </head>
  <body>
    <ul class="nav">
      <li>
        menu1
        <ul class="submenu">
          <li><a href="#">menu1-1</a></li>
          <li><a href="#">menu1-2</a></li>
          <li><a href="#">menu1-3</a></li>
          <li><a href="#">menu1-4</a></li>
        </ul>
      </li>
      <li>
        menu2
        <ul class="submenu">
          <li><a href="#">menu2-1</a></li>
          <li><a href="#">menu2-2</a></li>
          <li><a href="#">menu2-3</a></li>
          <li><a href="#">menu2-4</a></li>
        </ul>
      </li>
      <li>
        menu3
        <ul class="submenu">
          <li><a href="#">menu3-1</a></li>
          <li><a href="#">menu3-2</a></li>
          <li><a href="#">menu3-3</a></li>
          <li><a href="#">menu3-4</a></li>
        </ul>
      </li>
      <li>
        menu4
        <ul class="submenu">
          <li><a href="#">menu4-1</a></li>
          <li><a href="#">menu4-2</a></li>
          <li><a href="#">menu4-3</a></li>
          <li><a href="#">menu4-4</a></li>
        </ul>
      </li>
      <li>
        menu5
        <ul class="submenu">
          <li><a href="#">menu5-1</a></li>
          <li><a href="#">menu5-2</a></li>
          <li><a href="#">menu5-3</a></li>
          <li><a href="#">menu5-4</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

👀 애니메이션 속성에 대해 알아봅시다.
✨ animation : 브라우저가 로딩되는 순간 모션을 진행하는 애니메이션 속성입니다.
애니메이션 속성은 사용자의 동작과는 관계없이 혼자서 움직임을 만듭니다.
`이때 애니메이션의 하위속성과 @keyframes 모듈을 이용하여 움직임을 만듭니다.``

     [속성]
     - animation : 하위 속성들을 한꺼번에 선언할 때 사용합니다.
                   속성끼리는 공백으로 구분합니다.
     - animation-delay : 애니메이션의 지연시간을 지정합니다.
                         단위는 s를 사용하고 지정된 시간이 지나면 그때 애니메이션을 실행합니다.
     - animation-direction : 애니메이션의 진행 방향을 설정합니다. 속성 값으로는 아래의 속성 값들을 사용합니다.
     1. alternate : 애니메이션의 시작 지점에서 끝나는 지점으로 이동했다가 끝나는 지점에서 다시 시작 지점으로 이동합니다. (from>to>from)
     2. normal : 기본값이며 시작지점에서 끝나는 지점으로 이동하는 것을 반복합니다.
     3. reverse : 역박향으로 움직입니다.
     4. alternate-reverse : 역방향으로 움직였다가 정방향으로 움직인다.
     - animation-iteration-count : 애니메이션의 반복 횟수를 경정합니다. 단위 없이 숫자만 쓰거나 infinite 값을 쓸 수 있습니다.
                                   infinite는 무한 반복을 말합니다.
     - animation-name : 애니메이션의 이름을 지정합니다. class나 id 이름 짓듯이 지어줍니다.
                        ★ 필수 속성이며 애니메이션의 이름이 없으면 동작하지 않습니다.
     - animation-play-state : 애니메이션의 재생 상태를 지정합니다. 보통 :hover 선택자와 함께 사용합니다.
                              사용자가 마우스를 올리거나 어떤 동작을 하면 애니메이션의 동작을 멈추거나 다시 재생할 수 있습니다.
                              값은 running(재생하다)이나 paused(멈추다)를 사용합니다.
     - animation-timing-function : 애니메이션의 속도를 지정합니다. 값으로는 transition-timing-function의 값과 동일한 값을 사용합니다.
                                   (ease, ease-in, ease out, ease-in-out, linear)
     - animation-fill-mode : 끝났을 때 모습을 유지할 것인지를 결정합니다.
                             backwards는 기본값으로 애니메이션이 끝나면 원래 있던 위치로 돌아갑니다. (초기위치)
                             forwards는 애니메이션의 종료 위치에서 그대로 자리를 유지합니다. (종료 위치)

👀 @keyframes 모듈에 대해 알아봅시다.
✨ @keyframes : animation으로 해당 태그에 움직임을 설정했다면 실제 움직이는 동작은 @keyframes 모듈이 담당합니다.
@keyframes 모듈은 지정된 시간안에 어떤 동작을 만들것인지를 지정합니다.
애니메이션의 모션 효과를 지정할 때 이것을 '키프레임'이라고 부릅니다.
키프레임은 애니메이션이 변경되는 모든 지점을 말합니다.
@keyframes 설정을 할 때에는 키프레임 안에서 시간에 의해 변화되는 부분을 '선택자'로 구분합니다.
선택자는 0% 또는 from이라고 쓰면 애니메이션의 시작지점(0초 지점)을 말하고, 100% 또는 to라고 쓰면 애니메이션이 끝나는 지점을 말합니다.

[기본형]
     선택자{
      animation : 속성1 속성2....;
     }
      @keyframes 애니메이션 이름{
      from 또는 0% { 스타일 속성: 값 }
      50% { 스타일 속성 : 값 }
      to 또는 100% { 스타일 속성 : 값 }
      }

👀 will-change에 대해 알아봅시다.
✨ will-change : transition이나 animation 작업을 수행하는 동안 브라우저에 깜빡임이나 떨림현상이 생길 수 있습니다.
will-change속성은 브라우저에게 요소의 예상 변경 사항을 알려주는 속성입니다.
이 속성을 사용하면 브라우저는 요소가 실제로 스타일 변형이 필요할 때
필요한 리소스를 사전에 최적화 하여 요소에 스타일 변경과 랜더링을 더 빠르고 최적화 된 방식으로 처리 합니다.
will-change의 속성값으로는 애니메이션(키프레임)과 transition 또는 transform으로 변화시킬 속성의 속성명을 사용합니다.
[will-change에 넣어주면 좋은 속성값]
      - auto : 변경 예정인 속성에 대한 최적화를 자동으로 처리하기 위해 브라우저가 결정합니다.
      - scroll-position : 스크롤 위치에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - contents : 요소 내용의 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - opacity : 투명도 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - transform : 변형 속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - perspective : 원근감 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - left/top/right/bottom : 좌표값 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - filter : filter 속성에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - color / background-color : 색상 변경에 대한 최적화를 수행하기 위해 브라우저가 자동으로 처리합니다.
      - all : 모든 변경에 대한 최적화를 위해 브라우저가 자동으로 처리한다.

👀 object-fit에 대해 알아봅시다.
✨ object-fit : 이미지나 비디오등 컨텐츠가 사용된 높이와 넓이에 따라 설정된 부모 요소에 어떻게 맞춰져야 하는지 결정합니다.
웹 문서에서 이미지나 비디오 같은 시각 요소는 반응형으로 크기가 바뀌면
원래 이미지나 비디오의 가로 세로 비율을 그대로 유지하기 어렵다.
object-fit을 사용하면 컨텐츠(이미지나 비디오)의 가로 세로 비율을 유지하면서 해상도에 맞게 이미지 크기를 조절할 수 있습니다.
[속성값]
   - fill : 기본값으로 컨텐츠의 원래 비율을 무시하고 요소의 전체 영역을 채웁니다. 
   - contain : 비율을 유지하면서 요소의 전체 영역에 맞출 수 있을만큼 확대합니다.
               영역을 모두 채우지 못할 수도 있습니다.
   - cover :  비율을 유지하면서 요소의 전체 영역에 맞출 수 있을만큼 확대합니다.
              영역을 채울 때 컨텐츠의 일부를 자를 수도 있습니다.
   - none : 컨텐츠의 원래 크기를 유지합니다.
   - scale-down : none과 contain중 크기가 더 작아지는 값으로 설정한다.

👀 CSS의 스타일가이드! :root와 var에 대해 알아봅시다.
✨ :root선택자
css가 처음 등장했을 때에는 단순한 스타일링만 가능했습니다.
예를 들어서, 색상이나 글꼴, 줄간격 등 사이트의 겉모습만 제어하는 속성만 제공했습니다.
하지만 웹페이지와 애플리케이션이 점점 더 복잡해지면서 스타일을 더 세밀하게 제어할 방법이 필요해졌습니다.
그렇게 등장한 것이 css 함수 입니다.
css 함수는 특정 기능을 말하며 ()안에 올바른 값을 넣어 실행합니다.
:root선택자는 문서의 최상위 요소를 말합니다. 즉, html 태그를 말합니다.
:root를 사용하는 이유는 css에서 '변수'라는 것을 사용하기 위해서 입니다.
:root는 웹문서에서 사용할 스타일들을 전체적으로 선언하는 공간으로, 일종의 '스타일 가이드'로 사용합니다.
:root안에 사용할 스타일을 변수로 선언하면 일관적인 디자인을 쉽게 유지할 수 있습니다.
✨ CSS 변수
변수란 필요할때마다 값을 저장해놓고 사용하는 데이터 그릇을 말합니다.
이 데이터가 바뀌어야 한다면 그 값을 바꿀 수도 있습니다.
css에서 사용하는 변수는 마치 피그마의 컴포넌트처럼 일관적인 디자인을 유지하기 위해
미리 웹 문서에서 사용할 속성과 스타일에 이름을 붙여서 저장하는 역할을 합니다.
css변수를 쓰는 방법은 :root의 {}안에 하이픈 두개를 앞에 붙여 변수 이름을 지어서 사용합니다.
단, 변수 이름을 지을 때에는 소문자로만 지어야 합니다.
[기본형]
     :root{
      --변수이름 : 값;
     }
     var()
==================================================================
     변수에 저장했던 값을 표시하는 함수입니다.
     값을 표시할때에는 var()소괄호 안에 '--변수이름'을 넣으면
     그에 해당하는 값이 적용됩니다.
     [기본형]
     선택자{
      color : var(--변수이름);
     }

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🎨 [UIUX] 1221 HTML + CSS Coding, 코딩 고급 18

✏️ 2024. 12월 21일 / html + css 언어, 코딩 고급 18

☀️ [UIUX] 1219 HTML + CSS Coding, 코딩 중급 17

❄️ [UIUX] 1223 HTML + CSS Coding, 코딩 고급 19

0개의 댓글