CSS 기본, 선택자

HTML, CSS

CSS 기본, 선택자

오매준 2024. 7. 19. 09:34

# CSS (Cascading Style Sheet)

CSS는 해당 웹 페이지의 디자인을 담당하는 스타일시트를 작성하는 문법이다
스타일시트에는 해당 웹 페이지의 특정 요소가 사용자에게 어떤 모습으로 보여야 할지를 정의해 둔다
웹 브라우저는 스타일 시트를 확인하고 해당 요소를 어떻게 그려야 할지를 판단하여 그린다
스타일시트로 모든 디자인을 원하는 대로 변경할 수 있기 때문에 HTML의 기본 디자인은 거의 의미가 없고, 해당 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>
</head>
<body>
    
</body>
</html>

기본적인 html이다

head 부분에 style 태그 적용

CSS문법이 적용되는 영역이다


            요소선택(Selector) {
                디자인속성(property) : 디자인값(property value)
            }

            선택자 : 어떤 HTML요소에 디자인을 적용 할 것인지 선택하는 곳
            속성 : 해당 요소의 어떤 속성을 설정 할 것인지 선택하는 곳
            값 : 해당 속성에 대한 원하는 값을 적는 곳

모든 h3태그 요소에 스타일을 적용하고 싶은 경우

 h3 {
    color: rgba(87, 27, 199, 0.329);
}

모든 li태그를 지닌 요소에 스타일을 적용

li {
    color: orangered;
    background-color: aliceblue;
}

모든 ul태그를 지닌 요소에 스타일을 적용

ul {
    background-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_CSS.html</title>
    <style>
        /* CSS문법이 적용되는 영역 */
        
        /*
            요소선택(Selector) {
                디자인속성(property) : 디자인값(property value)
            }
            선택자 : 어떤 HTML요소에 디자인을 적용 할 것인지 선택하는 곳
            속성 : 해당 요소의 어떤 속성을 설정 할 것인지 선택하는 곳
            값 : 해당 속성에 대한 원하는 값을 적는 곳
        */

        /* 모든 h3태그 요소에 스타일을 적용하고 싶은 경우*/
        h3 {
            color: rgba(87, 27, 199, 0.329);
        }
        
        /* 모든 li태그를 지닌 요소에 스타일을 적용*/
        li {
            color: orangered;
            background-color: aliceblue;
        }

        /* 모든 ul태그를 지닌 요소에 스타일을 적용*/
        ul {
            background-color: black;
        }
    </style>
</head>
<body>
    
    <h3># CSS (Cascading Style Sheet)</h3>

    <ul>
        <li>CSS는 해당 웹 페이지의 디자인을 담당하는 스타일시트를 작성하는 문법이다</li>
        <li>스타일시트에는 해당 웹 페이지의 특정 요소가 사용자에게 어떤 모습으로 보여야 할지를 정의해 둔다</li>
        <li>웹 브라우저는 스타일 시트를 확인하고 해당 요소를 어떻게 그려야 할지를 판단하여 그린다</li>
        <li>스타일시트로 모든 디자인을 원하는대로 변경 할 수 있기 때문에 HTML의 기본 디자인은 거의 의미가 업고,
            해당 HTML태그의 의미가 더 중요하다
        </li>
    </ul>
</body>
</html>

tagName : 해당 태그 이름을 지닌 모든 요소를 선택

body {
    font-size: 30px;
    background-color: rgb(13, 43, 78);
    color: white;
}

#id : 해당 id를 지닌 요소만 선택

※ 프래그래밍 언어에서 -를 그냥 사용하면 연산자이지만
HTML과 CSS에서는 연산자가 아닌 문자로 사용된다

 #list-item3 {
    color: orange;
}

.className : 해당 class값을 지닌 모든 요소 선택

※ id 속성은 단 하나의 요소만 선택 할 수 있지만
class 속성은 선택시 여러개의 요소가 선택된다고 생각해야 한다

.drink {
    text-decoration: underline double 2px aqua;
}

소나타 li태그에는 "car" drink 태그는 "drink" 태그로 밑줄에 아쿠아 색이 있다

div ( division ) : 블록 요소 생성

구획 나누기: 페이지의 특정 부분을 구획으로 나누어 구조화된 레이아웃을 만들기
스타일링: CSS와 함께 사용하여 디자인과 스타일을 적용
JavaScript와의 연동: JavaScript를 사용하여 동적으로 내용을 변경하거나 조작할 때, <div> 요소를 쉽게 선택

#box1 내부의 자식 div들을 선택

#box1 {
    color: black;
}

#box1 > div {
    color: red;
    background-color: aqua;
}

> 로도 가능하고

#box2 div {
    color: chartreuse;
    background-color: crimson;
}

띄어쓰기로도 가능하다

,를 사용해 다중 선택도 가능하다

#list-item1, #list-item6 {
    color: black;
}

전체 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_선택자(Selector).html</title>
    <style>

        /* tagName : 해당 태그 이름을 지닌 모든 요소를 선택 */
        body {
            font-size: 30px;
            background-color: rgb(13, 43, 78);
            color: white;
        }

        /*
             #id : 해당 id를 지닌 요소만 선택 
             ※ 프래그래밍 언어에서 -를 그냥 사용하면 연산자이지만
                HTML과 CSS에서는 연산자가 아닌 문자로 사용된다
        */
        #list-item3 {
            color: orange;
        }

        /* 
            .className : 클래스 속성값으로 요소들을 선택 할 수 있다 
            ※ id 속성은 단 하나의 요소만 선택 할 수 있지만
                class 속성은 선택시 여러개의 요소가 선택된다고 생각해야 한다
        */
        .drink {
            text-decoration: underline double 2px aqua;
        }

        div {
            border: solid white 3px;
            padding: 10px;
        }

        div > div {
            border-color: black;
        }

        /* #box1 내부의 자식 div들을 선택*/
        #box1 {
            color: black;
        }

        #box1 > div {
            color: red;
            background-color: aqua;
        }

        /* #box2 내부의 자손 div를 선택 */
        #box2 div {
            color: chartreuse;
            background-color: crimson;
        }

        /*  ,를 사용해 다중 선택 */
        #list-item1, #list-item6 {
            color: black;
        }
    </style>
</head>
<body>
    
    <h3># CSS 선택자</h3>

    <ul>
        <li>tagName : 해당 태그 이름의 모든 요소 선택</li>
        <li>#id : 해당 id를 지닌 요소 하나만 선택</li>
        <li>.className : 해당 class값을 지닌 모든 요소 선택</li>
        <li>* : 모든 요소 선택</li>
        <li>&gt; : 해당 요소의 자식 요소 선택(정확하게 자식 요소만)</li>
        <li>공백 : 해당 요소의 자손 요소 선택(내부에 있는 모든 요소가 자손)</li>
        <li>, : 여러개의 선택자를 사용</li>
        <li><a href="https://flukeout.github.io/"> 선택자 연습하러가기 </a></li>
    </ul>

    <hr>

    <ul>
        <li id="list-item1" class="drink">콜라</li>
        <li id="list-item2" class="drink">사이다</li>
        <li id="list-item3" class="drink">환타</li>
        <li id="list-item4" class="drink">홍차</li>
        <li id="list-item5" class="drink">우롱차</li>
        <li id="list-item6" class="car">소나타</li>
    </ul>

    <hr>

    <!-- div: 그냥 블록 요소를 하나 만들고 싶을때 사용-->
    <div id="box1">
        <div>
            1
            <div>1-1</div>
            <div>1-2</div>
        </div>
        <div>2</div>
        <div>3</div>
    </div>

    <div id="box2">
        <div>
            1
            <div>1-1</div>
            <div>1-2</div>
        </div>
        <div>2</div>
        <div>3</div>
    </div>

</body>
</html>