타입 선택자 혹은 태그 선택자라고 불리는 Type seletor 의 CSS 쓰임을 알아보겠습니다.
Type selector
타입 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다.
HTML 요소들을 직접 선택자로 채용함으로써 해당 태그를 가진 요소들에 스타일을 적용하는 방식 입니다.
타입 선택자의 문법은 이러 합니다.
태그 {
/* 스타일 적용 */
}
스타일이 적용되기를 원하는 태그 이름을 선택자 에 코딩하면 되는 것이죠.
예제를 만들어 볼까요?
먼저 CSS 파일을 하기처럼 만듭니다. 해당 코드는 각각의 태그에만 스타일이 적용되는 내용 입니다.
[main.css]
/* CSS 코드 */
h1 {
color: blue;
}
p {
font-size: 18px;
}
input {
border: 1px solid black;
padding: 5px;
}
a {
text-decoration: none;
color: green;
}
ul {
list-style-type: disc;
}
li {
margin-bottom: 10px;
}
index.html 에서는 main.css 와 파일을 연결 하고 스타일 결과값을 나타내 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example HTML Page</title>
<link rel="stylesheet" href="/CSS/main.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<input type="text" placeholder="Enter your name">
<input type="checkbox"> Checkbox
<a href="https://www.example.com">This is a link</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>HTML 과 CSS 로 구성된 웹 페이지의 결과 화면은 하기와 같습니다.
CSS 스타일에서 태그선택자로 지시한 태그들에만 스타일이 적용되었습니다.
태그(타입) 선택자 에 대해서 알아보았습니다.
감사합니다.
반응형
'앱 만들기 > CSS' 카테고리의 다른 글
| CSS ID 선택자 란? (1) | 2023.06.05 |
|---|---|
| CSS 클래스 선택자 란? (5) | 2023.06.03 |
| CSS 전체선택자 란? (2) | 2023.06.01 |
| 브라우저 스타일 초기화 하는 방법 (2) | 2023.05.30 |
| CSS 주요 font 속성 4가지 알아보기 (0) | 2023.05.12 |
댓글