[CSS-04] CSS 디버깅 & 애니메이션

🔍 개발자 도구 활용법

개발자 도구 열기

Windows: F12 또는 우클릭 → 검사
Mac: Alt + Command + I

요소 검사 방법

1. 요소 선택 도구: 🔍 버튼 클릭 후 원하는 요소 선택
2. 스타일 확인: 우측 하단에서 적용된 모든 스타일 확인
3. 실시간 수정: 속성값 직접 수정하여 테스트 (실제 파일엔 반영 안됨)

스타일 우선순위 확인

/* 개발자도구에서 보이는 형태 */
element {
    color: red;          /* 적용됨 */
    color: blue;         /* 취소선 - 적용 안됨 */
    font-size: 16px;
}

규칙: 위에 있을수록 높은 우선순위, 취소선은 적용되지 않은 스타일

🌐 브라우저 호환성 대응

IE 브라우저 테스트

윈도우10: 시작 → Internet Explorer 검색
윈도우11: IE 11 직접 설치

IE 개발자도구: 우클릭 → 검사 → 에뮬레이션 탭

조건부 CSS 파일 첨부

<!--[if lt IE 9]>
  <link rel="stylesheet" href="css/ie8.css" />
<![endif]-->

<!--[if lt IE 10]>
  <link rel="stylesheet" href="css/ie9.css" />
<![endif]-->

적용 순서: 다른 CSS 파일들 다음에 배치 (덮어쓰기 위해)

🎨 Font Awesome 아이콘

1. 직접 다운로드

# 다운로드 후 필요한 폴더만 복사
css/        # all.css 파일 포함
webfonts/   # 폰트 파일들

<link href="css/all.min.css" rel="stylesheet">

2. CDN 사용

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

장점: 간편, 빠름
단점: 외부 서버 의존

아이콘 사용법

<i class="fas fa-book"></i>        <!-- 책 아이콘 -->
<i class="fas fa-heart"></i>       <!-- 하트 아이콘 -->
<i class="fab fa-github"></i>      <!-- GitHub 아이콘 -->

.icon {
  font-size: 24px;
  color: #007bff;
}

🎭 CSS 애니메이션 기초

기본 속성들

Opacity (투명도)

.box {
  opacity: 0;    /* 완전 투명 */
  opacity: 0.5;  /* 반투명 */
  opacity: 1;    /* 완전 불투명 */
}

Overflow (넘침 처리)

.container {
  width: 100px;
  height: 100px;
  overflow: hidden;  /* 넘치는 부분 숨김 */
  overflow: visible; /* 넘치는 부분 보임 (기본값) */
  overflow: scroll;  /* 스크롤바 생성 */
}

Transition (전환 효과)

.box {
  opacity: 0;
  transition: all 1s;              /* 모든 속성 1초간 */
  transition: opacity 0.5s ease;   /* opacity만 0.5초간 */
}

.box:hover {
  opacity: 1;
}

Transition 세부 설정

.box {
  transition-property: opacity;      /* 대상 속성 */
  transition-duration: 0.5s;        /* 지속 시간 */
  transition-timing-function: ease;  /* 속도 곡선 */
  transition-delay: 0.2s;           /* 시작 지연 */
}

/* 축약형 */
.box {
  transition: opacity 0.5s ease 0.2s;
}

🎬 One-way 애니메이션 만들기

4단계 법칙

1. 시작 스타일 정하기
2. 최종 스타일 정하기
3. 트리거 설정하기 (:hover, :focus 등)
4. Transition 적용하기

실전 예제

/* 1. 시작 스타일 */
.button {
  background-color: #007bff;
  transform: scale(1);
  transition: all 0.3s ease;
}

/* 2. 최종 스타일 + 3. 트리거 */
.button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

🛍️ 상품 진열 레이아웃

기본 구조

<div class="shop-bg">
  <div class="shop-container">
    <div class="shop-item">
      <img src="img/product1.jpg">
    </div>
    <div class="shop-item">
      <img src="img/product2.jpg">
    </div>
    <div class="shop-item">
      <img src="img/product3.jpg">
    </div>
  </div>
</div>

.shop-bg {
  background-color: #eee;
  padding: 20px;
}

.shop-container {
  display: flex;
  width: 90%;
  margin: auto;
  gap: 20px;
}

.shop-item {
  flex: 1;
  padding: 10px;
}

.shop-item img {
  width: 100%;
  display: block;
}

🎨 오버레이 애니메이션

HTML 구조

<div class="shop-item">
  <div class="overlay-wrap">
    <div class="overlay-black">
      <span>$60</span>
    </div>
  </div>
  <img src="img/product1.jpg">
</div>

CSS 애니메이션

.shop-item {
  position: relative;
}

.overlay-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.overlay-black {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  
  /* 시작 위치 */
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

/* 호버 시 최종 위치 */
.overlay-wrap:hover .overlay-black {
  transform: translateY(0);
}

다양한 오버레이 효과

페이드 인/아웃

.overlay-black {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.overlay-wrap:hover .overlay-black {
  opacity: 1;
}

슬라이드 (좌우)

.overlay-black {
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.overlay-wrap:hover .overlay-black {
  transform: translateX(0);
}

스케일 효과

.overlay-black {
  transform: scale(0);
  transition: transform 0.3s ease;
}

.overlay-wrap:hover .overlay-black {
  transform: scale(1);
}

🔧 애니메이션 디버깅 팁

CSS 셀렉터 조합

/* 부모에 hover 시 자식 요소 변경 */
.parent:hover .child {
  opacity: 1;
}

/* 형제 요소 선택 */
.item:hover + .sibling {
  color: red;
}

주의사항

1. 오버레이 문제: 요소가 겹치면 원래 요소에 마우스 올리기 어려움
2. CSS 한계: 상위 요소나 이전 형제 요소 선택 불가
3. 트리거 제한: CSS만으로는 :hover, :focus 정도만 가능

성능 최적화

/* GPU 가속 활용 */
.animated-element {
  will-change: transform;
  transform: translateZ(0);
}

/* 부드러운 애니메이션을 위한 속성들 */
.smooth-animation {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}