[HTML/CSS] - 이디야 페이지 실습

HTML&CSS 강의

구글 SEO에 잘 보이려면 적절한 Heading이 있으면 좋다!

button안에 figure를 넣을 수 없음! --> a안에 figure는 가능!(role="button"으로 역할을 알려줌)

가능하면 a와 button의 의미를 생각해서 쓰되, 문법을 고려하여 사용!

이디야 메인 메뉴 만들기

a의 역할을 button으로 만들고, aria-pressed=false로 하여 눌렀을 때 js로 true로 바꾸게 만들기!

<div class="ediya-drink">
  <h2 class="a11y-hidden">이디야 음료</h2>
  <ul class="ediya-menu reset-list">
    <li class="ediya-menu__item">
      <a href="#"
         role="button"
         aria-haspopup="dialog"
         aria-pressed="false">
        <figure>
          <img src="./images/iced-cherry-blossoms.png"
               alt
               width="323"
               height="323" />
          <figcaption>ICED 벚꽃라떼</figcaption>
        </figure>
      </a>
      <div 
           class="ediya-menu__item--detail"
           role="dialog"
           aria-modal="false"
           aria-labelledby="ediya-menu__item1">
        <h3 id="ediya-menu__item1"
            class="ediya-menu__item--name">ICED 벚꽃라떼<span lang="en">Cherry Blossom Latte</span></h3>
        <p>은은한 벚꽃향과 라즈베리 화이트 초콜릿 토핑이 올라간 핑크빛 라떼</p>
        <div class="ediya-menu__item--multi-column is-2">
          <dl>
            <dt>칼로리</dt>
            <dd>(393kcal)</dd>
            <dt>당류</dt>
            <dd>(35g)</dd>
            <dt>단백질</dt>
            <dd>(7g)</dd>
            <dt>포화지방</dt>
            <dd>(18.6g)</dd>
            <dt>나트륨</dt>
            <dd>(149mg)</dd>
            <dt>카페인</dt>
            <dd>(0mg)</dd>
          </dl>
        </div>
        <button type="button"
                class="button button-close-panel"
                title="닫기"
                aria-label="음료 정보 패널 닫기">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </li>
    ...
  </ul>
</div>

.ediya-drink {
    padding: 1.125rem;
}

.ediya-menu {
    /* background-color: yellow; */
    display: flex;
    flex-flow: row wrap;
    gap: 1.125rem;
}

.ediya-menu__item {
    flex: 1 1 40%;
    position: relative;
    /* display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto; */
}

.ediya-menu__item a {
    display: block;
    background-color: var(--gray);
    color: var(--black2);
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.ediya-menu__item figure {
    margin: 0;
    padding-top: 1.25rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.ediya-menu__item img {
    transform: scale(0.85);
    transition: all 400ms ease;
    -webkit-user-select: none;
    user-select: none;
}

.ediya-menu__item a:hover img {
    transform: scale(1);
}

.ediya-menu__item figcaption {
    margin-bottom: 2.8125rem;
}

메인 메뉴 모달 창 css

.ediya-menu__item--detail {
    opacity: 0;
    background-color: rgba(255, 255, 255, 0.5);
    
    /* 전통적인 방식 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--gray);
    padding: 1.875rem 1.25rem;

    /* grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2; */
    display: flex;
    flex-flow: column nowrap;
    transition: all 400ms ease
}

.ediya-menu__item--detail.is-active{
    opacity: 1;
}

.ediya-menu__item--name {
    color: #202022;
    font-size: 1.125rem;
    border-bottom: 2px solid currentColor;
    padding-bottom: 1.125rem;
}
.ediya-menu__item--name [lang="en"] {
    display: block;
    font-size: 0.875rem;
    color: var(--gray);
}

.ediya-menu__item--detail p {
    line-height: 1.5;
    flex-grow: 1;
}

.ediya-menu__item--multi-column {
    background-color: var(--silver);
    column-count: 2;
    column-rule: 1px solid var(--black2);

    margin: 0 -1.25rem -1.875rem ;
}

.ediya-menu__item--multi-column dl {
    margin: 0;
    overflow: hidden;
}

.ediya-menu__item--multi-column dt {
    float: left;
    width: 40%;
    margin-left: 10%;
    margin-top: 0.5rem;
}

.ediya-menu__item--multi-column dd {
    margin-left: 0;
    float: left;
    width: 40%;
    margin-right: 10%;
    margin-top: 0.5rem;
}

.ediya-menu__item--detail .button-close-panel {
    position: absolute;
    top: 0;
    right: 0;
    background-color: transparent;
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    color: var(--gray);
}

이디야 애니메이션 만들기

@keyframes moveFromLeft {
    0% {
        transform: translateX(-4rem);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveFromRight {
    0% {
        transform: translateX(4rem);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes moveFromTop {
    0% {
        transform: translateY(4rem);
    }
    100% {
        transform: translateY(0);
    }
}

.header-container {
    animation: moveFromTop 600ms forwards;
}

.brand {
    animation-name: moveFromLeft;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.header .button-open-menu {
    user-select: none;
    padding: 0;
    background-color: #fff;
    animation-name: moveFromRight;
    animation-duration: 800ms;
    animation-delay: 150ms;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
}

헤더 영역에 position:fixed로 두었으면 그 공간만큼 차지하고 있어서 그 부분의 애니메이션만 움직이기 때문에 더 자연스럽게 만들수 있음

더 쉽게 만들려면

@keyframes transform-none {
	to {
		transform: none;
		opacity: 1;
	}
}

이러한 방법을 이용하면 굳이 애니메이션 3개를 만들 지 않고도 해결할 수 있다.
이동해야한다는 생각 때문에 translate에 집착하지 말고 투명도와 같은 속성과 값을 사용해보자

강의 시간에 나온 사이트

• WHATWG

• BEM OOCSS SMACSS

• backdrop-filter

• position: sticky;

프로젝트시 BEM방법으로 해보는 거 추천
picture태그와 source: source태그에 있는 이미지들을 지원해주지 않으면 picture태그 안의 img파일을 불러와서 보여줌(최신 이미지 포맷: webp, avif <-- 둘다 이미지 압축률이 높음)
user-select: none;
currentColor
애니메이션을 조금 더 고급스럽게 하려면 타이밍 함수를 이용
backdrop-filter: blur(20px);