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

html 줄바꿈 태그 사용법

2023년 06월 02일

html 줄바꿈 태그 사용법 및 예제를 같이 살펴보며 입맛에 맞게 웹페이지를 편집하는 방법에 대해 알아보려 하는데요,
태그,

태그,

태그를 일반적으로 많이 사용합니다. 블로그 작성시에도 이 줄바꿈 태그들을 이용해서 세팅합니다. 그럼 시작해 보겠습니다.

Read More
html

Techniques for Compressing Websites to Improve Performance

2023년 07월 15일

Website performance is crucial as users will abandon slow websites. Therefore, web developers use various techniques to optimize websites for user experience. Among these techniques, website compression is highly effective in reducing website loading time. Techniques for Compressing Websites Website compression involves reducing the size of website files. It does…

Read More
html

리눅스 서버 운영 및 관리

2023년 07월 29일

리눅스는 전 세계에서 가장 널리 사용되는 오픈소스 운영체제 중 하나입니다. 이 운영체제는 유닉스 계열에 속하며 안정성과 보안성이 뛰어나기 때문에 많은 서버에서 사용됩니다. 본 글에서는 리눅스 서버를 운영하고 관리하는 방법에 대해 더 자세히 알아보고자 합니다. 리눅스는 매우 유연하고 다양한 기능을 제공합니다. 리눅스 서버를 운영하려면, 우선 서버 보안에 대한 이해가 필요합니다. 서버…

Read More

답글 남기기 응답 취소

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

최신 글

  • 포토샵 단축키 모음 정리본
  • express vpn이란? 장점 및 단점
  • 안드로이드 버전 업그레이드 방법
  • 그래픽 카드 고장 증상, 해결법도 같이 알아보자
  • 그래픽카드 가격, 2025년 시세

최신 댓글

  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