티스토리 뷰

웹제작 강의

[웹개발강의] 건물짓는 것에 비유하면, CSS = 인테리어 + 디자인

Coding Life 2025. 4. 7. 13:05

🏗️ 웹사이트는 마치 건물과 같아요

📦 1. HTML = 건물의 골격, 뼈대

HTML은 벽, 기둥, 천장 같은 구조를 담당해요.
방이 몇 개인지, 창문이 어디 있는지, 문이 어떻게 생겼는지 알려주는 역할이죠.

<h1>환영합니다</h1>
<p>이곳은 저희 회사 홈페이지입니다.</p>

🎨 2. CSS = 인테리어 + 디자인

CSS는 그 구조물에 색을 칠하고, 바닥재를 깔고, 가구를 배치하는 역할을 해요!
즉, 보기 좋고 예쁘게 만드는 기술입니다!

h1 {
  color: blue;
  font-size: 32px;
}

➡️ 벽을 파란색으로 칠하고, 글자를 크게 만드는 거죠.

🛠️ 3. 예시로 완전한 비유!

요소 웹에서의 역할 건물에서의 비유

HTML	구조 만들기	벽 세우기, 방 나누기
CSS	스타일 입히기	페인트 칠, 인테리어
JS	동작 추가하기	자동문, 엘리베이터 버튼

💡 진짜 예시!

<!-- HTML (건물의 뼈대) -->
<h1>나의 첫 홈페이지</h1>
<p>방문해주셔서 감사합니다.</p>

<!-- CSS (디자인) -->
<style>
  h1 {
    color: purple;
    text-align: center;
  }
  p {
    font-family: 'Noto Sans KR';
    background-color: #f0f0f0;
    padding: 10px;
  }
</style>

➡️ 여기서 CSS는 제목을 보라색으로, 본문은 회색 배경 + 여백을 줘서
홈페이지를 예쁘게 꾸며준 디자이너 역할을 하고 있는 거예요! 🎨🛋️

🔚 정리하면!

HTML은 벽돌을 쌓아 집을 짓는 일이고,
CSS는 그 집을 예쁘게 꾸미는 일입니다 🏠✨

CSS 덕분에 웹페이지가 ‘살아 있는 공간’처럼 보이는 것이에요!

CSS를 실전에서 사용할 때 가장 자주 등장하는 20가지 스타일 속성을 초보자가 바로 이해하고 써먹을 수 있게 예시와 설명과 함께 정리해드릴게요!

🎯 실전 CSS 자주 쓰는 속성 20선 (설명 + 예시)

✅ 박스 & 배경 관련

color – 글자 색

color: red;

background-color – 배경색

background-color: yellow;

width, height – 너비와 높이 지정

width: 300px;
height: 100px;

padding – 안쪽 여백 (내용과 테두리 사이)

padding: 20px;

margin – 바깥 여백 (요소 밖 공간)

margin: 10px;

border – 테두리 설정

border: 1px solid black;

border-radius – 모서리 둥글게

border-radius: 10px;

✅ 글자 관련

font-size – 글자 크기

font-size: 16px;

font-family – 글꼴 지정

font-family: Arial, sans-serif;

text-align – 글자 정렬 (left, center, right)

text-align: center;

font-weight – 글자 굵기 (normal, bold, 숫자 등)

font-weight: bold;

line-height – 줄 간격

line-height: 1.5;

✅ 배치 관련

display – 박스 유형 (block, inline, flex 등)

display: flex;

justify-content – 가로 정렬 (flex와 함께 사용)

justify-content: center;

align-items – 세로 정렬 (flex와 함께 사용)

align-items: center;

position – 위치 지정 (static, relative, absolute, fixed 등)

position: absolute;
top: 10px;
left: 20px;

z-index – 요소의 쌓이는 순서

z-index: 10;

✅ 기타

cursor – 마우스 커서 모양

cursor: pointer;

transition – 부드러운 변화

transition: all 0.3s ease;

box-shadow – 그림자 효과

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

💬 예시 조각

<div style="
  background-color: #f0f0f0;
  color: #333;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  width: 300px;
  margin: 30px auto;
  text-align: center;
  font-family: 'Noto Sans KR', sans-serif;
">
  🎉 안녕하세요! 이건 예쁜 CSS 박스예요!
</div>

📌 요약 카테고리

범주 관련 속성

📦 레이아웃	display, position, flex, justify-content
🎨 색과 스타일	color, background-color, box-shadow
✍️ 글자	font-size, font-family, font-weight, text-align
🧱 박스	width, height, padding, margin, border, border-radius
⚙️ 기타 효과	cursor, transition, z-index

아래는 CSS에서 가장 자주 사용하는 20가지 속성을 설명과 예시 박스로 시각화한 학습용 웹사이트 예제 코드입니다.
✅ 초보자에게 직관적으로 보이도록 디자인했고, 모바일 반응형도 적용돼 있어요.

✅ 실전 CSS 20선 – 학습용 웹사이트 예제 (HTML + CSS)

🎨 실전 CSS 속성 20선 가이드

1. `color` – 글자 색

이 글자는 빨간색입니다

color: red;

2. `background-color` – 배경색

이 박스는 노란 배경입니다

background-color: yellow;

3. `width / height` – 너비/높이

고정 크기 박스

width: 150px; height: 60px;

4. `padding` – 안쪽 여백

안쪽 여백이 넓어요

padding: 20px;

5. `margin` – 바깥 여백

바깥 여백이 넓어요

margin: 20px;

6. `border` – 테두리

초록 점선 테두리

border: 2px dashed green;

7. `border-radius` – 둥근 모서리

모서리가 둥글어요

border-radius: 10px;

8. `font-size` – 글자 크기

큰 글자입니다

font-size: 24px;

9. `font-family` – 글꼴

이건 코드 느낌 글꼴!

font-family: 'Courier New', monospace;

10. `text-align` – 글자 정렬

오른쪽 정렬입니다

text-align: right;

11. `font-weight` – 글자 굵기

굵은 글자

font-weight: bold;

12. `line-height` – 줄 간격

줄과 줄 사이가 넓어요
두 번째 줄입니다

line-height: 2;

13. `display` – 박스 유형

이건 인라인 요소

display: inline;

14. `justify-content` – 가로 정렬 (Flex)

display: flex; justify-content: center;

15. `align-items` – 세로 정렬 (Flex)

정중앙 정렬

align-items: center;

16. `position` – 위치 설정

absolute

position: absolute;

17. `z-index` – 요소 쌓는 순서

z-index: 1 / 2;

18. `cursor` – 마우스 커서

이 글자에 마우스를 올려보세요

cursor: pointer;

19. `transition` – 부드러운 변화

마우스를 올려보세요

transition: all 0.3s;

20. `box-shadow` – 그림자 효과

그림자 있는 박스

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>실전 CSS 속성 20선</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: #f8f9fa;
      font-family: 'Noto Sans KR', sans-serif;
    }

    .css-box {
      background-color: #fff;
      border: 1px solid #dee2e6;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.03);
    }

    .css-box h5 {
      color: #007bff;
      font-size: 1.1rem;
    }

    .example {
      background-color: #f0f4f8;
      padding: 10px;
      border-radius: 6px;
      margin-top: 10px;
      font-family: monospace;
    }

    .code {
      background-color: #212529;
      color: #f8f9fa;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.9rem;
      margin-top: 8px;
    }
  </style>
</head>
<body>
  <div class="container py-5">
    <h1 class="text-center mb-5">🎨 실전 CSS 속성 20선 가이드</h1>

    <!-- 반복 예시들 -->
    <div class="row">
      <div class="col-md-6">
        <div class="css-box">
          <h5>1. <code>color</code> – 글자 색</h5>
          <div class="example" style="color: red;">이 글자는 빨간색입니다</div>
          <div class="code">color: red;</div>
        </div>

        <div class="css-box">
          <h5>2. <code>background-color</code> – 배경색</h5>
          <div class="example" style="background-color: yellow;">이 박스는 노란 배경입니다</div>
          <div class="code">background-color: yellow;</div>
        </div>

        <div class="css-box">
          <h5>3. <code>width / height</code> – 너비/높이</h5>
          <div class="example" style="width: 150px; height: 60px; background: #ccc;">고정 크기 박스</div>
          <div class="code">width: 150px; height: 60px;</div>
        </div>

        <div class="css-box">
          <h5>4. <code>padding</code> – 안쪽 여백</h5>
          <div class="example" style="padding: 20px; background: #e9ecef;">안쪽 여백이 넓어요</div>
          <div class="code">padding: 20px;</div>
        </div>

        <div class="css-box">
          <h5>5. <code>margin</code> – 바깥 여백</h5>
          <div class="example" style="margin: 20px; background: #e9ecef;">바깥 여백이 넓어요</div>
          <div class="code">margin: 20px;</div>
        </div>

        <div class="css-box">
          <h5>6. <code>border</code> – 테두리</h5>
          <div class="example" style="border: 2px dashed green;">초록 점선 테두리</div>
          <div class="code">border: 2px dashed green;</div>
        </div>

        <div class="css-box">
          <h5>7. <code>border-radius</code> – 둥근 모서리</h5>
          <div class="example" style="border: 1px solid #aaa; border-radius: 10px;">모서리가 둥글어요</div>
          <div class="code">border-radius: 10px;</div>
        </div>

        <div class="css-box">
          <h5>8. <code>font-size</code> – 글자 크기</h5>
          <div class="example" style="font-size: 24px;">큰 글자입니다</div>
          <div class="code">font-size: 24px;</div>
        </div>

        <div class="css-box">
          <h5>9. <code>font-family</code> – 글꼴</h5>
          <div class="example" style="font-family: 'Courier New', monospace;">이건 코드 느낌 글꼴!</div>
          <div class="code">font-family: 'Courier New', monospace;</div>
        </div>

        <div class="css-box">
          <h5>10. <code>text-align</code> – 글자 정렬</h5>
          <div class="example" style="text-align: right;">오른쪽 정렬입니다</div>
          <div class="code">text-align: right;</div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="css-box">
          <h5>11. <code>font-weight</code> – 글자 굵기</h5>
          <div class="example" style="font-weight: bold;">굵은 글자</div>
          <div class="code">font-weight: bold;</div>
        </div>

        <div class="css-box">
          <h5>12. <code>line-height</code> – 줄 간격</h5>
          <div class="example" style="line-height: 2;">줄과 줄 사이가 넓어요<br>두 번째 줄입니다</div>
          <div class="code">line-height: 2;</div>
        </div>

        <div class="css-box">
          <h5>13. <code>display</code> – 박스 유형</h5>
          <div class="example" style="display: inline;">이건 인라인 요소</div>
          <div class="code">display: inline;</div>
        </div>

        <div class="css-box">
          <h5>14. <code>justify-content</code> – 가로 정렬 (Flex)</h5>
          <div class="example d-flex justify-content-center" style="gap: 10px;">
            <div style="width: 40px; height: 40px; background: #0d6efd;"></div>
            <div style="width: 40px; height: 40px; background: #0d6efd;"></div>
          </div>
          <div class="code">display: flex; justify-content: center;</div>
        </div>

        <div class="css-box">
          <h5>15. <code>align-items</code> – 세로 정렬 (Flex)</h5>
          <div class="example d-flex align-items-center" style="height: 60px;">
            <div style="width: 40px; height: 40px; background: #20c997;"></div>
            <span style="margin-left: 10px;">정중앙 정렬</span>
          </div>
          <div class="code">align-items: center;</div>
        </div>

        <div class="css-box">
          <h5>16. <code>position</code> – 위치 설정</h5>
          <div class="example" style="position: relative; height: 60px; background: #eee;">
            <div style="position: absolute; top: 10px; right: 10px; background: #ffc107; padding: 4px;">absolute</div>
          </div>
          <div class="code">position: absolute;</div>
        </div>

        <div class="css-box">
          <h5>17. <code>z-index</code> – 요소 쌓는 순서</h5>
          <div class="example" style="position: relative;">
            <div style="position: absolute; background: red; width: 60px; height: 60px; z-index: 1;"></div>
            <div style="position: absolute; background: blue; width: 60px; height: 60px; left: 20px; top: 20px; z-index: 2;"></div>
          </div>
          <div class="code">z-index: 1 / 2;</div>
        </div>

        <div class="css-box">
          <h5>18. <code>cursor</code> – 마우스 커서</h5>
          <div class="example" style="cursor: pointer;">이 글자에 마우스를 올려보세요</div>
          <div class="code">cursor: pointer;</div>
        </div>

        <div class="css-box">
          <h5>19. <code>transition</code> – 부드러운 변화</h5>
          <div class="example" style="background:#0dcaf0; color: #fff; padding: 10px; transition: all 0.3s;" onmouseover="this.style.background='#0a58ca'" onmouseout="this.style.background='#0dcaf0'">
            마우스를 올려보세요
          </div>
          <div class="code">transition: all 0.3s;</div>
        </div>

        <div class="css-box">
          <h5>20. <code>box-shadow</code> – 그림자 효과</h5>
          <div class="example" style="box-shadow: 0 4px 8px rgba(0,0,0,0.2); background: #fff;">
            그림자 있는 박스
          </div>
          <div class="code">box-shadow: 0 4px 8px rgba(0,0,0,0.2);</div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

저작자표시 비영리 변경금지

'웹제작 강의' 카테고리의 다른 글

[웹개발] 주석(Comment) 처리 방법을 HTML, CSS, JavaScript, PHP 각 언어별로 정리 (0)	2025.04.08
[웹개발강의] <div>와 <span> 태그의 차이점은 웹 개발자라면 꼭 알아야 하는 기본 중 기본 (0)	2025.04.07
CSS 도우미 도구: 부트스트랩(Bootstrap) vs 테일윈드(Tailwind CSS) (0)	2025.04.06
html, CSS의 기초부터 배울 수 있는 웹사이트 추천 (0)	2025.03.27
[웹제작 강의] 2주차 세부 계획안: CSS 개념 및 스타일링 (0)	2025.03.19

공지사항

내 인생은 코딩....

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

My Coding World

티스토리 뷰

[웹개발강의] 건물짓는 것에 비유하면, CSS = 인테리어 + 디자인

🏗️ 웹사이트는 마치 건물과 같아요

📦 1. HTML = 건물의 골격, 뼈대

🎨 2. CSS = 인테리어 + 디자인

🛠️ 3. 예시로 완전한 비유!

💡 진짜 예시!

🔚 정리하면!

🎯 실전 CSS 자주 쓰는 속성 20선 (설명 + 예시)

✅ 박스 & 배경 관련

✅ 글자 관련

✅ 배치 관련

✅ 기타

💬 예시 조각

📌 요약 카테고리

✅ 실전 CSS 20선 – 학습용 웹사이트 예제 (HTML + CSS)

🎨 실전 CSS 속성 20선 가이드

1. `color` – 글자 색

2. `background-color` – 배경색

3. `width / height` – 너비/높이

4. `padding` – 안쪽 여백

5. `margin` – 바깥 여백

6. `border` – 테두리

7. `border-radius` – 둥근 모서리

8. `font-size` – 글자 크기

9. `font-family` – 글꼴

10. `text-align` – 글자 정렬

11. `font-weight` – 글자 굵기

12. `line-height` – 줄 간격

13. `display` – 박스 유형

14. `justify-content` – 가로 정렬 (Flex)

15. `align-items` – 세로 정렬 (Flex)

16. `position` – 위치 설정

17. `z-index` – 요소 쌓는 순서

18. `cursor` – 마우스 커서

19. `transition` – 부드러운 변화

20. `box-shadow` – 그림자 효과

'웹제작 강의' 카테고리의 다른 글

티스토리툴바

티스토리 뷰

[웹개발강의] 건물짓는 것에 비유하면, CSS = 인테리어 + 디자인

🏗️ 웹사이트는 마치 건물과 같아요

📦 1. HTML = 건물의 골격, 뼈대

🎨 2. CSS = 인테리어 + 디자인

🛠️ 3. 예시로 완전한 비유!

💡 진짜 예시!

🔚 정리하면!

🎯 실전 CSS 자주 쓰는 속성 20선 (설명 + 예시)

✅ 박스 & 배경 관련

✅ 글자 관련

✅ 배치 관련

✅ 기타

💬 예시 조각

📌 요약 카테고리

✅ 실전 CSS 20선 – 학습용 웹사이트 예제 (HTML + CSS)

🎨 실전 CSS 속성 20선 가이드

1. color – 글자 색

2. background-color – 배경색

3. width / height – 너비/높이

4. padding – 안쪽 여백

5. margin – 바깥 여백

6. border – 테두리

7. border-radius – 둥근 모서리

8. font-size – 글자 크기

9. font-family – 글꼴

10. text-align – 글자 정렬

11. font-weight – 글자 굵기

12. line-height – 줄 간격

13. display – 박스 유형

14. justify-content – 가로 정렬 (Flex)

15. align-items – 세로 정렬 (Flex)

16. position – 위치 설정

17. z-index – 요소 쌓는 순서

18. cursor – 마우스 커서

19. transition – 부드러운 변화

20. box-shadow – 그림자 효과

'웹제작 강의' 카테고리의 다른 글

티스토리툴바

1. `color` – 글자 색

2. `background-color` – 배경색

3. `width / height` – 너비/높이

4. `padding` – 안쪽 여백

5. `margin` – 바깥 여백

6. `border` – 테두리

7. `border-radius` – 둥근 모서리

8. `font-size` – 글자 크기

9. `font-family` – 글꼴

10. `text-align` – 글자 정렬

11. `font-weight` – 글자 굵기

12. `line-height` – 줄 간격

13. `display` – 박스 유형

14. `justify-content` – 가로 정렬 (Flex)

15. `align-items` – 세로 정렬 (Flex)

16. `position` – 위치 설정

17. `z-index` – 요소 쌓는 순서

18. `cursor` – 마우스 커서

19. `transition` – 부드러운 변화

20. `box-shadow` – 그림자 효과