[CSS]-1. 적용방법 및 선택자

오늘부터 CSS를 배우기 시작했습니다. html과 마찬가지로 학원에서 배우는 내용을 중점으로 정리해보겠습니다!!

오늘은 적용방법과 선택자에 대해 간단히 알아보겠습니다 :)

<CSS 적용방법>

HTML 요소에 'style' 속성으로 적용
HEAD 요소 안에 <style> 태그를 이용해서 적용
HEAD 요소 안에 <link> 태그를 이용해서 외부 css 파일을 적용

1번과 2번은 'Inline-Style'이고, 보안상 취약함으로 사용되지 않음.

<선택자>

요소 선택자(Element Selector) : 태그의 이름으로 선택한다. (그냥 요소 이름 적음)
클래스 선택자(Class Selector) : 태그의 class 속성(Attribute)으로 선택한다. (클래스 이름 앞에 마침표(.)를 붙임)
아이디 선택자(ID Selector) : 태그의 id 속성(Attribute)으로 선택한다. (아이디 이름 앞에 샾(#)을 붙임)

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>CSS-1</title>
        <style>
            /*
            요소 선택자 (Element Selector) : 태그의 이름으로 선택한다. (그냥 요소 이름 적음)
            클래스 선택자 (Class Selector) : 태그의 class 속성(Attribute)로 선택한다.
            (클래스 이름 앞에 마침표(.)를 붙인다.)
            아이디 선택자 (ID Selector) : 태그의 id 속성(Attribute)로 선택한다. (아이디 이름 앞에 샾(#)을 붙인다.) < 사용하지 않음.
            */ 
            /* a{
                color: blue;
            } */
            
            a{
                font-size: large;
            }
            .color-blue {
                color: blue;
            }
            
            
            .text-big{
                
                font-size: 15pt;
            }

            #color-red {
                color: red;
            }

        </style>
    </head>

    <body>
        <!-- <a style="color: red;">I'm red.</a> -->
        <a>청춘 고양이</a> <!--1번 방법-->
        <br>
        <a class="color-blue">I'm blue.</a> <!--2번 방법-->
        <br> 
        <a class="color-blue text-big">I'm blue and big.</a> <!--2번 방법-->
        <br>
        <a class="text-big">I'm black and big.</a> <!--2번 방법-->
        <br>
        <a id="color-red">I'm Red</a> <!--3번 방법-->
        
    </body>
</html>

<복합 선택자>

자식 선택자 : 계층 구조에서 바로 아래 오는 자식 요소만을 선택 {부모 선택자} > {자식 선택자}
후손 선택자 : 계층 구조에서 하위에 오는 모든 후손들을 선택 {부모 선택자} {자식 선택자}
인접 형제 선택자 : {선택자1} + {선택자2} : 선택자 1에 의해 선택된 요소 바로 뒤에 붙어서 나오는 선택자 2에 해당하는 요소
형제 선택자 : {선택자1} ~ {선택자2} : 선택자 1에 의해 선택된 요소 뒤에 나오는 선택자 2에 해당하는 요소

ㅣ<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>CSS-2</title>
    </head>
    <style>
        span {
            color: red;
        }
        
        /* 자식 선택자 : {부모 선택자} > {자식 선택자} */
        body > span {
            text-decoration: underline;
        } 

        /* 후손 선택자 : {부모 선택자} {자식 선택자} */

       body> div > span{
            font-style: italic; 
        } 

        /* 인접 형제 선택자 : {선택자 1} + {선택자 2} : 선택자1에 의해 선택된 요소 바로 뒤에 붙어서 나오는 선택자2에 해당하는 요소. */
        body > div > div > span.three + a {
            color: blue;
        }
        
        /* 형제 선택자 : {선택자 1} ~ {선택자 2} : 선택자1에 의해 선택된 요소 뒤에 나오는 선택자2에 해당하는 요소. 같은 부모를 가져야 한다. */
        body > div > div > span.three ~ a {
            color: blue;
        }
    </style>
    <body>
        <span>One</span>
        <div>
            <span>Two</span>
            <div>
                <span class="three">Three</span>
                <span>Four</span>
                <span>Five</span>
                <a>Six</a> 
            </div>
        </div>
    </body>
</html>

<속성 선택자>

클래스 속성이나 ID 속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성을 가지고 스타일을 지정하는 방법

<!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>Document</title>
    <style>
        body>label>input[type=checkbox]{
            display: none;
        }

    </style>
</head>

<body>
    <label>
        <input type="checkbox">
        <span>청춘 고양이</span>
    </label>
</body>
</html>

<가상 선택자>

선택자 뒤에 : 를 붙이면 특정 상황마다 적용할 스타일을 설정. 각 선택자 뒤에 클론(:)을 적고 명시

몇 가지의 가상 선택자를 알아봅시다.

가상 선택자
:link	방문한 적이 없는 링크 선택
:visited	방문한 적이 있는 링크 선택
:hover	마우스를 가져다 (롤오버) 둘때 발생
:active	마우스를 클릭했을 때 발생
:focus	포커스 되었을 때 (보통 사용자가 요소를 클릭 하거나 키보드로 Tab키를 누를때) 발생
:first	첫번째 요소선택
:last	마지막 요소선택
:first-child	첫번째 자식선택
:last-child	마지막 자식선택
:nth-child()	괄호안에 있는 자식 (괄호 안이 even이면 짝수 자식들 선택, odd면 홀수 자식들 선택)
:not(가상 선택자)	부정을 뜻함 즉, 인수로 받는 선택자의 반대를 선택

nth child 경우 시작점은 해당 요소의 자식들의 첫 요소로부터 시작한다.

<!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>Document</title>
    <style>
        body>label>input[type=checkbox]{
            display: none;
        }

        body > div > a:first-child {
                color: blue;
            }

            body > div > a:nth-child(5) {
                color: orange;
            }

            body > div > a:last-child {
                color: red;
            }
    </style>
</head>

<body>
    <body>
        <label class="agree">
            <input type="checkbox">
            <span>위 약관을 읽어보았고 동의합니다.</span>
            <br>
            <span class="warning">위 약관을 읽고 동의해주세요.</span>
        </label>
        <div>
            <a>Hello?</a>
            <br>
            <a>Hello?</a>
            <br>
            <a>Hello?</a>
            <br>
            <a>Hello?</a>
            <br>
            <a>Hello?</a>
        </div>
</body>
</html>

여기서 시작점은 <a>요소 이며 <br>도 그 순번에 들어가게 된다. body > div > a:nth-child(5)인 경우를 한번 보자

body > div > a:nth-child(5){color : orange;}

즉 시작점은 해당 요소의 자식들의 첫 요소인 <a>부터 시작되면 5번째는 아래와 같이 표시가 된다.

여기서 우리는 주의를 해야 되는데 만약 body > div > a:nth-child(4) 면 어떻게 될까?

body > div > a:nth-child(4){color : orange;}

4번째는 <br>의 요소를 가르키기 때문에 값이 나오지 않게 된다.

따라서 요소의 시작점으로 부터시작점으로부터 해당 요소가 시작점으로부터 얼마나 떨어져 있는지를 확인하고 그 위치에 해당 요소가 있는지를 확인해야 된다.

오늘의 포스팅을 마무리하겠습니다. 오늘은 CSS 적용방법과 선택자에 대해 알아보았습니다. 다들 내일도 파이팅!

'HTML&CSS' 카테고리의 다른 글

[CSS]-3. GRID와 FLEX (1)	2022.04.24
[CSS]-2. POSITION (0)	2022.04.20
구획, 입력, 폼 HTML (0)	2022.04.17
제목, 목록, 표 HTML (0)	2022.04.16
HTML (0)	2022.04.14

'HTML&CSS' 카테고리의 다른 글

티스토리툴바