CSS

[css] 기본 선택자

채니◟( ˘ ³˘)◞ 2023. 10. 10. 17:24

전체 요소에 스타일을 적용하는 전체 선택자 

 

전체 선택자 (universal selector) 는 말 그대로 스타일을 문서의 모든 요소에 적용할 때 사용한다.

주로 모든 하위 요소에 스타일을 한꺼번에 적용한다.

기본형은 * { 속성: 값; ...}

 

또한 전체 선택자는 웹브라우저의 기본 스타일을 초기화할 때 자주 사용한다.

예를들어 웹 문서 내용을 브라우저 창에 바짝 붙지 않도록 문서 내용과 브라우저 테두리 사이에 여백을 약간 두는데 이를 마진과 패딩이라고 한다.

이런 여백 때문에 디자인이 깔끔하지 않을 경우 전체 선택자를 사용하여 웹 문서 전체 마진과 패딩 여백을 0으로 지정할 수 있다

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
    </style>
</head>
<body>
    <img src = "img/salad.jpg">
</body>
</html>

 

 

태그와 요소의 차이점  

 

태그는 말그대로 태그 자체를 가리키는 반면 요소는 태그를 적용한 것을 가리킨다.

<p> 텍스트 단락 지정 </p>

위 소스에서 <p> 태그는  태그 자체를 말하는 것이고 태그를 포함해 태그를 적용한 '텍스트 단락 지정' 부분을 p  요소라고 한다.

따라서 <p> 태그를 적용한 스타일이라는 표현은 틀린말이다.

p 요소에 적용하는 스타일이라고 표현하는 것이 맞다.

 

 

 

특정 요소에 스타일을 적용하는 타입 선택자

 

타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용한다.

타입 선택자를 사용해 스타일을 지정하면 해당태그를 사용한 모든 요소에 적용된다.

태그명 {스타일 규칙}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        font-style: italic;
    }
</style>
<body>
    <h1>짜잔</h1>
    <p>타입 선택자</p>
    <p>사용해보기</p>
</body>
</html>

 

특정 부분에 스타일 적용하는 클래스 선택자

 

위의 타입 선택자를 지정하면 그 태그를 사용한 모든 요소에 스타일을 적용한다.하지만 같은 태그라도 일부는 다른 스타일을 적용하고 싶다면 특정 부분만 선택해서 스타일을 적용하는 클래스 선택자를 사용한다.

 

.클래스명 { 스타일 규칙 }

 

클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데 이미 만들어 둔 클래스 스타일을 적용할 때는 태그 안에 class = '클래스 명' 처럼 class 속성을 사용해서 지정한다.여러 곳에 적용할 수 있고 요소 하나에 클래스 스타일을 2개 이상 적용할 수 있다. 2개 이상 적용 시 공백으로 구분해 이름을 적는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-style: italic;
        }
        .accent{
            border: 1px solid #000;
            padding: 5px;
        }
        .bg{
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <h1 class = "accent bg">accent, bg 클래스 선택자 사용</h1>
    <p>accent 클래스 선택자만 사용 <span class = "accent">짜잔</span></p>
</body>
</html>

 

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자 

 

id 선택자도 클래스선택자와 마찬가지로 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용한다.마침표 대신 # 기호를 사용한다는 점만 제외하면 스타일을 정의하는 방식은 클래스 선택자와 같다. id 스타일을 웹 요소에 적용할 때는 id = "아이디명" 처럼 사용한다.

 

# 아이디명 { 스타일 규칙 }

 

클래스 선택자와 id 선택자의 가장 큰 차이는 클래스 선택자가 문서에서 여러 번 적용할 수 있는 반면, id 선택자는 문서에서 한 번만 적용할수 있다는 것이다. 이처럼 id 선택자는 중복해서 적용할 수 없으므로 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바 스크립트 프로그램을 사용하면서 요소를 구별할 때 사용한다. 

 

예제 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container{
            width: 500px;
            margin: 10px auto;
            padding: 10px;
            border: 1px solid #000;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id = "container">
        <h1>레드향</h1>
    </div>
</body>
</html>

 

 

 

같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

 

선택자를 이용해 스타일을 정의하다보면 여러 선택자에서 같은 스타일 규칙을 사용하는 경우가 있다.

이 때 쉼표로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한번만 정의하면 된다.

 

예제

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1, p{
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>그룹 선택자</h1>
    <p>그룹 선택자</p>
</body>
</html>

 

 

 

저작자표시 (새창열림)