한국어

CSS 튜토리얼

CSS3 튜토리얼

CSS 고급

CSS 참조

CSS 응답형

CSS3 튜토리얼: 웹 스타일링에 대한 초보자 가이드

CSS는 무엇인가요?

CSS는 캐스케이딩 스타일 시트(Cascading Style Sheets)의 약자로, HTML 또는 XML로 작성된 문서의 표시를 설명하는 강력한 스타일 언어입니다. 웹 세계의 패션 디자이너처럼, 화면, 종이, 기타 미디어에서 요소가 어떻게 표시되어야 하는지 결정합니다.

CSS3 - Tutorial

자신이 집을 짓는다고 상상해 보세요. HTML은 구조 - 벽, 지붕, 기초입니다. 그런 다음 CSS는 집이 좋아 보이게 만드는 모든 것 - 페인트, 페이퍼, 커튼, 가구입니다. CSS는 단순한 웹 페이지를 시각적으로 아름다운 작품으로 만드는 것입니다!

누가 CSS를 배워야 하나요?

아름답고 반응형 웹사이트를 만들고 싶은 모든 사람이 CSS를 배워야 합니다. 이는 다음을 포함합니다:

  1. 웹 개발자
  2. 웹 디자이너
  3. UI/UX 디자이너
  4. 디지털 마케터
  5. 블로거
  6. 웹 기술에 관심이 있는 누구나

초보자라도 걱정하지 마세요! CSS는 직관적이고 쉽게 배울 수 있도록 설계되었습니다. 약간의 연습으로 짧은 시간에 프로처럼 웹사이트를 스타일링할 수 있을 것입니다.

CSS의 종류

CSS는 세 가지 주요 유형이 있습니다:

  1. 인라인 CSS
  2. 내부 CSS
  3. 외부 CSS

이를 몇 가지 예제로 설명해 보겠습니다:

1. 인라인 CSS

인라인 CSS는 HTML 요소에 직접 style 속성을 사용하여 적용됩니다.

<p style="color: blue; font-size: 16px;">이 문단은 파란색이고 글자 크기가 16px입니다.</p>

이 방법은 빠르지만, 큰 프로젝트에서는 내용과 표현을 혼동시키므로 권장되지 않습니다.

2. 내부 CSS

내부 CSS는 HTML <head> 섹션의 <style> 태그 내에 배치됩니다.

<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>이 문단은 녹색이고 글자 크기가 18px입니다.</p>
</body>

이 방법은 단일 페이지 스타일링에 유용하지만, 다중 페이지 웹사이트에서는 비효율적입니다.

3. 외부 CSS

외부 CSS는 별도의 .css 파일에 저장되고 HTML 문서에 연결됩니다.

<!-- HTML 파일에서 -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css 파일에서 */
p {
color: red;
font-size: 20px;
}

이는 내용과 표현을 분리하고 유지보수가 쉬워 큰 프로젝트에 가장 효율적입니다.

CSS 코드 예제

CSS를 실제로 작동하는 예제로 더 깊이 탐구해 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제 멋진 웹사이트</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
color: #333;
text-align: center;
}
.highlight {
background-color: yellow;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>제 멋진 웹사이트에 오신 것을 환영합니다</h1>
<p>이 문단에는 몇 가지 <span class="highlight">강조된</span> 텍스트가 있습니다.</p>
</div>
</body>
</html>

이 예제에서 우리는 내부 CSS를 사용하여 웹 페이지를 스타일링하고 있습니다. 각 부분의 기능을 설명해 보겠습니다:

  • body에 아리알 글꼴과 연한 회색 배경을 설정합니다.
  • .container 클래스는 중앙에 배치된 흰색 상자를 만듭니다.
  • h1은 중앙 정렬된 어두운 회색 텍스트입니다.
  • .highlight 클래스는 노란색 강조 텍스트를 만듭니다.

CSS 사용 이유

  1. 내용과 표현의 분리
  2. 여러 페이지에 걸쳐 일관성 유지
  3. 페이지 로드 시간 단축
  4. 쉬운 유지보수 및 업데이트
  5. 반응형 디자인 기능
  6. 향상된 사용자 경험

CSS 배우기에 필요한 준비 사항

CSS를 시작하려면 다음이 필요합니다:

  1. HTML에 대한 기본 이해
  2. 텍스트 편집기 (Visual Studio Code, Sublime Text, 또는 Notepad)
  3. 웹 브라우저 (Chrome, Firefox, 또는 Safari)
  4. 열정과 실험할 의지!

CSS 튜토리얼 시작하기

이제 기본 사항을 다루었으므로 스타일링을 시작해 보겠습니다. 간단한 웹 페이지를 만들고 단계별로 스타일링해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>제 첫 번째 스타일링 페이지</title>
<style>
/* 여기에 CSS를 추가할 것입니다 */
</style>
</head>
<body>
<header>
<h1>제 웹사이트에 오신 것을 환영합니다</h1>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
<main>
<h2>나에 대해</h2>
<p>안녕하세요! CSS를 배우고 있고 정말 멋집니다!</p>
</main>
<footer>
<p>&copy; 2023 제 웹사이트</p>
</footer>
</body>
</html>

이제 몇 가지 CSS를 추가하여页面을 멋지게 만들어 보겠습니다!

body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

header {
background-color: #35424a;
color: white;
text-align: center;
padding: 1rem;
}

nav ul {
background-color: #2c3e50;
list-style-type: none;
padding: 0;
}

nav ul li {
display: inline-block;
margin-right: 10px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
}

nav ul li a:hover {
background-color: #34495e;
}

main {
padding: 20px;
}

footer {
background-color: #35424a;
color: white;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}

이 CSS는 다음과 같은 작업을 수행합니다:

  • 전체 페이지에 일관된 글꼴과 줄 간격을 설정합니다.
  • 어두운 배경색의 헤더를 중앙 정렬로 만듭니다.
  • 내비게이션 메뉴를 어두운 배경색으로 스타일링하고 인라인으로 표시합니다.
  • 내비게이션 링크에 호버 효과을 추가합니다.
  • 메인 콘텐츠 영역에 패딩을 추가합니다.
  • 고정된 푸터를 하단에 배치합니다.

CSS 속성

CSS는 요소를 스타일링하기 위해 다양한 속성을 사용합니다. 다음은 몇 가지 일반 속성입니다:

속성 설명 예제
color 텍스트 색상 설정 color: blue;
background-color 배경 색상 설정 background-color: #f0f0f0;
font-size 글자 크기 설정 font-size: 16px;
font-family 글꼴 유형 설정 font-family: Arial, sans-serif;
margin 외부 간격 설정 margin: 10px;
padding 내부 간격 설정 padding: 5px;
border 테두리 스타일 설정 border: 1px solid black;
text-align 텍스트 정렬 설정 text-align: center;
display 표시 유형 설정 display: flex;

CSS 고급

CSS에 익숙해지면 다음과 같은 고급 개념을 탐구할 수 있습니다:

  1. Flexbox와 Grid 레이아웃
  2. 미디어 쿼리를 사용한 반응형 디자인
  3. CSS 애니메이션과 전환
  4. Sass나Less와 같은 CSS 프리프로세서
  5. Bootstrap이나Tailwind와 같은 CSS 프레임워크

기억하시라, CSS를 마스터하려면 연습이 중요합니다. 두려워하지 마시고 실험하고 실수를 하세요 - 그게 우리가 배우는 방법입니다! 즐겁게 스타일링하세요!

Credits: Image by storyset

이전 튜토리얼:
CSS - 데이터 타입
다음 튜토리얼:
CSS - 둥근 모서리