css 태그 이름 셀렉터에 대하여 알아보기

네 안녕하세요, 이번 포스팅에서는 태그 이름 셀렉터에 대하여 알아보도록 하겠습니다.

셀렉터는 html을 꾸밀 때 사용하는 기능인데,

저번에 했던 포스팅에서 스타일 시트를 작성하면서 봤던 것들이 셀렉터 입니다.

그래서 이번 시간에는 그러한 셀렉터 중 하나인 태그 이름 셀렉터에 대하여 알아보려 합니다.

그럼 지금부터 시작하도록 하겠습니다.

1. 태그 이름 셀렉터

태그 이름 셀렉터는 우리가 쓰는 html 태그의 이름이 그대로 셀렉터로 쓰이는 경우를 이야기합니다.

이를테면 h3, img, label 등 우리가 사용하는 html 태그라면 전부 다 쓸 수 있습니다.

그러면 이러한 예시를 하나 간단히 보여드리도록 하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>셀렉터 만들기</title>
    <style>
        h3,
        li {
            /* 태그 타입 셀렉터 */
            color: brown;
        }
    </style>
</head>
<body>
    <h3>Web Programming</h3>
    <hr>
    <div>
        <div>2학기 <strong>학습 내용</strong></div>
        <ul>
            <li>HTML5</li>
            <li><strong>CSS</strong></li>
            <li>JAVASCRIPT</li>
        </ul>
        <div>60점 이하는 F!</div>
    </div>
</body>
</html>

이렇게 한 번 작성을 해봤습니다.

h3 태그와 li 태그의 글자색을 갈색으로 적용을 해봤습니다.

이렇게 적용을 하게 되면 해당 태그 내에 있는 모든 글자들에 적용이 됩니다.

그럼 결과 화면을 보도록 하겠습니다.

이렇게 li 태그와 h3 태그 내에 입력이 되어있는 글자만 갈색으로 변한 것을 보실 수가 있습니다.

여기까지 태그 이름 셀렉터에 대해 알아보았습니다.

다음 포스팅에서는 클래스 셀렉터에 대하여 알아보도록 하겠습니다.

긴 글 읽어주신 독자분들께 진심으로 감사드립니다~

저작자표시 비영리 변경금지

'html, css, 자바스크립트 > css' 카테고리의 다른 글

css id 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 클래스 셀렉터에 대하여 알아보기 (0)	2023.03.13
css 규칙에 대하여 알아보기 (0)	2023.03.13
css link 태그 이용하여 외부 스타일 시트 불러오는 방법 알아보기 (2)	2023.03.13
css style 태그로 스타일 시트 만들기 (0)	2023.03.13

개발러 L의 뻔fun한 코딩

css 태그 이름 셀렉터에 대하여 알아보기