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

반응형 웹디자인의 중요성과 장단점

2024년 05월 15일

반응형 웹디자인은 현대 웹사이트에서 절대적인 필요성을 갖게 되었습니다. 사용자들은 다양한 기기를 이용하여 웹을 탐색하며, 그에 맞게 웹사이트는 유연하게 대응해야 합니다. 반응형 웹디자인은 이러한 다양성에 대응하여 웹사이트를 최적으로 표현할 수 있는 중요한 기술입니다.

Read More
html

웹사이트의 검색 엔진 최적화(SEO) 전략

2023년 07월 20일

현재의 디지털 시대에, 인터넷은 사람들이 정보를 찾고 상품과 서비스를 구매하는 중요한 수단이 되었습니다. 따라서 검색 엔진 최적화(SEO)는 웹 사이트를 운영하는 회사 또는 개인이 온라인 존재감을 향상시키는 데 필수적인 전략입니다. SEO는 검색 엔진 결과 페이지(SERP)에서 상위를 차지하도록 웹 사이트를 최적화하는 프로세스입니다. 주제 1: 키워드 연구 키워드 연구는 SEO의 첫 단계입니다. 키워드…

Read More
html

CSS Color 속성 활용하기 (배경색, 글꼴색, 그라디언트)

2024년 05월 12일

CSS Color 속성은 웹 디자인에서 중요한 역할을 합니다. 배경색, 글꼴색, 그라디언트 등 다양한 색상 속성을 활용하여 웹 페이지를 아름답게 꾸밀 수 있습니다. CSS Color를 제대로 활용하면 페이지의 시각적 품질을 향상시키고 사용자 경험을 높일 수 있습니다. 따라서 개발자들은 이러한 속성을 잘 숙지하고 적절히 활용하는 것이 중요합니다. 이 글에서는 CSS Color 속성을 활용하면서 배경색, 글꼴색, 그라디언트에 대해 자세히 살펴보도록 하겠습니다.

Read More

답글 남기기 응답 취소

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

최신 글

  • 드론 비행금지구역에 대해 알아볼게요
  • cpu 온도 측정 방법
  • 포토샵 단축키 모음 정리본
  • express vpn이란? 장점 및 단점
  • 안드로이드 버전 업그레이드 방법

최신 댓글

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

보관함

  • 2025년 7월
  • 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