최원종의 개발 블로그

HTML_CSS 5강 (핵심 개념 - CSS 5단계 설계 순서) 본문

HTML_CSS/HTML_CSS

HTML_CSS 5강 (핵심 개념 - CSS 5단계 설계 순서)

chl6698 2026. 4. 21. 17:49

설계 순서가 중요한 이유

나를 소개하는 프로필 카드 만들기, CSS를 아무 순서로 쓰면 코드가 엉망이됨.

Java에서 클래스 설계 없이 코딩하면 스파게티 코드가 되듯,
CSS도 **정해진 순서**로 작성해야 깔끔함.

CSS 5단계 설계 순서

단계 하는 것 코드 예시
1단계 리셋 / 전역 스타일 • { margin:0; padding:0; box-sizing:border-box; }
2단계 레이아웃 (큰 틀) display:flex; flex-wrap:wrap;
3단계 컴포넌트 스타일 border-radius; box-shadow; padding;
4단계 세부 조정 hover 효과; transition;
5단계 반응형 처리 @media (max-width: 768px) { ... }

1단계: 리셋 / 전역 스타일

브라우저마다 기본 margin, padding이 다르기 때문에 먼저 초기화를 한다
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* 크기 계산을 편하게 */
}
body {
    font-family: Arial, sans-serif;
    color: #333;
}

2단계: 레이아웃 (큰 틀 배치)

세부 꾸미기 전에 위치부터 잡는다
main { max-width: 900px; margin: 0 auto; padding: 20px; }
.menu-grid { display: flex; gap: 20px; }

3단계: 컴포넌트 스타일링

웹 개발에서 컴포넌트(component) 는 독립적으로 재사용할 수 있는 UI 조각

각 박스(카드, 헤더 등)를 꾸미기
.card {
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
}

4단계: 세부 조정

색상, 호버 효과, 애니메이션 등 디테일:
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

5단계: 반응형 처리

마지막에 화면 크기별 대응:
@media (max-width: 768px) {
    .menu-grid { flex-direction: column; }
}

기억할 3가지 원칙

1. **밖에서 안으로**: 전체 레이아웃 → 개별 컴포넌트 → 세부 요소
2. **위에서 아래로**: 전역 스타일 → 구체적 스타일
3. **구조 먼저, 장식 나중**: 배치를 잡고 나서 꾸민다

실습코드

 

HTML코드

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>카페 & 메뉴</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <header class="site-header">
      <h1>Brew & Bean</h1>
      <p>당신의 하루를 깨우는 한 잔</p>
    </header>
    <main class="main">
      <div class="menu-grid">
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">아메리카노</h2>
            <p class="menu-desc">깔끔하고 진한 에스프레소</p>
            <span class="price">4,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">카페라떼</h2>
            <p class="menu-desc">부드러운 우유 거품이 가득</p>
            <span class="price">5,000원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

CSS 코드

/* 1단계 - 리셋 + 전역 스타일 */
* {
  margin: 0;
  padding: 0;
  /*border-box일 때 width : 200px padding 20px + border 2px 일 때 -> 전체 크기는? 200 */
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

/* 2단계 - 레이아웃 (큰 틀 배치) */
.site-header {
  text-align: center;
  padding: 40px 20px;
  background-color: #6f4e37;
  color: white;
}

.main {
  max-width: 900px;
  margin: 0 auto;
  /* 좌우 auto = 가운데 정렬(width있어야 동작 한다) */
  padding: 20px;
}

.menu-grid {
  display: flex;
  gap: 20px;
  /* 세부조정 */
  flex-wrap: wrap;
}
/* 3단계 컴포넌트 스타일링 */
.card {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  flex: 1 1 240px;
}

.card img {
  width: 100%;
  display: inline-block;
  /* 기본 인라인이다 . 이녀석은 자잘한 속성들이 안먹힐 수 있음 */
  /* 하단에 3~4px 자동 여백이 생길 수 있음 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-body {
  padding: 16px;
}

.price {
  margin-top: 50px;
  font-weight: bold;
  border-radius: 10px;
  color: #6f4e37;
}

/* 4단계 세부 스타일링 */

/* 5단계 -반응형 처리
화면이 768px 이하일 때 카드를 세로로 쌓는다 */

@media (max-width: 768px) {
  .menu-grid {
    flex-direction: column;
  }
  .card {
    flex: none;
    width: 100%;
  }
}
더보기

결과화면

도전문제

 

HTML코드

<!doctype html>
<html lang="en">
  <!-- 연습문제 -->
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>카페 & 메뉴</title>
    <link rel="stylesheet" href="./css/style2.css" />
  </head>
  <body>
    <header class="site-header">
      <h1>Brew & Bean</h1>
      <p>당신의 하루를 깨우는 한 잔</p>
    </header>
    <main class="main">
      <div class="menu-grid">
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">아메리카노</h2>
            <p class="menu-desc">깔끔하고 진한 에스프레소</p>
            <span class="price">4,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">카페라떼</h2>
            <p class="menu-desc">부드러운 우유 거품이 가득</p>
            <span class="price">5,000원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
        <div class="card">
          <img
            src="https://picsum.photos/seed/americano/300/200"
            alt="아메리카노"
          />
          <div class="card-body">
            <h2 class="menu-body">바닐라 라떼</h2>
            <p class="menu-desc">달콤한 바닐라 시럽 한 스푼</p>
            <span class="price">5,500원</span>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>

CSS 코드

/* 연습문제용css */
/* 1단계 - 리셋 + 전역 스타일 */
* {
  margin: 0;
  padding: 0;
  /*border-box일 때 width : 200px padding 20px + border 2px 일 때 -> 전체 크기는? 200 */
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

/* 2단계 - 레이아웃 (큰 틀 배치) */
.site-header {
  text-align: center;
  padding: 40px 20px;
  background-color: #1e3a5f;
  color: white;
}

.main {
  max-width: 900px;
  margin: 0 auto;
  /* 좌우 auto = 가운데 정렬(width있어야 동작 한다) */
  padding: 20px;
}

.menu-grid {
  display: flex;
  gap: 40px;
  /* 세부조정 */
  flex-wrap: wrap;
}
/* 3단계 컴포넌트 스타일링 */
.card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  flex: 1 1 240px;
  background-color: #fff8f0;
}

.card img {
  width: 100%;
  display: inline-block;
  /* 기본 인라인이다 . 이녀석은 자잘한 속성들이 안먹힐 수 있음 */
  /* 하단에 3~4px 자동 여백이 생길 수 있음 */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.card-body {
  padding: 16px;
}

.price {
  margin-top: 50px;
  font-weight: bold;
  border-radius: 10px;
  color: #e53e3e;
}

/* 4단계 세부 스타일링 */

/* 5단계 -반응형 처리
화면이 768px 이하일 때 카드를 세로로 쌓는다 */

@media (max-width: 500px) {
  .menu-grid {
    flex-direction: column;
  }
  .card {
    flex: none;
    width: 100%;
  }
}
더보기

결과화면

'HTML_CSS > HTML_CSS' 카테고리의 다른 글

HTML_CSS 7강 (핵심 개념 - 자주 쓰는 CSS 레이아웃 패턴 7가지)  (1) 2026.04.22
HTML_CSS 6강 (Flexbox & 배경)  (0) 2026.04.22
HTML_CSS 4강(CSS 선택자 & 박스모델)  (1) 2026.04.21
HTML_CSS 3강(display, 단위, 색상)  (0) 2026.04.20
HTML_CSS 2강 (인스타그램 프로필 만들기)  (0) 2026.04.20
'HTML_CSS/HTML_CSS' Related Articles more