CSS의 모든 것: 초보자를 위한 완벽 가이드

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 지정하는 언어로, HTML로 작성된 구조에 생동감과 시각적인 매력을 더합니다. 이번 글에서는 CSS의 기본 개념부터 선택자, 속성, 크기 단위, 애니메이션, 그리고 스타일링 팁까지 초보자를 위한 CSS 필수 정보를 체계적으로 정리하였습니다.

---

CSS란 무엇인가?

CSS는 웹 페이지의 레이아웃, 색상, 글꼴, 여백 등을 정의하며, HTML과 결합하여 웹 페이지를 시각적으로 풍성하게 만듭니다.

• CSS 지원 브라우저 확인하기
  CSS의 특정 기능이 지원되는 브라우저를 알고 싶다면 caniuse.com을 활용하세요. 최신 CSS 기능의 지원 여부를 한눈에 확인할 수 있습니다.

---

소제목 1: CSS 적용 방법

CSS는 HTML 문서에 여러 가지 방식으로 적용할 수 있습니다.

1. 외부 CSS

CSS 코드를 별도의 파일에 작성하고 HTML에서 링크하여 불러옵니다.

<link rel="stylesheet" href="styles.css">

2. 내부 CSS

HTML 파일 내부의 <style> 태그 안에 CSS를 작성합니다.

<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
  }
</style>

3. 인라인 CSS

HTML 태그에 직접 style 속성을 사용합니다.

<h1 style="color: blue; text-align: center;">Welcome to CSS</h1>

CSS 리셋: 초기화의 중요성

모든 브라우저는 기본적인 스타일을 가지고 있습니다. 이 기본값을 제거하려면 CSS Reset을 사용하세요. 아래는 가장 많이 사용되는 Eric Meyer의 CSS Reset 코드입니다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

---

소제목 2: CSS 선택자

CSS 선택자는 스타일을 적용할 HTML 요소를 지정합니다.

1. 기본 선택자

• 유형 선택자(Type Selector): 특정 태그를 선택합니다.

p {
  color: red;
}

• 전체 선택자(Universal Selector): 모든 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
}

• ID 선택자(ID Selector): id 속성이 지정된 특정 요소를 선택합니다.

#header {
  text-align: center;
}

• 클래스 선택자(Class Selector): class 속성이 지정된 요소를 선택합니다.

.highlight {
  background-color: yellow;
}

2. 복합 선택자

• 자손 선택자: 특정 요소의 모든 자손을 선택합니다.

div p {
  color: blue;
}

• 자식 선택자: 특정 요소의 직계 자식을 선택합니다.

div > p {
  font-size: 16px;
}

• 인접 형제 선택자: 같은 부모를 가진 형제 요소 중 바로 다음 요소를 선택합니다.

h1 + p {
  margin-top: 10px;
}

---

소제목 3: 속성 선택자

속성 선택자를 사용하면 특정 속성을 가진 HTML 요소를 스타일링할 수 있습니다.

• [attribute]: 특정 속성을 가진 요소 선택

a[title] {
  color: blue;
}

• [attribute=value]: 특정 값을 가진 속성을 선택

input[type="text"] {
  border: 1px solid #ccc;
}

• [attribute~=value]: 공백으로 구분된 특정 단어를 포함한 속성값 선택

a[title~="web"] {
  color: red;
}

---

소제목 4: 의사 클래스와 의사 요소

1. 의사 클래스 선택자(Pseudo-Class Selector)

특정 상태의 요소를 선택할 때 사용합니다.

• :hover: 마우스를 올렸을 때
• :first-child: 부모 요소의 첫 번째 자식
• :visited: 방문한 링크

a:hover {
  text-decoration: underline;
}

 

2. 의사 요소 선택자(Pseudo-Element Selector)

특정 요소의 일부를 스타일링할 때 사용합니다.

• ::before: 요소의 내용 앞에 추가
• ::after: 요소의 내용 뒤에 추가
• ::first-letter: 첫 글자만 스타일링

p::first-letter {
  font-size: 2em;
  color: red;
}

---

소제목 5: CSS 크기 단위와 배치

1. 고정 단위와 가변 단위

• 고정 단위(px): 고정된 크기를 지정합니다.
• 가변 단위: 화면 크기에 따라 크기가 변하는 단위
  • em: 부모 요소의 글꼴 크기 기준
  • rem: 최상위 요소의 글꼴 크기 기준
  • vw/vh: 화면의 너비/높이를 기준

p {
  font-size: 1.5em; /* 부모 요소의 크기의 1.5배 */
}

2. 박스 모델과 여백

• padding: 콘텐츠와 경계선 사이의 여백
• margin: 요소 외부의 간격

div {
  width: 300px;
  padding: 20px;
  margin: 10px;
  box-sizing: border-box;
}​

---

소제목 6: 애니메이션과 전환 효과

CSS를 사용하면 간단한 애니메이션과 전환 효과를 구현할 수 있습니다.

1. @keyframes

요소의 애니메이션 동작을 정의합니다.

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

div {
  animation: move 2s infinite;
}

2. 전환 효과

요소의 스타일이 변경될 때 전환 효과를 추가합니다.

button {
  transition: all 0.3s;
}

button:hover {
  background-color: blue;
  color: white;
}

---

결론

CSS는 HTML의 구조를 아름답고 생동감 있게 만들어주는 강력한 도구입니다.