CSS 시작하기: 기초 선택자와 속성

HTML&CSS

by 코드공작소 2023. 12. 19. 10:35

CSS는 웹 디자인에서 필수적인 스타일링 언어로, HTML 요소에 스타일을 적용하는 데 사용됩니다. 이번 포스팅에서는 CSS의 핵심인 기초 선택자와 속성을 살펴보겠습니다.

1. 선택자(Selectors)의 기본
CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 역할을 합니다. 몇 가지 기본 선택자를 알아봅시다:

전체 선택자 (*): 모든 HTML 요소를 선택합니다.

* {
  margin: 0;
  padding: 0;
}

요소 선택자 (Element Selector): 특정 HTML 요소를 선택합니다.

h1 {
  color: blue;
}

클래스 선택자 (Class Selector): 특정 클래스를 가진 요소를 선택합니다.

.highlight {
  background-color: yellow;
}

아이디 선택자 (ID Selector): 특정 아이디를 가진 요소를 선택합니다.

#header {
  font-size: 24px;
}

2. 속성(Properties)과 값(Values)
CSS 속성과 값은 선택한 요소에 어떤 스타일을 적용할지를 정의합니다. 몇 가지 기본 속성과 값을 살펴봅시다:

색상 속성 (color):

p {
  color: #333; /* 검은색 텍스트 */
}

폰트 크기 속성 (font-size):

body {
  font-size: 16px;
}

여백 속성 (margin, padding):

div {
  margin: 10px;
  padding: 5px;
}

3. 코드 예제
이제 선택자와 속성을 함께 사용하는 간단한 코드 예제를 살펴봅시다. 이 예제는 모든 제목(heading)에 파란색 텍스트를 적용합니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 시작하기: 기초 선택자와 속성</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>Welcome to My Blog</h1>
  <p>This is a sample paragraph.</p>

</body>
</html>

/* styles.css */

/* 모든 제목에 파란색 텍스트 적용 */
h1 {
  color: blue;
}

이 코드는 <h1> 요소에 파란색 텍스트를 적용하는 기초적인 CSS 스타일링을 나타냅니다.

이제 여러분은 CSS의 기초 선택자와 속성을 사용하여 HTML 요소에 스타일을 적용하는 방법을 알게 되었습니다. 계속해서 더 많은 CSS 기능을 익히며 웹 디자인의 다양한 측면에 대해 배워보세요.

효과적인 웹 디자인을 위한 CSS 레이아웃

웹 디자인에서 효과적인 레이아웃은 사용자 경험을 향상시키고 웹 페이지의 시각적인 품질을 결정짓습니다. 이번 포스팅에서는 CSS를 활용하여 효과적인 웹 디자인을 구현하는 방법에 대해 다

jina102.tistory.com

CSS Flexbox와 Grid: 레이아웃 디자인의 강력한 도구

CSS Flexbox와 Grid는 웹 디자인에서 강력하면서도 유연한 레이아웃을 구현하는 데 중요한 역할을 합니다. 이 블로그 포스팅에서는 각각의 특징과 활용법에 대해 자세히 알아보겠습니다. 1. Flexbox 소

jina102.tistory.com

저작자표시

'HTML&CSS' 카테고리의 다른 글

CSS에서 흔히 발생하는 오류와 해결책 (0)	2023.12.20
Responsiveness를 갖춘 웹 디자인: CSS Media Queries 활용 (2)	2023.12.20
CSS 애니메이션과 전이: 웹페이지에 생동감 넣기 (0)	2023.12.20
CSS Flexbox와 Grid: 레이아웃 디자인의 강력한 도구 (1)	2023.12.19
효과적인 웹 디자인을 위한 CSS 레이아웃 (0)	2023.12.19