📌
1. CSS 애니메이션
2. 반응형
3. 메타 데이터

1. CSS 애니메이션

transition, rotate

      a {
        text-decoration: none;
        color: #000;
        background-color: skyblue;
        padding: 10px 20px;
        border-radius: 20px;
        transition: 0.8s;
      }
      a:hover {
        transform: rotate(360deg);
      }

@keyframes

 @keyframes sizeChange {
        0% {
          transform: scale(100%);
        }
        50% {
          transform: scale(150%);
        }
        100% {
          transform: scale(100%);
        }
      }
      .likeBtn {
        display: inline-block;
        text-decoration: none;
        padding: 10px 20px;
        background-color: lightskyblue;
        border-radius: 20px;
        margin: 20px;
        color: #000;
        transition: 0.3s;
        animation: sizeChange 3s ease-in-out infinite;
      }
      .likeBtn:hover {
        background-color: cornflowerblue;
        color: white;
      }

실습

  <div class="post-card">
          <!-- 앞면 -->
          <div class="card-face card-front">
            <img class="post-image" src="img7.jpg" alt="card" />
            <div class="post-bottom">
              <h1 class="post-title">게시물 제목입니다</h1>
              <div class="post-meta">
                <span class="post-date">2025년 3월 27일 16:44</span>
                <span class="post-category">디자인</span>
              </div>
              <p class="post-body">
                국가는 모성의 보호를 위하여 노력하여야 한다. 국민의 자유와
                권리는 헌법에 열거되지 아니한 이유로 경시되지 아니한다.
              </p>
            </div>
          </div>

          <!-- 뒷면 -->
          <div class="card-face card-back">
            <h3>여기는 뒷면입니다</h3>
            <p>다시 뒤집어주세요.</p>
          </div>
        </div>

post-card 안에 앞면과 뒷면을 함께 둔다.
앞,뒷면 모두에 적용되는 스타일을 적어주기 위해 card-face 클래스 추가

.card-back {
        background-color: slategray;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fffffff5;
      }

각 면에 필요한 스타일 적용
(앞면은 저번시간에 적용해서 생략)

 .post-card {
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.8s;
        width: 300px;
        height: 400px;
      }

앞,뒷면을 겹치기 위해 position:absolute를 적용할 것이다.
이 때 absolute의 기준을 post-card로 잡을 것이기 때문에 relative를 적용한다.
자식 요소들이 각각 3D로 회전/변형된 상태를 유지하도록 하기 위해 preserve-3d 추가

.card-face {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 3%;
        backface-visibility: hidden;
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
      }

card-face에 공통된 스타일 적용
position:absolute를 사용하여 앞,뒷면을 겹쳐준다.
backface-visibility:hidden을 적용하여 뒷면을 가린다.
css는 rotate값이 180도 이상이면 뒷면으로 간주한다.
(rotateY(180deg)를 적용하기 때문에 뒷면으로 인식)

      .card-back {
        transform: rotateY(180deg);
      }

뒷면을 180도 회전시켜 뒷면으로 인식시킨다.

      .post-card:hover {
        transform: rotateY(180deg);
      }

호버되었을 때 뒷면이 나올 수 있도록 적용

가로 축으로 회전하는 것은 rotateX(180deg) 적용

부트스트랩

아 오늘 부트스트랩도 써봄
홈페이지가면 사용방법이 나와있으니 생략

🔗 링크

https://getbootstrap.com/docs/5.3/getting-started/introduction/
🔨 까먹을 나를 위해 : tailwindCSS랑 비슷함

2. 반응형

큰 사이즈
미디어 커리 없이 작성

      .container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 10px;
        row-gap: 10px;
        margin-top: 12px;
      }

중간 사이즈
미디어 쿼리 사용

      @media (max-width: 1000px) {
        .container {
          grid-template-columns: repeat(2, 1fr);
        }
      }

작은 사이즈

      @media (max-width: 500px) {
        .container {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }
      }

grid 한 줄이 안 먹어서 flex로 적용

💡 화면 방향

• portrait : 세로 방향
• landscape : 가로 방향

@media (orientation:portrait) {
	 body {
     	background-color:pink;  /* 화면이 세로일 때 배경 핑크 */
     }
}

3. 메타 데이터

✨ 항상 !치고 엔터 쳐서 했기 때문에 신경을 안 쓰고 살았는데 튜터님께서 피드백을 주셔서 정리

🤓 메타 데이터란?

웹페이지에 대한 정보를 담고 있는 데이터
우리가 웹사이트를 볼 때 직접 보이지는 않지만, 브라우저나 검색 엔진이 이 정보를 읽고 웹사이트를 더 잘 이해할 수 있도록 도와준다.

🧵 필요한 이유

1. 검색할 때 도움
   검색 엔진이 웹사이트의 제목, 설명, 키워드 등을 저장하여 읽고 분석한다.
   사람들이 검색어를 입력하면, 저장하고 분석한 내용을 토대로 가장 적절한 웹사이트를 사용자에게 보여준다.
2. 브라우저가 웹페이지를 더 잘 보여준다.
   어떤 글자(문자) 인코딩을 사용할지, 모바일 화면에서 어떻게 보일지 결정
3. SNS에서 링크를 예쁘게 보여준다.
   카카오톡이나 인스타그램에서 링크를 공유할 때, 제목과 미리보기 이미지가 나오도록 한다.

🏷️ 예시

<head>
	<meta charset="UTF-8"> <!--1️⃣-->
    <meta name="description" content="나의 첫 번째 웹페이지입니다"> <!--2️⃣-->
    <meta name="keywords" content="포트폴리오, 웹개발, 퍼블리싱"> <!--3️⃣-->
    <meta name="author" content="박예지"> <!--4️⃣-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--5️⃣-->
</head>

1️⃣ 웹페이지의 글자 인코딩 설정 (UTF-8를 사용하여 전세계의 문자를 일관되게 표현)
2️⃣ 웹페이지에 대한 설명
3️⃣ 검색할 때 도움이 되는 키워드
4️⃣ 작성자 정보
5️⃣ 모바일에서 보기 좋게 설정

🔓Open Graph (OG)

카카오톡 같은 곳에서 링크를 공유할 때, 웹페이지의 제목과 이미지가 보이도록 하려면 open graph 메타 태그 사용

meta property="og:title" content="나의 첫번째 웹페이지"
meta property="og:description" content="나의 첫번째 웹페이지입니다!"
meta property="og:image" content="firstWeb.jpg"
meta property="og:url" content="http://firstWeb.com"

🎙️느낀점

확실히 애니메이션을 집어넣으니 결과물이 다채로워져 재밌다.
3D로 회전하는 것은 처음 해보았는데 생각보다 어렵지 않아서 다행이다.
꼭 기억해뒀다가 나중에 써먹어야지!
튜터님께서 title외에 메타 데이터를 보강하라고 피드백을 주셔서 챗지피티에게 물어봐서 정리를 했다.
얘도 꼭 나중에 써먹어야지
유용한 것들을 많이 배운 하루다 룰루 😙