본문 바로가기
CSS/CSS

CSS) 스타일 기본 형식, HTML문서 적용 방법, 선택자(1)

by 박채니 2022. 5. 13.

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

CSS(Cascading Style Sheets)

- 디자인을 입힐 때 사용하는 언어

 

스타일 기본 형식

<style>
선택자 {스타일속성 : 속성값}
</style>

 

CSS를 HTML문서에 적용하는 방법

① HTML요소의 inline style 속성 작성

<li style="color:hotpink; text-decoration: underline;">HTML요소의 inline style속성 작성</li>

 

② HTML문서의 내부 style태그 작성

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
    /* 내부 style 태그 - head태그 안에 작성 */
    li {
        font-size: 32px;
    }
    </style>
</head>

 

③ 외부 CSS파일을 현재 HTML문서와 연결

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    
    <!-- 외부 style 문서 연결하기 -->
    <link rel="stylesheet" href="css/style.css">
</head>

/* css 영역 style.css */
ol {
    background-color: lightgray;
}

보통 3번을 자주 사용하며, 1번의 방법 사용을 지양합니다.

 

https://www.w3schools.com/cssref/css_selectors.asp

 

CSS Selectors Reference

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

선택자

HTML코드

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <h1 title="선택자">선택자</h1>
    <!-- div>p#p$.group1{HelloWorld$}*5 -->
    <div>
        <p id="p1" class="group1" title="안녕1">HelloWorld1</p>
        <p id="p2" class="group1">HelloWorld2</p>
        <p id="p3" class="group2">HelloWorld3</p>
        <p id="p4" class="group2" title="안녕4">HelloWorld4</p>
        <p id="p5" class="group1 group2">HelloWorld5</p>
    </div>
</body>
</html>

 

태그명

<style>
    /* 태그명 */
    p {
        color:blueviolet;
    }
</style>

 

#아이디

<style>
    /* 태그명 */
    p {
        color:blueviolet;
    }
    
    /* 아이디 */
    #p3 {
        color: yellowgreen;
    }
</style>

 

.클래스명

/* 클래스명 - 태그 그룹핑 */
/* 우선 순위가 같다면 나중에 작성된 스타일 적용 */
<style>
    .group1 {color: hotpink;}
    .group2 {color:yellowgreen}
</style>

id="p5"는 group1, group2에 모두 포함되므로 우선 순위가 같습니다. 따라서 나중에 작성된 스타일이 적용되어 yellowgreen이 적용되었습니다.

두 코드의 순서를 바꾸면 p5에도 hotpink가 적용됩니다.

    <style>
    /* 클래스명 - 태그 그룹핑 */
    /* 우선 순위가 같다면 나중에 작성된 스타일 적용 */
    .group1 {color: hotpink;}
    .group2 {color:yellowgreen}
    .group1.group2 {color:blue;}
    </style>

선택자를 구체화할 수록 해당 스타일이 적용되기 때문에 .group1.group2의 클래스를 갖고 있다면 blue가 적용되므로 "p5"는 blue가 적용!!

순서대로 override된 것을 확인할 수 있습니다.

 

선택자 나열

선택자, 선택자

    <style>
    /* 선택자 나열 */
    #p1, #p3 {
        text-decoration: underline;
    }
    </style>

, 를 이용하여 선택자를 나열!

아이디 값이 p1, p3이라면 글자에 underline을 적용하였습니다.

 

[속성]

    <style>
    /* 속성 */
    [title] {
        background-color: lightskyblue;
    }
    </style>

title을 갖고 있는 h1, p1(id), p4(id)는 background-color가 적용됩니다.

 

    <style>
    /* 속성 */
    [title] {
        background-color: lightskyblue;
    }
    [title=안녕1] {
        color: white;
    }
    </style>

 

혼용

    <style>
    /* 혼용 */
    p[title] {
        background-color: lightskyblue;
    }
    p.group2 {
        font-weight: bold;
    }
    </style>

p태그이면서 [title]속성을 갖는다면 background-color를 적용시켰으므로 h1(선택자)는 적용되지 않습니다.

 

HTML 코드

    <div id="parent">
        <h2>h2 안녕</h2>
        <ul>
            <li>li Hello</li>
            <li>li 니하오</li>
        </ul>
        <!-- #child>h2+ul>li*2 -->
        <div id="child">
            <h2>h2 잘가</h2>
            <ul>
                <li>li Byebye</li>
                <li>li 짜이찌엔</li>
            </ul>
        </div>
    </div>

 

직계자식

선택자 > 선택자

    <style>
    /* 직계 자식 */
    #parent > h2 {
        background-color: yellow;
    } 
    </style>

parent의 직계 자식인 h2에 background-color를 적용했으므로, h2 안녕이 적용됩니다.

 

후손

선택자 선택자

    <style>
    /* 직계 자식 */
    #parent > h2 {
        background-color: yellow;
    } 
    /* 후손 */
    #parent h2 {
        text-decoration: underline;
    }
    </style>

parent의 후손 h2에 underline을 추가했으므로 parent의 h2와 child의 h2 모두에게 underline이 적용됩니다.

 

    <style>
    /* 직계 자식 */
    #parent > h2 {
        background-color: yellow;
    } 
    /* 후손 */
    #parent h2 {
        text-decoration: underline;
    }
    #parent > ul > li {
        color: coral;
        text-decoration: coral underline;
    }
    #parent > #child > ul {
        color: yellowgreen;
        text-decoration: yellowgreen underline;
    }
    </style>

HTML 코드

    <!-- div>span#front$*5 -->
    <div>
        <span id="front1">HTML</span>
        <span id="front2">CSS</span>
        <span id="front3">Javascript</span>
        <span id="front4">jQuery</span>
        <span id="front5">Geolocation</span>
        <strong id="front6">webstorage</strong>
    </div>

 

다음 형제 요소 하나

선택자 + 선택자

    <style>
    /* 다음 형제 요소 하나 */
    /* * : 모든 태그들을 의미 */
    #front3 + span {
        color: chartreuse;
    }
    </style>

    <style>
    /* 다음 형제 요소 하나 */
    /* * : 모든 태그들을 의미 */
    #front3 + p {
        color: chartreuse;
    }
    </style>

만일 + p를 하면 p태그를 찾지 못하므로 스타일 적용이 안됩니다.

 

    <style>
    /* 다음 형제 요소 하나 */
    /* * : 모든 태그들을 의미 */
    #front3 + * {
        color: chartreuse;
    }
    </style>

따라서 주로 모든 코드를 나타내는 *를 사용하기도 합니다.

 

다음 형제 요소 모두

선택자 ~ 선택자

    <style>
    /* 다음 형제 요소 하나 */
    /* * : 모든 태그들을 의미 */
    #front3 + * {
        color: chartreuse;
    }

    /* 다음 형제 요소 모두 */
    /* #front3 ~ * 로 하면 모두 적용 */
    #front3 ~ span {
        text-decoration: line-through;
    }
    </style>

webstorage는 <span>태그가 아닌 <strong> 태그이기 때문에 적용이 안됩니다.

또한 선택자 ~ 선택자는 이전 요소는 선택할 수 없으며, 이는 추후 자바스크립트로 보완 가능합니다.

속성 관련

 

HTML 코드

<fieldset>
        <legend>속성관련</legend>
        <!-- (input+br)*5 -->
        <input type="text"><br>
        <input type="text" name="username"><br>
        <input type="email" name="useremail"><br>
        <input type="text" name="petname"><br>
        <input type="text" name="myusage"><br>
</fieldset>

 

[속성]

    <style>
        /* 속성 */
        [name] {
            background-color: lightsalmon;
        }
    </style>

[name] 속성을 가졌다면 background-color가 적용 되었습니다.

 

[속성=값]

    <style>
        [type=text] {
            background-color: lightseagreen;
        }
    </style>

type이 text이라면 background-color가 적용 되었습니다.

 

[속성^=값]

속성이 값으로 시작한다면~

    <style>
        [name^=user] {
            background-color: green;
        }
    </style>

name이 user로 시작한다면 background-color가 적용 되었습니다.

 

[속성$=값]

속성이 값으로 끝난다면~

    <style>
        [name$=name] {
            background-color: lightblue;
        }
    </style>

name이 name으로 끝난다면 background-color가 적용 되었습니다.

 

[속성*=값]

속성이 값을 포함한다면~

    <style>
        [name*=us] {
            background-color: lightcoral;
        }
    </style>

name에서 us를 포함하고 있다면 background-color가 적용 되었습니다.

 

저작자표시

'CSS > CSS' 카테고리의 다른 글

CSS) inline 요소, block 요소 정렬 (text-align, margin, margin-left)  (0) 2022.05.16
CSS) 텍스트 관련 (text-decoration, color, text-shadow)  (0) 2022.05.15
CSS) 폰트 관련 (폰트 적용 방법, font-family, font, 폰트 사이즈)  (0) 2022.05.15
CSS) 선택자 우선 순위  (0) 2022.05.13
css) 선택자(2) - 가상 클래스 선택자, 부정 선택자, 루트 선택자, 가상요소 선택자  (0) 2022.05.13

관련글

티스토리툴바