Skip to content
toylee blog · 컴퓨터, 프로그램 정보 공유

toylee blog · 컴퓨터, 프로그램 정보 공유

CSS 웹 페이지 스타일 변경

toylee, 2023년 06월 26일

CSS(Cascading Style Sheets)는 HTML 문서를 시각적으로 매력적인 웹 페이지로 변환하는 중추적인 역할을 합니다. CSS를 사용하면 개발자가 웹 콘텐츠의 프레젠테이션 및 레이아웃을 제어하여 멋진 디자인과 원활한 사용자 경험을 만들 수 있습니다. 이 글에서는 CSS 웹 페이지 스타일 변경 및 수정에 대해 알아보겠습니다.

[목차]

  • 선택기 및 규칙 세트
  • 색상 및 타이포그래피
  • 박스 모델 및 레이아웃
  • 플렉스박스와 그리드
  • 전환 및 애니메이션
  • 전체코드 보기
  • Color and Typography
  • Layout with Flexbox
  • Layout with CSS Grid
  • Transitions and Animations
  • 결론 및 의견

선택기 및 규칙 세트

CSS는 선택기를 사용하여 HTML 요소에 스타일을 적용하여 작동합니다. 선택기는 특정 요소 또는 요소 그룹을 대상으로 하므로 사용자 정의 스타일을 정의할 수 있습니다. 규칙 세트는 적용할 스타일을 정의하는 중괄호로 묶인 선언 세트와 선택기로 구성됩니다.

/* Selector targets an element with the 'class' attribute */
.my-class {
  color: blue;
  font-size: 18px;
}

색상 및 타이포그래피

CSS는 웹 페이지에서 색상과 타이포그래피를 사용자 정의할 수 있는 다양한 옵션을 제공합니다. CSS를 사용하면 글꼴 패밀리, 크기, 두께 및 스타일을 제어하고 텍스트 색상과 배경을 조작할 수 있습니다.

/* Styling heading elements */
h1 {
  font-size: 32px;
  font-weight: bold;
  color: #333;
}

/* Changing background color */
body {
  background-color: #f4f4f4;
}

/* Adding custom fonts */
body {
  font-family: 'Roboto', sans-serif;
}

박스 모델 및 레이아웃

상자 모델을 이해하는 것은 잘 구성된 웹 페이지 레이아웃을 만드는 데 필수적입니다. 각 HTML 요소는 너비, 높이, 패딩, 테두리 및 여백과 같은 속성이 있는 직사각형 상자로 간주됩니다. 이러한 속성을 조작하여 간격, 정렬 및 전체 레이아웃을 제어할 수 있습니다.

/* Setting box dimensions */
.box {
  width: 200px;
  height: 200px;
}

/* Adjusting padding and margins */
.box {
  padding: 20px;
  margin: 10px;
}

/* Adding borders */
.box {
  border: 2px solid #ccc;
}

플렉스박스와 그리드

CSS는 Flexbox와 CSS Grid라는 두 가지 강력한 레이아웃 시스템을 제공합니다. 이는 컨테이너 내에서 요소를 배치하고 정렬하는 보다 진보되고 유연한 접근 방식을 제공합니다. Flexbox는 1차원 레이아웃에 초점을 맞추는 반면 CSS Grid는 2차원 레이아웃을 허용합니다.

/* Flexbox layout */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CSS Grid layout */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

전환 및 애니메이션

CSS 전환 및 애니메이션을 사용하면 웹 페이지에 동적 효과와 상호 작용을 추가할 수 있습니다. CSS를 사용하면 속성 값 간에 부드러운 전환을 생성하고 키프레임을 사용하여 복잡한 애니메이션을 정의할 수 있습니다.

/* Transition on hover */
.button {
  background-color: #333;
  color: #fff;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #f44336;
}

/* Keyframe animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinner {
  animation: spin 2s linear infinite;
}

전체코드 보기

이 코드를 HTML 파일에 저장하고 웹 브라우저에서 열어서 CSS 스타일이 적용되는 것을 확인합니다. 웹 페이지에는 색상, 타이포그래피, Flexbox 또는 CSS Grid를 사용한 레이아웃, 전환 및 애니메이션을 포함하여 CSS 스타일 지정의 다양한 예가 표시됩니다

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
  <title>Introduction to CSS: Web Page Styling</title>
  <style>
    /* CSS styles go here */
    .my-class {
      color: blue;
      font-size: 18px;
    }
    h1 {
      font-size: 32px;
      font-weight: bold;
      color: #333;
    }
    body {
      background-color: #f4f4f4;
      font-family: ‘Roboto’, sans-serif;
    }
    .box {
      width: 200px;
      height: 200px;
      padding: 20px;
      margin: 10px;
      border: 2px solid #ccc;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* Uncomment the following CSS for CSS Grid layout */
    /*
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 20px;
    }
    */
    .button {
      background-color: #333;
      color: #fff;
      transition: background-color 0.3s;
    }
    .button:hover {
      background-color: #f44336;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    .spinner {
      animation: spin 2s linear infinite;
    }
  </style>
</head>
<body>
  <h1>Introduction to CSS: Web Page Styling</h1>
 
  <div class=“my-class”>
    This is an example of styling using a class.
  </div>
 
  <h2>Color and Typography</h2>
 
  <p>This is a paragraph with custom font and color.</p>
 
  <div class=“box”>
    This is a box element with specific dimensions, padding, margin, and border.
  </div>
 
  <h2>Layout with Flexbox</h2>
 
  <div class=“container”>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
 
  <!– Uncomment the following HTML for CSS Grid layout –>
  <!–
  <h2>Layout with CSS Grid</h2>
  <div class=”container”>
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  –>
 
  <h2>Transitions and Animations</h2>
 
  <button class=“button”>Hover Me</button>
 
  <div class=“spinner”>This element spins!</div>
 
  <script>
    // JavaScript code can be added here if needed
  </script>
</body>
</html>
 
Colored by Color Scripter
cs

실행화면

CSS 웹 페이지 스타일

Introduction to CSS: Web Page Styling

Introduction to CSS: Web Page Styling

This is an example of styling using a class.

Color and Typography

This is a paragraph with custom font and color.

This is a box element with specific dimensions, padding, margin, and border.

Layout with Flexbox

Item 1
Item 2
Item 3

Transitions and Animations

This element spins!

결론 및 의견

CSS는 웹 개발자가 웹 페이지를 시각적으로 매력적이고 매력적인 경험으로 변환할 수 있게 해주는 강력한 도구입니다. CSS의 기능을 활용하여 색상, 타이포그래피, 레이아웃, 전환 및 애니메이션을 제어하여 사용자를 사로잡는 멋진 디자인을 만들 수 있습니다. 지금까지 CSS 웹 페이지 스타일 수정 대해 알아봤습니다.

[관련글]

HTML5 란?
HTML Form 태그 사용법

PyQt 및 AI 인공 지능 연동 프로그램 만들기

파이썬 PyQt6 DB 접속 (SQLite, MySQL, PostgreSQL)

자바(java)란?

html

글 내비게이션

Previous post
Next post

Related Posts

html

all html tag 설명 및 예제

2023년 05월 27일

HTML은 웹 페이지를 만들기 위해 사용되는 마크업 언어입니다. 웹 브라우저에게 웹 페이지를 어떻게 표시해야 하는지 알려주는 일종의 지시어이죠. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 데 중요한 역할을 하며, 다양한 태그를 사용해 내용을 표시합니다. 이번 글에서는 all html tag 설명 및 예제 까지 제공하겠습니다. 1. All HTML Tag – 기본 태그…

Read More
html

How to Boost Your Productivity with MacBook

2023년 07월 11일

MacBook is a powerful tool to increase your productivity. Many people are using MacBook to work more efficiently in their work and daily life. In this guide, we’ll provide you with tips on how to use MacBook to maximize your productivity. 1. Screen Capture You can easily capture your screen…

Read More
html

http https 차이

2023년 05월 31일

HTTP와 HTTPS는 인터넷에서 웹사이트를 브라우징하는 데 사용되는 프로토콜입니다. 이 둘은 통신하는 방식에 중요한 차이가 있습니다. http https 차이 및 장단점에 대해서 자세히 알아보도록 하겠습니다.

Read More

답글 남기기 응답 취소

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

최신 글

  • usb 포맷 형식은?
  • usb 쓰기금지 해제방법, 어렵지 않아요
  • usb a타입에 대해 알아보자
  • 포토샵 누끼따기 방법
  • vpn 연결방법 쉽게 설명해드립니다.

최신 댓글

  1. 윈도우 단축키 모음 Best5의 ace
  2. http https 차이의 챗GPT 란? · Working for you

보관함

  • 2025년 6월
  • 2025년 5월
  • 2025년 4월
  • 2025년 3월
  • 2025년 2월
  • 2025년 1월
  • 2024년 12월
  • 2024년 11월
  • 2024년 8월
  • 2024년 6월
  • 2024년 5월
  • 2024년 3월
  • 2024년 2월
  • 2023년 11월
  • 2023년 9월
  • 2023년 8월
  • 2023년 7월
  • 2023년 6월
  • 2023년 5월
  • 2023년 4월
  • 2023년 3월
  • 2023년 2월

카테고리

  • flutter
  • html
  • linux
  • macbook
  • Pc Useful Tips
  • 미분류
  • 워드프레스
  • 자바(Java)
  • 파이썬
  • 프로그래밍
©2025 toylee blog · 컴퓨터, 프로그램 정보 공유 | WordPress Theme by SuperbThemes