[CSS 기초] 문법 HTML 요소 선택자

/ 2020. 8. 26. 19:55

CSS를 공부하기 위해서는 HTML의 기초를 먼저 익히고 오면 좋습니다.

 

CSS는 Cascading Style Sheets 의 약자로서 HTML로 만들어진 요소들이 폰트, 색상, 기울기, 위치 등 어떻게 보여지는 지에 대한 것을 이야기 합니다. 우선 CSS 문법은 아래와 같은 기본적인 틀을 가지고 있습니다. 

 

 

 

 

>>> HTML 요소 선택자

 

CSS를 적용하고 싶은 목적대상이 HTML 의 이름을 직접 인용해서 사용하는 것을 말합니다.

 

아래에 <head>와 </head> 사이에 h3 라고 명시하고 CSS 값을 넣어 주었습니다.

 

그리고 <Body>와 </Body> 사이에 있는 h3 위치에 적용할 스타일 위치라고 쓰여져 있는 곳에 적용되는 것입니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="ko">
 
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        h3 {
            background-color: green;
            text-decoration: line-through;
        }
    </style>
</head>
 
<body>
 
    <h1>HTML 요소 선택자</h1>
    <h3>적용할 스타일 위치</h3>
 
</body>
 
</html>
cs

*line-through 는 말그대로 글자를 관통하는 선을 넣어줍니다

*background-color 는 배경화면 색상을 넣어줍니다.

 

 

실행을 한 결과를 HTML로 실행시켜주면 결과값은 아래처럼 나오게 됩니다. 글자를 관통한 선과 Green색상의 배경이 출력이 됩니다.

 

 

 

 

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기