[CSS-05] 웹 레이아웃 & 애니메이션

🛠️ 프로젝트 초기 설정

CSS 기본 리셋

/* CSS 파일 최상단에 배치 */
body {
  margin: 0;
}

div {
  box-sizing: border-box;
}

h1 {
  font-size: 30px;
}

h4 {
  font-size: 22px;
}

디버깅 방법

1. 크롬 개발자도구: F12 → 요소 검사
2. 실시간 테스트: 스타일 값 직접 수정
3. 커뮤니티 활용: 막히는 부분은 질문하기

🎯 서비스 소개 섹션 (4개 아이콘)

HTML 구조

<div class="service">
  <div class="main-container">
    <h4 style="margin-top: 0;">What We Offer</h4>
    
    <div class="service-items">
      <div>
        <i class="fa fa-mobile fa-4x service-icon"></i>
        <h5>Responsive</h5>
      </div>
      <div>
        <i class="fa fa-flask fa-3x service-icon"></i>
        <h5>Experiments</h5>
      </div>
      <div>
        <i class="fa fa-flash fa-3x service-icon"></i>
        <h5>Quickness</h5>
      </div>
      <div>
        <i class="fa fa-globe fa-3x service-icon"></i>
        <h5>Global Shipping</h5>
      </div>
    </div>
  </div>
</div>

CSS 스타일링

/* 메인 레이아웃 */
.service {
  background-color: #4e61c0;
  width: 100%;
  color: white;
  text-align: center;
  padding: 60px 30px 50px 30px;
}

.service-items {
  display: flex;
}

.service-items div {
  width: 25%;
}

/* 아이콘 디자인 */
.service-icon {
  background: white;
  color: #4e61c0;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 15px;
}

.service h5 {
  margin-bottom: 0px;
}

반응형 디자인

@media screen and (max-width: 992px) {
  .service-items {
    display: flex;
    flex-direction: column;
  }
  
  .service-items div {
    width: 100%;
    margin-bottom: 30px;
  }
}

🖼️ 포트폴리오 섹션 (2×2 그리드)

HTML 구조

<div class="portfolio">
  <h4>What we can DO</h4>
  
  <div class="portfolio-container">
    <div class="portfolio-item1">
      <div class="portfolio-text">
        <h4>Stationary</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
    <div class="portfolio-item2">
      <!-- 두 번째 아이템 -->
    </div>
    <div class="portfolio-item3">
      <!-- 세 번째 아이템 -->
    </div>
    <div class="portfolio-item4">
      <!-- 네 번째 아이템 -->
    </div>
  </div>
  
  <!-- Float 해제 -->
  <div style="clear: both;"></div>
</div>

CSS 레이아웃

.portfolio {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}

.portfolio-container {
  text-align: left;
  max-width: 1200px;
  margin: auto;
}

.portfolio-item1 {
  float: left;
  width: 50%;
  height: 350px;
  background-image: url(portfolio-1.jpg);
  background-size: cover;
  position: relative; /* 애니메이션을 위해 필요 */
}

.portfolio-text {
  color: white;
  padding: 50px;
  width: 100%;
}

배경 이미지 어둡게 처리

.portfolio-item1 {
  /* 이미지 위에 반투명 검은색 오버레이 */
  background-image: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), 
    url(portfolio-1.jpg);
  background-size: cover;
}

/* 또는 brightness 필터 사용 */
.portfolio-item1 {
  background-image: url(portfolio-1.jpg);
  filter: brightness(80%);
}

포트폴리오 반응형

@media screen and (max-width: 992px) {
  .portfolio-item1,
  .portfolio-item2,
  .portfolio-item3,
  .portfolio-item4 {
    float: none;
    width: 100%;
    margin-bottom: 20px;
  }
}

✨ hover 애니메이션 구현

테두리 애니메이션

HTML 수정

<div class="portfolio-item1">
  <div class="white-box"></div>  <!-- 애니메이션용 박스 추가 -->
  <div class="portfolio-text">
    <h4>Stationary</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

CSS 애니메이션

.portfolio-item1 {
  position: relative; /* absolute 자식을 위해 필요 */
}

.white-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 0px solid white;
  transition: border 0.3s ease;
}

.portfolio-item1:hover .white-box {
  border: 30px solid white;
}

다양한 hover 효과

스케일 효과

.portfolio-item1 {
  transition: transform 0.3s ease;
}

.portfolio-item1:hover {
  transform: scale(1.05);
}

오버레이 효과

.portfolio-item1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item1:hover::before {
  opacity: 1;
}

🎨 모던 CSS 레이아웃 대안

Flexbox 방식

.portfolio-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.portfolio-item1 {
  flex: 1 1 calc(50% - 10px);
  height: 350px;
}

@media screen and (max-width: 768px) {
  .portfolio-item1 {
    flex: 1 1 100%;
  }
}

CSS Grid 방식

.portfolio-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media screen and (max-width: 768px) {
  .portfolio-container {
    grid-template-columns: 1fr;
  }
}

🔧 완성도 높이기

버튼 디자인

.btn {
  background-color: #333;
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:hover {
  background-color: #555;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

footer 영역

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 40px 20px;
  margin-top: 60px;
}

.footer p {
  margin: 0;
}

🚨 자주 발생하는 문제들

모바일에서 PC 화면이 보이는 경우

<!-- head 태그 내에 필수 메타 태그 추가 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Float 해제 잊지 않기

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Z-index 문제 해결

.overlay-element {
  position: relative;
  z-index: 10;
}

💡 개발 팁

CSS 작성 순서

1. 레이아웃 (display, position, float)
2. 박스 모델 (width, height, padding, margin)
3. 배경 (background, border)
4. 텍스트 (font, color, text-align)
5. 기타 (transition, transform)

반응형 접근법

1. 모바일 퍼스트: 작은 화면부터 설계
2. Breakpoint 일관성: 992px, 768px 표준 사용
3. 미디어쿼리 그룹화: 같은 breakpoint끼리 묶기

이 가이드로 실무에서 바로 활용할 수 있는 웹 레이아웃을 구현할 수 있습니다! 🎯