본문 바로가기
웹제작 강의

[웹개발강의] CSS 초보자 필수 기법 30선 – 정말 쉬운 설명

by Coding Life 2025. 4. 10.

아래는 초보자가 꼭 알아야 할 CSS 필수 기법 30가지를 📌 한 줄 설명 + 사용 예시 형식으로 아주 쉽게 정리한 자료입니다.

 

🎯 CSS 초보자 필수 기법 30선 – 정말 쉬운 설명!

🎨 스타일 관련

  1. color – 글자 색 지정
color: blue;
  1. background-color – 배경 색 지정
background-color: yellow;
  1. font-size – 글자 크기
font-size: 20px;
  1. font-family – 글꼴 지정
font-family: Arial, sans-serif;
  1. font-weight – 글자 두께 (bold 등)
font-weight: bold;
  1. font-style – 기울임
font-style: italic;
  1. text-align – 글자 정렬
text-align: center;
  1. text-decoration – 밑줄, 취소선 등
text-decoration: underline;
  1. line-height – 줄 간 간격
line-height: 1.5;
  1. letter-spacing – 글자 사이 간격
letter-spacing: 2px;

📏 레이아웃 & 박스 모델

  1. width – 너비
width: 300px;
  1. height – 높이
height: 150px;
  1. padding – 내부 여백
padding: 20px;
  1. margin – 바깥 여백
margin: 10px;
  1. border – 테두리 스타일
border: 1px solid black;
  1. border-radius – 둥근 모서리
border-radius: 10px;
  1. box-shadow – 그림자 효과
box-shadow: 0 4px 6px rgba(0,0,0,0.1);

💡 박스 배치 & 정렬

  1. display – 요소의 표시 방식
display: block;
display: flex;
  1. flex-direction – Flex 방향 설정
flex-direction: row; /* or column */
  1. justify-content – 주 축 정렬
justify-content: center;
  1. align-items – 교차 축 정렬
align-items: center;
  1. gap – 아이템 간 간격
gap: 20px;

🎯 위치 & 반응형

  1. position – 위치 속성 (static, relative, absolute 등)
position: absolute;
  1. top, left, right, bottom – 위치 지정
top: 10px; left: 20px;
  1. z-index – 쌓임 순서
z-index: 2;
  1. overflow – 넘치는 콘텐츠 처리
overflow: auto;
  1. media query – 반응형 디자인
@media (max-width: 768px) {
  body { background: pink; }
}

🎬 기타 효과

  1. cursor – 마우스 커서 모양
cursor: pointer;
  1. transition – 부드러운 변화 효과
transition: all 0.3s ease;
  1. :hover – 마우스 올렸을 때 스타일
button:hover {
  background-color: green;
}

✅ 마무리 정리

분류 핵심 기법

텍스트 color, font-size, text-align 등
박스 디자인 padding, margin, border, shadow
정렬/레이아웃 display, flex, justify-content
위치/반응형 position, z-index, media
인터랙션 hover, cursor, transition 등

 

아래는 위의 코드를 이용해서 실전 코드를 만드는 예제입니다.

실제 코드도 함께 제공합니다.

웹화면에는 아래와 같이 나타납니다.

....... 나머지는 실제 화면으로 보시길 권해드립니다.

개발 코드 :

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CSS 30선 실습 웹사이트</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      background-color: #f5f8fa;
      font-family: 'Noto Sans KR', sans-serif;
    }
    .css-card {
      background-color: #fff;
      border: 1px solid #dee2e6;
      border-radius: 10px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }
    .preview-box {
      padding: 15px;
      border: 1px dashed #ced4da;
      border-radius: 6px;
      margin-top: 10px;
      background-color: #f8f9fa;
    }
    .code-block {
      background-color: #212529;
      color: #f8f9fa;
      padding: 10px;
      border-radius: 6px;
      font-family: monospace;
      font-size: 0.9rem;
      white-space: pre-wrap;
      margin-top: 10px;
    }
    .hover-effect:hover {
      background-color: #198754;
      color: #fff;
    }
    .transition-box {
      transition: all 0.3s ease;
    }
    .transition-box:hover {
      transform: scale(1.05);
    }
    .flexbox {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }
    .flex-item {
      width: 60px;
      height: 60px;
      background-color: #0d6efd;
      border-radius: 5px;
    }
    @media (max-width: 768px) {
      body {
        background-color: #fff0f6;
      }
    }
  </style>
</head>
<body>
  <div class="container py-5">
    <h1 class="text-center mb-5">🎨 CSS 필수 기법 30선 - 실습 웹사이트</h1>

    <!-- 반복 카드 1~30 -->
    <div class="css-card"><h5>1. <code>color</code></h5><div class="preview-box" style="color: blue;">파란 글자</div><div class="code-block">color: blue;</div></div>
    <div class="css-card"><h5>2. <code>background-color</code></h5><div class="preview-box" style="background-color: yellow;">노란 배경</div><div class="code-block">background-color: yellow;</div></div>
    <div class="css-card"><h5>3. <code>font-size</code></h5><div class="preview-box" style="font-size: 24px;">큰 글자</div><div class="code-block">font-size: 24px;</div></div>
    <div class="css-card"><h5>4. <code>font-family</code></h5><div class="preview-box" style="font-family: 'Courier New';">코드 느낌 글자</div><div class="code-block">font-family: 'Courier New';</div></div>
    <div class="css-card"><h5>5. <code>font-weight</code></h5><div class="preview-box" style="font-weight: bold;">굵은 글자</div><div class="code-block">font-weight: bold;</div></div>
    <div class="css-card"><h5>6. <code>font-style</code></h5><div class="preview-box" style="font-style: italic;">기울인 글자</div><div class="code-block">font-style: italic;</div></div>
    <div class="css-card"><h5>7. <code>text-align</code></h5><div class="preview-box" style="text-align: center;">중앙 정렬</div><div class="code-block">text-align: center;</div></div>
    <div class="css-card"><h5>8. <code>text-decoration</code></h5><div class="preview-box" style="text-decoration: underline;">밑줄 있는 글자</div><div class="code-block">text-decoration: underline;</div></div>
    <div class="css-card"><h5>9. <code>line-height</code></h5><div class="preview-box" style="line-height: 2;">줄 간격 넓은<br>문장입니다</div><div class="code-block">line-height: 2;</div></div>
    <div class="css-card"><h5>10. <code>letter-spacing</code></h5><div class="preview-box" style="letter-spacing: 4px;">띄어진 글자</div><div class="code-block">letter-spacing: 4px;</div></div>
    <div class="css-card"><h5>11. <code>width</code></h5><div class="preview-box" style="width: 200px; background: #eee;">너비 고정</div><div class="code-block">width: 200px;</div></div>
    <div class="css-card"><h5>12. <code>height</code></h5><div class="preview-box" style="height: 60px; background: #eee;">높이 고정</div><div class="code-block">height: 60px;</div></div>
    <div class="css-card"><h5>13. <code>padding</code></h5><div class="preview-box" style="padding: 20px; background: #e9ecef;">패딩 적용</div><div class="code-block">padding: 20px;</div></div>
    <div class="css-card"><h5>14. <code>margin</code></h5><div class="preview-box" style="margin: 20px; background: #e9ecef;">마진 적용</div><div class="code-block">margin: 20px;</div></div>
    <div class="css-card"><h5>15. <code>border</code></h5><div class="preview-box" style="border: 2px solid #000;">검정 테두리</div><div class="code-block">border: 2px solid #000;</div></div>
    <div class="css-card"><h5>16. <code>border-radius</code></h5><div class="preview-box" style="border: 1px solid #000; border-radius: 10px;">둥근 모서리</div><div class="code-block">border-radius: 10px;</div></div>
    <div class="css-card"><h5>17. <code>box-shadow</code></h5><div class="preview-box" style="box-shadow: 0 4px 6px rgba(0,0,0,0.1);">그림자 효과</div><div class="code-block">box-shadow: 0 4px 6px rgba(0,0,0,0.1);</div></div>
    <div class="css-card"><h5>18. <code>display</code></h5><div class="preview-box" style="display: inline;">inline 요소</div><div class="code-block">display: inline;</div></div>
    <div class="css-card"><h5>19. <code>flex-direction</code></h5><div class="preview-box flexbox" style="flex-direction: row;"><div class="flex-item"></div><div class="flex-item"></div></div><div class="code-block">flex-direction: row;</div></div>
    <div class="css-card"><h5>20. <code>justify-content</code></h5><div class="preview-box flexbox" style="justify-content: space-around;"><div class="flex-item"></div><div class="flex-item"></div></div><div class="code-block">justify-content: space-around;</div></div>
    <div class="css-card"><h5>21. <code>align-items</code></h5><div class="preview-box flexbox" style="align-items: center; height: 80px;"><div class="flex-item"></div><div class="flex-item"></div></div><div class="code-block">align-items: center;</div></div>
    <div class="css-card"><h5>22. <code>gap</code></h5><div class="preview-box flexbox"><div class="flex-item"></div><div class="flex-item"></div></div><div class="code-block">gap: 10px;</div></div>
    <div class="css-card"><h5>23. <code>position</code></h5><div class="preview-box" style="position: relative; height: 60px; background: #eee;"><div style="position: absolute; top: 10px; right: 10px; background: #0dcaf0; padding: 5px;">절대 위치</div></div><div class="code-block">position: absolute;</div></div>
    <div class="css-card"><h5>24. <code>top / left</code></h5><div class="preview-box" style="position: relative; height: 60px;"><div style="position: absolute; top: 10px; left: 10px; background: #fd7e14; padding: 5px;">top/left</div></div><div class="code-block">top: 10px; left: 10px;</div></div>
    <div class="css-card"><h5>25. <code>z-index</code></h5><div class="preview-box" style="position: relative; height: 60px;"><div style="position: absolute; background: red; width: 40px; height: 40px; z-index: 1;"></div><div style="position: absolute; left: 20px; top: 10px; background: blue; width: 40px; height: 40px; z-index: 2;"></div></div><div class="code-block">z-index: 1 / 2;</div></div>
    <div class="css-card"><h5>26. <code>overflow</code></h5><div class="preview-box" style="width: 200px; height: 60px; overflow: auto; background: #f8f9fa;">긴 텍스트긴 텍스트긴 텍스트긴 텍스트긴 텍스트긴 텍스트</div><div class="code-block">overflow: auto;</div></div>
    <div class="css-card"><h5>27. <code>@media</code></h5><p class="preview-box">화면이 작으면 배경이 분홍색!</p><div class="code-block">@media (max-width: 768px) { body { background-color: pink; } }</div></div>
    <div class="css-card"><h5>28. <code>cursor</code></h5><div class="preview-box" style="cursor: pointer;">👆 마우스를 올려보세요</div><div class="code-block">cursor: pointer;</div></div>
    <div class="css-card"><h5>29. <code>transition</code></h5><div class="preview-box transition-box" style="background: #ffc107;">올리면 부드럽게 확대</div><div class="code-block">transition: all 0.3s ease;</div></div>
    <div class="css-card"><h5>30. <code>:hover</code></h5><div class="preview-box hover-effect">마우스 올리면 색 변함</div><div class="code-block">.hover-effect:hover { background-color: green; }</div></div>
  </div>
</body>
</html>

 

실제 웹화면 코드를 실행하면 아래와 같이 나옵니다.

🎨 CSS 필수 기법 30선 - 실습 웹사이트

1. color
파란 글자
color: blue;
2. background-color
노란 배경
background-color: yellow;
3. font-size
큰 글자
font-size: 24px;
4. font-family
코드 느낌 글자
font-family: 'Courier New';
5. font-weight
굵은 글자
font-weight: bold;
6. font-style
기울인 글자
font-style: italic;
7. text-align
중앙 정렬
text-align: center;
8. text-decoration
밑줄 있는 글자
text-decoration: underline;
9. line-height
줄 간격 넓은
문장입니다
line-height: 2;
10. letter-spacing
띄어진 글자
letter-spacing: 4px;
11. width
너비 고정
width: 200px;
12. height
높이 고정
height: 60px;
13. padding
패딩 적용
padding: 20px;
14. margin
마진 적용
margin: 20px;
15. border
검정 테두리
border: 2px solid #000;
16. border-radius
둥근 모서리
border-radius: 10px;
17. box-shadow
그림자 효과
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
18. display
inline 요소
display: inline;
19. flex-direction
 
 
flex-direction: row;
20. justify-content
 
 
justify-content: space-around;
21. align-items
 
 
align-items: center;
22. gap
 
 
gap: 10px;
23. position
절대 위치
position: absolute;
24. top / left
top/left
top: 10px; left: 10px;
25. z-index
 
 
z-index: 1 / 2;
26. overflow
긴 텍스트긴 텍스트긴 텍스트긴 텍스트긴 텍스트긴 텍스트
overflow: auto;
27. @media

화면이 작으면 배경이 분홍색!

@media (max-width: 768px) { body { background-color: pink; } }
28. cursor
👆 마우스를 올려보세요
cursor: pointer;
29. transition
올리면 부드럽게 확대
transition: all 0.3s ease;
30. :hover
마우스 올리면 색 변함
.hover-effect:hover { background-color: green; }

이제 CSS의 첫관문을 무사히 수행하셨습니다.^^

수고하셨습니다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)

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

[웹개발강의] 버튼 클릭 시 알림 띄우기 (자바스크립트 기초)  (0) 2025.04.14
[웹개발강의] CSS에서 선택자와 속성이란?  (0) 2025.04.14
[웹개발강의] HTML에서 CSS를 적용하는 3가지 방법  (0) 2025.04.10
[웹개발강의] HTML 대표 태그 30선 – 초보자용 설명과 예시  (0) 2025.04.09
[웹개발강의] CSS, JS 코드가 들어 있어도 왜 "HTML 문서"라고 부르나요?  (0) 2025.04.08

관련글

티스토리툴바