CSS Getting Started

4/19/2023
50 minutes to read

데브렉 박용준 강사가 진행하는 CSS 강좌 사이트에 오신 걸 환영합니다.

웹 세계에서 CSS는 핵심적인 요소입니다. 이 아티클에서는 CSS에 대해 자세히 알아보겠습니다.

CSS 책 추천

CSS은 현재 보고 있는 VisualAcademy Docs만 있으면 충분합니다.

CSS 강좌 게시판

현재 VisualAcademy Docs의 CSS 강좌만 보셔도 충분합니다.

추가적인 게시판 형태의 강좌 사이트는 다음 게시판을 참고하세요.

CSS 게시판

CSS 유료 강의

VisualAcademy Docs는 시간날 때마가 강좌가 업데이트되고 있습니다.

이미 완성된 형태의 동영상 강의를 보시려면, 다음 경로를 통해서 CSS 유료 강의를 보실 수도 있습니다.

데브렉 CSS 동영상 강의

월 3만원대로 CSS 강의를 포함하여 데브렉 사이트의 모든 강좌를 보실 수 있습니다.

CSS 강의 소스

이 강의 전체에서 사용된 CSS 강의 소스는 다음 링크에서 다운로드 받을 수 있습니다.

https://github.com/VisualAcademy/CSS

CSS Fundamentals 강의 목차

CSS 소개
- CSS란?
- CSS의 역사
- CSS의 용도
CSS 기본 문법
- CSS 선택자
- CSS 선언
- CSS 주석
CSS 연결 방법
- 인라인 스타일
- 내부 스타일 시트
- 외부 스타일 시트
CSS 적용 우선 순위
- 상속
- 선택자의 명시도
- 중요성
CSS 박스 모델
- 박스 모델 이해
- 마진, 패딩, 테두리, 콘텐츠
- 박스 모델 계산법
CSS 레이아웃
- 정렬과 위치
- CSS 플로트
- CSS 위치 속성 (static, relative, absolute, fixed)
- Flexbox
- Grid
CSS 서식 지정
- 텍스트 서식
- 배경 서식
- 테두리 서식
- 리스트 스타일
CSS 반응형 디자인
- 반응형 디자인 이해
- 뷰포트 설정
- 미디어 쿼리 사용
- 반응형 이미지
CSS 애니메이션 및 변환
- CSS 변환 (translate, rotate, scale, skew)
- CSS 애니메이션 (keyframes, animation 속성)
- CSS 전환 (transition 속성)
CSS 최적화
- CSS 코드 최적화 방법
- CSS 전처리기
- CSS 프레임워크
CSS 관련 도구 및 리소스
- CSS 편집 도구
- CSS 검사 및 디버깅
- 온라인 리소스 및 도움말
마무리
- CSS 개념 요약
- 웹 개발에서 CSS의 중요성
- 추가 공부와 개선을 위한 자원

1. CSS 소개

CSS란?

CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 제어하는 스타일시트 언어입니다. HTML은 웹 페이지의 구조와 내용을 정의하는데 사용되며, CSS는 이러한 HTML 요소의 외관을 꾸미고 배치하는 데 사용됩니다. CSS를 사용하면 웹 페이지의 디자인을 손쉽게 변경할 수 있으며, 코드의 재사용성이 높아져 웹 개발 과정이 간편해집니다.

CSS의 역사

CSS는 1996년에 브랜든과 학 베르셈(Bert Bos)에 의해 최초로 제안되었습니다. 당시 웹 페이지 디자인에 사용되던 태그들은 웹의 발전에 한계를 두게 되었고, 이에 따라 CSS가 탄생하게 되었습니다. 최초의 CSS는 CSS1이라 불리며, 기본적인 스타일과 레이아웃을 지원하였습니다. 이후 CSS2와 CSS3가 발표되면서 다양한 기능과 속성들이 추가되었습니다. 현재 CSS는 W3C(World Wide Web Consortium)에 의해 표준화되어 있으며 지속적으로 발전하고 있습니다.

CSS의 용도

CSS는 웹 페이지의 다양한 요소에 스타일을 적용하는 데 사용됩니다. CSS의 주요 용도는 다음과 같습니다.

웹 페이지 요소의 스타일 지정: CSS를 사용하여 글꼴, 색상, 크기, 테두리 등 웹 페이지 요소의 스타일을 지정할 수 있습니다.
레이아웃과 포지셔닝: CSS를 통해 웹 페이지의 레이아웃과 요소의 위치를 조절할 수 있습니다. 이를 통해 반응형 웹 디자인도 구현할 수 있습니다.
효과와 애니메이션: CSS를 활용하면 웹 페이지 요소에 다양한 효과와 애니메이션을 적용할 수 있어, 사용자 경험을 향상시키는 데 도움이 됩니다.
코드 재사용 및 유지 관리: CSS는 독립된 스타일시트 파일에 작성되어 웹 페이지와 분리되어 관리할 수 있습니다. 이를 통해 코드의 재사용성이 높아지고, 유지 관리가 용이해집니다. 여러 웹 페이지에서 동일한 스타일을 적용할 때, 하나의 CSS 파일을 공유함으로써 일관성을 유지하고 중복 코드를 줄일 수 있습니다.

CSS 버전

CSS 버전별 주요 변경 내역을 요약한 표입니다.

버전	출시 연도	주요 변경 내용
CSS1	1996	초기 버전
CSS2	1998	박스 모델(Box model), 포지셔닝(positioning), 플로팅(floating)
CSS2.1	2004	오류 수정, 미디어 타입(media type) 추가
CSS3	2001-2012	선택자(selector), 효과(effect), 배경(background) 등 추가
CSS4	진행 중	모듈화된 CSS, 선택자 개선, 그리드 레이아웃(grid layout) 등
CSS5	진행 중	크로스 브라우저 호환성, 레이아웃 관련 기능 개선 등

첫 번째 CSS3 예제

강의 링크

CSS3 시작 강의 링크

샘플 코드: css3-start-demo.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 시작</title>
	<style>
		div { font-weight: bold;  }
		#one { color: red; }
		.many { font-style: italic; }
	</style>
</head>
<body>
	<div>Web Camp</div>
	<div id="one">2022</div>
	<div class="many">Korea</div>
</body>
</html>

실행

처음으로 만들어보는 CSS3

이 강좌에서는 처음으로 CSS3를 사용하여 간단한 웹 페이지를 만들어 봅니다. 강의 링크를 클릭하여 동영상 강의를 시청할 수 있습니다. 샘플 코드를 따라하며 간단한 스타일을 적용해 보세요. 실행 결과는 이미지로 확인할 수 있습니다.

2. CSS 기본 문법

CSS를 사용하여 웹 페이지를 꾸미기 위해서는 기본 문법을 알아야 합니다. 이 섹션에서는 CSS 선택자, 선언, 그리고 주석에 대해 알아보겠습니다.

CSS 선택자

CSS 선택자는 웹 페이지의 특정 요소에 스타일을 적용하기 위해 사용되는 규칙입니다. 선택자는 HTML 요소의 태그 이름, 클래스 이름, 아이디, 속성 등을 이용하여 지정할 수 있습니다.

예시:

h1 { /* 태그 선택자 */
  color: blue;
}

.my-class { /* 클래스 선택자 */
  font-size: 16px;
}

#my-id { /* 아이디 선택자 */
  background-color: yellow;
}

CSS 선언

CSS 선언은 선택자에 스타일을 지정하는 부분으로, 속성과 값으로 구성되어 있습니다. 선언은 중괄호 {} 내부에 작성되며, 속성과 값 사이에는 콜론(:)이 사용되고, 선언 사이에는 세미콜론(;)을 사용하여 구분합니다.

예시:

p {
  color: red; /* 속성: color, 값: red */
  font-size: 14px; /* 속성: font-size, 값: 14px */
}

예제: 기본 텍스트 색상

파일명: 01_기본_텍스트_색상.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>01 기본 텍스트 색상</title>
<style>
  p {
    color: red;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

CSS 주석

CSS 주석은 코드 설명을 위해 사용되며, 브라우저에서 해석되지 않고 무시됩니다. 주석은 /*로 시작하고 */로 끝납니다.

예시:

/* 이것은 CSS 주석입니다. */
p {
  color: green;
}

이상으로, CSS 기본 문법에 대해 알아보았습니다. 선택자, 선언, 주석 등의 문법을 이해하고 활용하면 웹 페이지에 다양한 스타일을 적용할 수 있습니다.

3. CSS 연결 방법

웹 페이지에 CSS를 적용하는 방법은 여러 가지가 있습니다. 이 섹션에서는 인라인 스타일, 내부 스타일 시트, 그리고 외부 스타일 시트에 대해 알아보겠습니다.

인라인 스타일

인라인 스타일은 HTML 요소의 style 속성을 이용하여 스타일을 직접 적용하는 방식입니다. 이 방법은 간단한 스타일 적용에 유용하지만, 유지 관리와 재사용성이 떨어집니다.

예시:

<p style="color: blue; font-size: 18px;">이 텍스트는 인라인 스타일로 꾸며졌습니다.</p>

내부 스타일 시트

내부 스타일 시트는 HTML 문서의 <head> 태그 내부에 <style> 태그를 사용하여 CSS 코드를 작성하는 방법입니다. 이 방법은 작은 프로젝트나 특정 페이지에만 적용되는 스타일에 적합합니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>이 텍스트는 내부 스타일 시트로 꾸며졌습니다.</p>
</body>
</html>

외부 스타일 시트

외부 스타일 시트는 별도의 CSS 파일을 생성하여 HTML 문서에 연결하는 방식입니다. 이 방법은 재사용성과 유지 관리가 용이하며, 대규모 프로젝트에 적합합니다. 외부 스타일 시트를 연결하려면 <link> 태그를 사용합니다.

예시:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>이 텍스트는 외부 스타일 시트로 꾸며졌습니다.</p>
</body>
</html>

이상으로, CSS 연결 방법에 대해 알아보았습니다. 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트 중 적절한 방법을 선택하여 웹 페이지에 스타일을 적용할 수 있습니다.

4. CSS 적용 우선 순위

여러 CSS 규칙이 동일한 요소에 적용될 때, 우선 순위에 따라 최종적으로 적용되는 스타일이 결정됩니다. 이 섹션에서는 상속, 선택자의 명시도, 그리고 중요성에 대해 알아보겠습니다.

상속

상속은 부모 요소의 스타일이 자식 요소에 전달되는 것을 의미합니다. 일부 스타일 속성은 자식 요소에 자동으로 상속되며, 명시적으로 상속되지 않는 속성도 inherit 값을 사용하여 상속할 수 있습니다.

예시:

/* color 속성은 자동으로 상속됩니다. */
div {
  color: red;
}

/* font-size 속성을 명시적으로 상속합니다. */
p {
  font-size: inherit;
}

선택자의 명시도

선택자의 명시도는 선택자의 구체성을 나타내는 값으로, CSS 규칙 간의 우선 순위를 결정하는 데 사용됩니다. 명시도가 높을수록 우선 순위가 높아집니다. 명시도는 인라인 스타일, 아이디 선택자, 클래스/속성/가상 클래스 선택자, 태그/가상 요소 선택자 순으로 높아집니다.

예시:

/* 아이디 선택자의 명시도가 높아 이 스타일이 적용됩니다. */
#my-id {
  color: blue;
}

.my-class {
  color: red;
}

p {
  color: green;
}

중요성

중요성은 !important 키워드를 사용하여 스타일 규칙에 우선 순위를 부여하는 방법입니다. 중요성이 지정된 규칙은 명시도와 상관없이 일반 규칙보다 우선 적용됩니다. 단, 여러 !important 규칙이 적용될 경우 명시도가 높은 규칙이 우선합니다.

예시:

/* 중요성이 지정된 스타일이 적용됩니다. */
.my-class {
  color: red !important;
}

#my-id {
  color: blue;
}

이상으로, CSS 적용 우선 순위에 대해 알아보았습니다. 상속, 선택자의 명시도, 중요성 등의 개념을 이해하고 활용하면 웹 페이지에 정확한 스타일을 적용할 수 있습니다.

5. CSS 박스 모델

CSS 박스 모델은 웹 페이지의 레이아웃을 구성하는 핵심 개념입니다. 이 섹션에서는 박스 모델의 이해, 마진, 패딩, 테두리, 콘텐츠, 그리고 박스 모델 계산법에 대해 알아보겠습니다.

박스 모델 이해

박스 모델은 HTML 요소를 사각형 박스로 간주하여 스타일과 레이아웃을 적용하는 방법입니다. 박스 모델은 콘텐츠, 패딩, 테두리, 마진으로 구성되며, 각 요소의 크기와 위치를 조절할 수 있습니다.

마진, 패딩, 테두리, 콘텐츠

콘텐츠: HTML 요소의 실제 내용이 들어가는 영역입니다. (텍스트, 이미지 등)
패딩: 콘텐츠와 테두리 사이의 공간입니다. 배경색이 적용되는 영역입니다.
테두리: 요소의 외곽선으로, 테두리 두께와 스타일, 색상을 설정할 수 있습니다.
마진: 요소와 주변 요소 사이의 공간으로, 투명한 영역입니다.

박스 모델 계산법

박스 모델의 크기는 콘텐츠의 너비와 높이, 패딩, 테두리, 마진의 합으로 계산됩니다. 이 값을 알고 있으면 웹 페이지의 레이아웃을 정확하게 조절할 수 있습니다.

예시:

.box {
  width: 100px;      /* 콘텐츠 너비 */
  height: 100px;      /* 콘텐츠 높이 */
  padding: 10px;      /* 패딩 */
  border: 5px solid;  /* 테두리 두께와 스타일 */
  margin: 20px;       /* 마진 */
}

위 예시에서 박스의 전체 너비는 100px(콘텐츠) + 10px(패딩) * 2 + 5px(테두리) * 2 = 150px입니다. 전체 높이 역시 같은 방식으로 계산되어 150px가 됩니다.

6. CSS 레이아웃

웹 페이지를 구성하는 요소들의 정렬과 위치를 조절하는 것이 레이아웃입니다. 이 섹션에서는 정렬과 위치, CSS 플로트, CSS 위치 속성, Flexbox, 그리고 Grid에 대해 알아보겠습니다.

정렬과 위치

CSS를 사용하여 요소를 가로 중앙 정렬하려면 margin: 0 auto를 사용합니다. 세로 정렬은 display: flex와 align-items 속성을 사용하여 구현할 수 있습니다.

CSS 플로트

플로트는 요소를 정렬하거나 다른 요소와 겹치게 할 때 사용하는 속성입니다. float 속성을 이용하여 요소를 왼쪽 또는 오른쪽으로 띄울 수 있습니다. 플로트된 요소 다음의 요소들은 플로트된 요소를 무시하고 배치되며, 플로트된 요소 주변으로 흐릅니다.

예시:

.float-left {
  float: left;
}

.float-right {
  float: right;
}

CSS 위치 속성

CSS 위치 속성은 요소의 위치를 조절하는 데 사용됩니다. position 속성을 사용하여 static, relative, absolute, 그리고 fixed 위치를 설정할 수 있습니다.

static: 기본 위치로, 다른 위치 속성에 영향을 받지 않습니다.
relative: 원래 위치를 기준으로 상대적으로 이동합니다. (top, right, bottom, left 속성 사용)
absolute: 가장 가까운 상위 요소를 기준으로 위치를 지정합니다. (top, right, bottom, left 속성 사용)
fixed: 뷰포트를 기준으로 위치를 지정하며, 스크롤에 영향을 받지 않습니다. (top, right, bottom, left 속성 사용)

Flexbox

Flexbox는 요소를 동적으로 배치, 정렬, 분배하는 레이아웃 방법입니다. 부모 요소에 display: flex를 적용하면 자식 요소들이 플렉스 아이템이 되어 플렉스 컨테이너 안에서 배치됩니다. 플렉스박스의 주 축(방향)과 교차 축을 설정하고, 정렬과 분배 속성을 사용하여 레이아웃을 구성할 수 있습니다.

Grid

CSS Grid는 격자 레이아웃을 구현하는 데 사용되는 속성입니다. 부모 요소에 display: grid를 적용하면 자식 요소들이 그리드 아이템이 되어 격자 안에

7. CSS 서식 지정

CSS를 사용하여 텍스트, 배경, 테두리, 그리고 리스트 스타일을 서식 지정할 수 있습니다. 이 섹션에서는 각각에 대해 알아보겠습니다.

텍스트 서식

텍스트 서식은 글꼴, 크기, 색상, 간격 등 다양한 속성을 사용하여 텍스트를 꾸미는 것입니다.

예시:

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
  text-align: justify;
  letter-spacing: 1px;
  word-spacing: 2px;
}

배경 서식

배경 서식은 요소의 배경 색상, 이미지, 크기, 위치 등을 설정하는 것입니다.

예시:

div {
  background-color: #f2f2f2;
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

테두리 서식

테두리 서식은 요소의 외곽선 모양, 색상, 두께 등을 설정하는 것입니다. 또한 테두리의 모서리를 둥글게 만드는 데 사용되는 border-radius 속성을 사용할 수 있습니다.

예시:

div {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
  border-radius: 5px;
}

리스트 스타일

리스트 스타일은 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)의 마커 스타일을 설정하는 것입니다.

예시:

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

/* 리스트 마커 제거 */
.no-marker {
  list-style-type: none;
}

이상으로, CSS 서식 지정에 대해 알아보았습니다. 텍스트, 배경, 테두리, 그리고 리스트 스타일을 적절히 사용하여 웹 페이지를 꾸미고 사용자 경험을 향상시킬 수 있습니다.

8. CSS 반응형 디자인

반응형 디자인은 웹 페이지가 다양한 화면 크기와 장치에 적응하여 사용자 경험을 최적화하는 기법입니다. 이 섹션에서는 반응형 디자인의 이해, 뷰포트 설정, 미디어 쿼리 사용, 그리고 반응형 이미지에 대해 알아보겠습니다.

반응형 디자인 이해

반응형 디자인은 웹 페이지의 레이아웃, 이미지, 그리고 기능이 다양한 화면 크기와 장치에 맞게 자동으로 조절되도록 구현하는 것입니다. 이를 통해 사용자에게 일관된 경험을 제공할 수 있습니다.

뷰포트 설정

뷰포트는 사용자가 웹 페이지를 보는 화면 영역입니다. 반응형 디자인을 구현하려면 먼저 HTML 문서의 <head>에 뷰포트 메타 태그를 설정해야 합니다.

예시:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어 쿼리 사용

미디어 쿼리를 사용하여 화면 크기에 따라 다른 CSS 스타일을 적용할 수 있습니다. 주로 max-width와 min-width 속성을 사용하여 조건을 설정합니다.

예시:

/* 화면 너비가 600px 이하일 때 적용할 스타일 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

반응형 이미지

반응형 이미지는 화면 크기에 따라 크기가 자동으로 조절되는 이미지입니다. 이미지 요소에 max-width 속성을 설정하고, 값을 100%로 지정하여 구현할 수 있습니다.

예시:

img {
  max-width: 100%;
  height: auto;
}

이상으로, CSS 반응형 디자인에 대해 알아보았습니다. 반응형 디자인 기법을 사용하여 다양한 화면 크기와 장치에 적응하는 웹 페이지를 구현할 수 있습니다.

9. CSS 애니메이션 및 변환

CSS를 사용하여 웹 페이지의 요소에 애니메이션과 변환을 적용할 수 있습니다. 이 섹션에서는 CSS 변환, 애니메이션, 그리고 전환에 대해 알아보겠습니다.

CSS 변환

CSS 변환은 요소의 위치, 크기, 회전, 기울임 등을 변경하는 기능입니다. transform 속성을 사용하여 변환을 구현할 수 있습니다.

translate: 요소를 X, Y 축 방향으로 이동시킵니다.
rotate: 요소를 중심축 기준으로 회전시킵니다.
scale: 요소의 크기를 확대/축소합니다.
skew: 요소를 기울입니다.

예시:

/* 위치 변경 */
.translate {
  transform: translate(50px, 100px);
}

/* 회전 */
.rotate {
  transform: rotate(45deg);
}

/* 크기 조절 */
.scale {
  transform: scale(1.5);
}

/* 기울임 */
.skew {
  transform: skew(20deg);
}

CSS 애니메이션

CSS 애니메이션은 요소에 시간에 따른 변화를 부여하는 기능입니다. @keyframes를 사용하여 애니메이션 시퀀스를 정의하고, animation 속성을 사용하여 요소에 애니메이션을 적용합니다.

예시:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 2s linear infinite;
}

CSS 전환

CSS 전환은 요소의 속성이 변경될 때 부드러운 변화를 부여하는 기능입니다. transition 속성을 사용하여 전환을 구현할 수 있습니다.

예시:

.hover-scale {
  transition: transform 0.3s ease-in-out;
}

.hover-scale:hover {
  transform: scale(1.1);
}

이상으로, CSS 애니메이션 및 변환에 대해 알아보았습니다. 이러한 기법을 사용하여 웹 페이지에 동적인 효과를 적용하고 사용자 경험을 향상시킬 수 있습니다.

10. CSS 최적화

CSS 최적화는 웹 페이지의 로딩 속도를 높이고 유지 보수를 용이하게 하는 데 중요한 역할을 합니다. 이 섹션에서는 CSS 코드 최적화 방법, 전처리기, 그리고 프레임워크에 대해 알아보겠습니다.

CSS 코드 최적화 방법

CSS 코드를 최적화하기 위해 다음과 같은 방법을 사용할 수 있습니다:

중복 코드 제거: 같은 스타일을 적용하는 여러 선택자를 하나로 합치거나, 공통 스타일을 별도의 클래스로 분리합니다.
단축 속성 사용: 여러 속성을 하나의 단축 속성으로 표현합니다. 예를 들어, margin-top, margin-right, margin-bottom, margin-left를 margin 속성으로 합칩니다.
CSS 파일 병합: 여러 CSS 파일을 하나로 병합하여 HTTP 요청 수를 줄입니다.
코드 최소화: CSS 코드를 최소화하여 파일 크기를 줄입니다. 주석, 공백, 줄바꿈 등을 제거합니다.

CSS 전처리기

CSS 전처리기는 CSS를 작성할 때 사용하는 도구로, 변수, 중첩, 믹스인 등의 기능을 제공합니다. 전처리기는 작성된 코드를 일반 CSS 코드로 변환하여 웹 페이지에 적용합니다. 대표적인 CSS 전처리기로는 Sass, Less, Stylus 등이 있습니다.

예시 (Sass):

$primary-color: #f06;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

CSS 프레임워크

CSS 프레임워크는 미리 정의된 스타일 및 구성 요소를 제공하는 라이브러리로, 웹 페이지 디자인을 빠르게 시작할 수 있도록 도와줍니다. 프레임워크를 사용하면 일관된 스타일을 적용하고, 반응형 디자인을 구현하며, 코드 재사용성을 높일 수 있습니다. 대표적인 CSS 프레임워크로는 Bootstrap, Foundation, Bulma 등이 있습니다.

예시 (Bootstrap):

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<button class="btn btn-primary">Bootstrap Button</button>

이상으로, CSS 최적화에 대해 알아보았습니다.

11. CSS 관련 도구 및 리소스

웹 개발자로서, 효과적인 CSS 작업을 위해 다양한 도구와 리소스를 활용할 수 있습니다. 이 섹션에서는 CSS 편집 도구, 검사 및 디버깅 도구, 그리고 온라인 리소스 및 도움말에 대해 알아보겠습니다.

CSS 편집 도구

CSS 편집 도구는 코드 작성을 도와주는 프로그램으로, 구문 강조, 자동 완성, 오류 검사 등의 기능을 제공합니다. 일반적인 텍스트 편집기부터 전문적인 코드 에디터까지 다양한 종류가 있습니다. 대표적인 CSS 편집 도구로는 Visual Studio Code, Sublime Text, Atom 등이 있습니다.

CSS 검사 및 디버깅

브라우저 개발자 도구를 사용하여 CSS를 검사하고 디버깅할 수 있습니다. 개발자 도구는 페이지 요소의 스타일을 실시간으로 변경하고, 계산된 스타일 및 박스 모델 등을 확인할 수 있게 해줍니다.

Google Chrome: 개발자 도구를 열려면 Ctrl + Shift + I (Windows/Linux) 또는 Cmd + Opt + I (Mac)를 누르거나, 오른쪽 클릭 후 '검사'를 선택합니다.
Mozilla Firefox: 개발자 도구를 열려면 Ctrl + Shift + I (Windows/Linux) 또는 Cmd + Opt + I (Mac)를 누르거나, 오른쪽 클릭 후 '검사 요소'를 선택합니다.

온라인 리소스 및 도움말

웹 개발에 관한 다양한 리소스와 도움말이 인터넷에 존재합니다. 이러한 리소스를 활용하여 CSS 지식을 확장하고, 문제를 해결할 수 있습니다. 대표적인 온라인 리소스 및 도움말은 다음과 같습니다:

MDN Web Docs: Mozilla가 제공하는 웹 기술 문서로, CSS를 포함한 HTML, JavaScript 등에 대한 상세한 가이드와 예제를 제공합니다. (https://developer.mozilla.org/)
W3Schools: 웹 개발에 관한 튜토리얼, 가이드, 예제 등을 제공하는 사이트로, 초보자부터 전문가까지 이용할 수 있습니다. (https://www.w3schools.com/)
Stack Overflow: 개발자들이 질문하고 답변하는 Q&A 플랫폼으로, CSS와 관련된 수많은 질문 및 답변을 찾아볼 수 있습니다. 직접 질문을 올리거나, 이미 있는 질문들을 검색하여 문제를 해결할 수 있습니다. (https://stackoverflow.com/)
CSS-Tricks: CSS 및 웹 개발에 관한 팁, 튜토리얼, 기사 등을 제공하는 사이트입니다. 특히, CSS와 관련된 기술과 최신 트렌드에 대한 정보를 얻을 수 있습니다. (https://css-tricks.com/)
CodePen: 웹 개발자들이 코드를 작성하고 공유할 수 있는 온라인 플랫폼으로, 다양한 CSS 예제와 작업물을 찾아볼 수 있습니다. 또한, 직접 코드를 작성하고 테스트해볼 수 있습니다. (https://codepen.io/)

12. 마무리

이 강좌를 통해 CSS에 대한 기본 개념과 기술을 배웠습니다. 이 마지막 섹션에서는 CSS 개념을 요약하고, 웹 개발에서 CSS의 중요성을 강조하며, 추가 공부와 개선을 위한 자원을 소개합니다.

CSS 개념 요약

CSS는 웹 페이지의 스타일과 레이아웃을 정의하는 언어입니다. CSS를 사용하여 요소의 색상, 크기, 여백, 정렬 등 다양한 서식을 적용할 수 있습니다. 또한, 반응형 디자인을 구현하거나 애니메이션과 전환 효과를 추가할 수도 있습니다.

웹 개발에서 CSS의 중요성

CSS는 웹 개발의 핵심 요소 중 하나로, 웹 페이지의 디자인과 사용자 경험에 큰 영향을 미칩니다. 사용자들에게 직관적이고 세련된 웹 페이지를 제공함으로써, 웹사이트의 인지도와 사용성을 높일 수 있습니다. 따라서, 웹 개발자로서 CSS에 대한 충분한 이해와 능력을 갖추는 것이 중요합니다.

추가 공부와 개선을 위한 자원

강좌에서 다룬 내용 외에도 CSS와 관련된 다양한 기술과 기법이 존재합니다. 추가적인 공부를 통해 CSS 지식을 확장하고, 실력을 향상시키기 위해 다양한 자료를 활용할 수 있습니다. 이전에 소개한 온라인 리소스와 도움말 외에도, 책, 비디오 강좌, 워크샵 등 다양한 형태의 자료를 찾아볼 수 있습니다. 또한, 실제 프로젝트나 개인 작업을 통해 CSS를 적용하고 실험해보면서 경험을 쌓는 것도 중요합니다.

폰트 크기:

파일명: 02_폰트_크기.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>02 폰트 크기</title>
<style>
  p {
    font-size: 20px;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

텍스트 정렬:

파일명: 03_텍스트_정렬.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>03 텍스트 정렬</title>
<style>
  p {
    text-align: center;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

폰트 스타일:

파일명: 04_폰트_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>04 폰트 스타일</title>
<style>
  p {
    font-style: italic;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

폰트 두께:

파일명: 05_폰트_두께.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>05 폰트 두께</title>
<style>
  p {
    font-weight: bold;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

백그라운드 색상:

파일명: 06_백그라운드_색상.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>06 백그라운드 색상</title>
<style>
  body {
    background-color: lightblue;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

테두리 스타일:

파일명: 07_테두리_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>07 테두리 스타일</title>
<style>
  p {
    border: 2px solid red;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

패딩:

파일명: 08_패딩.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>08 패딩</title>
<style>
  p {
    border: 2px solid red;
    padding: 10px;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

마진:

파일명: 09_마진.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>09 마진</title>
<style>
  p {
    border: 2px solid red;
    margin: 20px;
  }
</style>
</head>
<body>
<p>안녕하세요!</p>
</body>
</html>

너비와 높이:

파일명: 10_너비와_높이.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>10 너비와 높이</title>
<style>
  div {
    background-color: lightblue;
    width: 200px;
    height: 100px;
  }
</style>
</head>
<body>
<div></div>
</body>
</html>

테두리 반경:

파일명: 11_테두리_반경.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>11 테두리 반경</title>
<style>
  div {
    border: 2px solid red;
    border-radius: 10px;
  }
</style>
</head>
<body>
<div>안녕하세요!</div>
</body>
</html>

리스트 스타일:

파일명: 12_리스트_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>12 리스트 스타일</title>
<style>
  ul {
    list-style-type: circle;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>
</body>
</html>

테이블 스타일:

파일명: 13_테이블_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>13 테이블 스타일</title>
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: lightgrey;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>30</td>
  </tr>
  <tr>
    <td>이순신</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

버튼 스타일:

파일명: 14_버튼_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>14 버튼 스타일</title>
<style>
  button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
  }
  button:hover {
    background-color: lightblue;
  }
</style>
</head>
<body>
<button>클릭하세요!</button>
</body>
</html>

링크 스타일:

파일명: 15_링크_스타일.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>15 링크 스타일</title>
<style>
  a {
    text-decoration: none;
    color: blue;
  }
  a:hover {
    color: red;
  }
</style>
</head>
<body>
<a href="#">링크 예제</a>
</body>
</html>

텍스트 그림자:

파일명: 16_텍스트_그림자.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>16 텍스트 그림자</title>
<style>
  h1 {
    text-shadow: 2px 2px red;
  }
</style>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>

박스 그림자:

파일명: 17_박스_그림자.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>17 박스 그림자</title>
<style>
  div {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px grey;
  }
</style>
</head>
<body>
<div></div>
</body>
</html>

텍스트 오버플로:

파일명: 18_텍스트_오버플로.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>18 텍스트 오버플로</title>
<style>
  p {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
</head>
<body>
<p>이 문장은 오버플로 예제입니다. 길이가 길어지면 자동으로 생략 부호가 생깁니다.</p>
</body>
</html>

미디어 쿼리:

파일명: 19_미디어_쿼리.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>19 미디어 쿼리</title>
<style>
  body {
    background-color: lightblue;
  }
  @media screen and (max-width: 600px) {
    body {
      background-color: lightgreen;
    }
  }
</style>
</head>
<body>
<p>화면 크기에 따라 배경색이 바뀝니다.</p>
</body>
</html>

그리드 레이아웃:

파일명: 20_그리드_레이아웃.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>20 그리드 레이아웃</title>
<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    padding: 20px;
  }
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>
</body>
</html>

플렉스 레이아웃:

파일명: 21_플렉스_레이아웃.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>21 플렉스 레이아웃</title>
<style>
  .flex-container {
    display: flex;
  }
  .flex-item {
    background-color: lightblue;
    padding: 20px;
    margin: 10px;
  }
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
</body>
</html>

포지션:

예제: position.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Position</title>
<style>
  .relative {
    position: relative;
    background-color: lightblue;
    width: 200px;
    height: 100px;
  }
  .absolute {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    width: 50px;
    height: 50px;
  }
</style>
</head>
<body>
<div class="relative">
  <div class="absolute"></div>
</div>
</body>
</html>

Float and Clear:

예제: float_and_clear.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Float and Clear</title>
<style>
  .left {
    float: left;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin: 10px;
  }
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
</style>
</head>
<body>
<div class="clearfix">
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="left">3</div>
</div>
</body>
</html>

Opacity:

예제: opacity.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Opacity</title>
<style>
  .transparent {
    background-color: blue;
    opacity: 0.5;
    width: 100px;
    height: 100px;
  }
</style>
</head>
<body>
<div class="transparent"></div>
</body>
</html>

Pseudo-class:

예제: pseudo_class.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Pseudo-class</title>
<style>
  a {
    text-decoration: none;
    color: blue;
  }
  a:hover {
    color: red;
  }
</style>
</head>
<body>
<a href="#">Link example</a>
</body>
</html>

Pseudo-element:

예제: pseudo_element.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Pseudo-element</title>
<style>
  p::first-letter {
    font-size: 30px;
    color: red;
  }
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
</html>

Transition:

예제: transition.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
  .box {
    background-color: blue;
    width: 100px;
    height: 100px;
    transition: width 2s;
  }
  .box:hover {
    width: 200px;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

변형(Transform):

예제: transform.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>변형(Transform)</title>
<style>
  .box {
    background-color: blue;
    width: 100px;
    height: 100px;
    transition: transform 2s;
  }
  .box:hover {
    transform: rotate(180deg);
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

애니메이션(Animation):

예제: animation.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>애니메이션(Animation)</title>
<style>
  @keyframes example {
    0% {background-color: blue; left: 0px; top: 0px;}
    25% {background-color: red; left: 200px; top: 0px;}
    50% {background-color: yellow; left: 200px; top: 200px;}
    75% {background-color: green; left: 0px; top: 200px;}
    100% {background-color: blue; left: 0px; top: 0px;}
  }
  .box {
    width: 100px;
    height: 100px;
    position: relative;
    animation: example 5s infinite;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

반응형 이미지(Responsive Image):

예제: responsive_image.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 이미지(Responsive Image)</title>
<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
</head>
<body>
<img src="https://via.placeholder.com/600x400" alt="Example Image">
</body>
</html>

자식 선택자(Child Selector):

예제: child_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>자식 선택자(Child Selector)</title>
<style>
  ul > li {
    color: red;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>
</body>
</html>

인접 형제 선택자(Adjacent Sibling Selector):

예제: adjacent_sibling_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인접 형제 선택자(Adjacent Sibling Selector)</title>
<style>
  h1 + p {
    color: red;
  }
</style>
</head>
<body>
<h1>제목</h1>
<p>이 문단은 빨간색으로 표시됩니다.</p>
<p>이 문단은 기본 색상으로 표시됩니다.</p>
</body>
</html>

일반 형제 선택자(General Sibling Selector):

예제: general_sibling_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>일반 형제 선택자(General Sibling Selector)</title>
<style>
  h1 ~ p {
    color: red;
  }
</style>
</head>
<body>
<h1>제목</h1>
<p>이 문단은 빨간색으로 표시됩니다.</p>
<p>이 문단도 빨간색으로 표시됩니다.</p>
</body>
</html>

속성 선택자(Attribute Selector):

예제: attribute_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자(Attribute Selector)</title>
<style>
  input[type="text"] {
    background-color: lightblue;
  }
</style>
</head>
<body>
<form>
  <input type="text" placeholder="텍스트 입력">
  <input type="password" placeholder="비밀번호 입력">
</form>
</body>
</html>

그림자(Shadow):

예제: shadow.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>그림자(Shadow)</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

배경 크기(Background Size):

예제: background_size.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 크기(Background Size)</title>
<style>
  .box {
    width: 300px;
    height: 200px;
    background-image: url('https://via.placeholder.com/600x400');
    background-size: cover;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

배경 위치(Background Position):

예제: background_position.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>배경 위치(Background Position)</title>
<style>
  .box {
    width: 300px;
    height: 200px;
    background-image: url('https://via.placeholder.com/600x400');
    background-position: center;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

텍스트 그림자(Text Shadow):

예제: text_shadow.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>텍스트 그림자(Text Shadow)</title>
<style>
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
</style>
</head>
<body>
<h1>텍스트 그림자 예제</h1>
</body>
</html>

가상 클래스 :nth-child():

예제: nth_child.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :nth-child()</title>
<style>
  ul li:nth-child(odd) {
    background-color: lightblue;
  }
  ul li:nth-child(even) {
    background-color: lightgreen;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
</body>
</html>

가상 클래스 :nth-last-child():

예제: nth_last_child.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :nth-last-child()</title>
<style>
  ul li:nth-last-child(2) {
    background-color: lightblue;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
</body>
</html>

가상 클래스 :first-child():

예제: first_child.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :first-child()</title>
<style>
  ul li:first-child {
    background-color: lightblue;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
</body>
</html>

가상 클래스 :last-child():

예제: last_child.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :last-child()</title>
<style>
  ul li:last-child {
    background-color: lightblue;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
</body>
</html>

가상 클래스 :not():

예제: not_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :not()</title>
<style>
  ul li:not(.special) {
    background-color: lightblue;
  }
</style>
</head>
<body>
<ul>
  <li>항목 1</li>
  <li class="special">항목 2</li>
  <li>항목 3</li>
  <li>항목 4</li>
</ul>
</body>
</html>

가상 클래스 :hover():

예제: hover_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :hover()</title>
<style>
  button:hover {
    background-color: lightblue;
  }
</style>
</head>
<body>
<button>마우스를 올려보세요</button>
</body>
</html>

가상 클래스 :active():

예제: active_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :active()</title>
<style>
  button:active {
    background-color: lightblue;
  }
</style>
</head>
<body>
<button>버튼을 클릭하세요</button>
</body>
</html>

가상 클래스 :focus():

예제: focus_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :focus()</title>
<style>
  input:focus {
    background-color: lightblue;
  }
</style>
</head>
<body>
<input type="text" placeholder="텍스트를 입력하세요">
</body>
</html>

가상 클래스 :before():

예제: before_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :before()</title>
<style>
  p::before {
    content: "※";
    color: red;
  }
</style>
</head>
<body>
<p>이 문단에는 앞에 붉은색 별표가 있습니다.</p>
</body>
</html>

가상 클래스 :after():

예제: after_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :after()</title>
<style>
  p::after {
    content: "※";
    color: red;
  }
</style>
</head>
<body>
<p>이 문단에는 뒤에 붉은색 별표가 있습니다.</p>
</body>
</html>

가상 요소 :first-letter():

예제: first_letter.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 요소 :first-letter()</title>
<style>
  p::first-letter {
    font-size: 24px;
    color: red;
  }
</style>
</head>
<body>
<p>첫 글자가 크고 빨간색으로 표시됩니다.</p>
</body>
</html>

가상 요소 :first-line():

예제: first_line.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 요소 :first-line()</title>
<style>
  p::first-line {
    font-weight: bold;
    color: blue;
  }
</style>
</head>
<body>
<p>첫 번째 줄이 굵게 표시되고 파란색으로 표시됩니다. 이 문단은 여러 줄로 구성되어 있습니다.</p>
</body>
</html>

가상 클래스 :checked():

예제: checked_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :checked()</title>
<style>
  input[type="checkbox"]:checked + label {
    color: red;
  }
</style>
</head>
<body>
<input type="checkbox" id="chkbox">
<label for="chkbox">체크박스를 선택하세요</label>
</body>
</html>

가상 클래스 :required():

예제: required_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :required()</title>
<style>
  input:required {
    background-color: lightblue;
  }
</style>
</head>
<body>
<form>
  <input type="text" required>
  <input type="text">
</form>
</body>
</html>

가상 클래스 :disabled():

예제: disabled_selector.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>가상 클래스 :disabled()</title>
<style>
  input:disabled {
    background-color: lightgray;
  }
</style>
</head>
<body>
<form>
  <input type="text">
  <input type="text" disabled>
</form>
</body>
</html>

테두리 반올림(Border-radius):

예제: border_radius.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 반올림(Border-radius)</title>
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    border-radius: 15px;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

테두리 이미지(Border-image):

예제: border_image.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>테두리 이미지(Border-image)</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    border: 30px solid;
    border-image: url('https://via.placeholder.com/100') 30% round;
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

선형 그라디언트(Linear Gradient):

예제: linear_gradient.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>선형 그라디언트(Linear Gradient)</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(to right, red, blue);
  }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>