JS | CSS | HTML

60일차 CSS STYLE, SELECTOR

leo lee 2022. 12. 20. 12:47
반응형

CSS 적용 방법

1. 외부 스타일 시트

<!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>
    <!--외부스타일시트-->
    <link rel="stylesheet" href="index01.css">
</head>
<body>
    <p>외부스타일시트</p> 
</body>
</html>
p {color: red;}

2. 내부 스타일 시트

<!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>
        p{color: blue;}
    </style>

</head>
<body>
    <p>내부스타일시트</p>
</body>
</html>

 

3. 인라인 시트

<!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>
</head>
<body>
    <p style="color: aqua;">인라인스타일시트</p> 
</body>
</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>Document</title>
    <!--외부스타일시트-->
    <link rel="stylesheet" href="index01.css">
    
    <!--내부스타일시트-->
    <style>
        b{color: blue;}

    </style>

</head>
<body>

    <p>외부스타일시트</p>

    <b>내부스타일시트</b>
    
    <p style="color: aqua;">인라인스타일시트</p>
    
</body>
</html>

 

결과

선택자

선택자 종류 1

전체 선택자: 모든 태그의 스타일을 지정

<style>
        *{Color: red;}
</style>

태그 선택자: 태그의 스타일을 지정

<style>
	h1{color: red;}
</style>

아이디 선택자: 아주 고유한 경우 아이디 라는 속성 사용 -> 지칭하는 키워드 "#header" 중요함

header라는 태그를 나타내는 것이 아닌, ID가 header인  태그의 스타일을 지정 

<style>
	#header{color: red;}
</style>

 

클래스 선택자: 클래스는 중복이 됨, ".select"  

 class속성으로 select를 가지는 태그의 스타일을 지정

<style>
	.select{color: red;}
</style>

 

선택자 예시 1

<!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>
        *{}/*디자인 시작전에 전역으로 적용할 속성 margin and padding에 적용*/
        b{ color: red;}
        #a1{color:aqua;} /* 아이디 */
        .b1{color:blue;} /* 클래스 */
    </style>

</head>
<body>
    <p>선택자</p>
    <b>태그 선택자</b>
    <p id="a1">아이디 선택자</p>
    <p class="b1">클래스 선택자</p>
    <p class="b1">클래스 선택자</p>
    
</body>
</html>

 

결과

선택자 종류 2

후손 선택자: id, class 의 후손 위치에 있는 모든 태그의 스타일 지정

<style>
        .box p{color: yellow;} /* 모든 자식 */
</style>

자손 선택자: id, class 바로 하위 자식에 있는 태그의 스타일 지정 

<style>
        .box>p{color: purple;} /* 직계 자식 */
</style>

여러 개를 하는 경우 "," 를 사용하여  가능하다 

<style>
        .box2 li, 
        .box2 p{color: green;}
</style>

 

기본 속성 선택자: id, class 안의 input태그 중에서 type을 지정하여 스타일을 지정

<style>
	.forms input[type=text]{background-color: aqua;}
</style>

문자열 속성 선택자: id, class img 태그 중 png로 끝나는 것을 지정하여 스타일을 지정

<style>
	.forms img[src$=png]{border: 3px solid red;}
    /* $=을 통해 png로 끝나는 이라는 것을 정할 수 있다.*/
</style>

 

 

가상 선택자: active, hover, focus는 알아 두면 유용 

선택자 형태 설명
:active 사용자가 마우스로 클릭한 태그를 선택
:hover 사용자가 마우스를 올린 태그를 선택
:checked 체크 상태의 input 태그를 선택
:focus 초점이 맞추어진 unput 태그를 선택
:enabled 사용 가능한 input 태그를 선택
:disabled 사용 불가능한 input 태그를 선택

:hover 

<style>
        /* 마우스 닿을 때 */
        .list > ul > li > a:hover{background-color: aqua;}
</style>

:focus

<style>

        /* input에 포커스 될 때 */
        .inner input:focus {background-color:aqua;}

</style>

 

:active

<style>
        /* 눌렀을 때 */
        .title p:active{background-color: aqua;}
</style>

 

선택자 예시 2

<!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>
        .box p{color: yellow;} /* 모든 자식 */
        .box>p{color: purple;} /* 직계 자식 */

        .box2 li, 
        .box2 p{color: green;}

        .forms input[type=text]{background-color: aqua;}

    </style>

</head>
<body>
    
    <div class="box">
        <p>하위 선택자 꺽쇠</p>
        <p>하위 선택자 꺽쇠</p>

        <form>
            <p>하위 선택자 공백</p>
        </form>

    </div>

    <div class="box2">
        <ul>
            <li>목록</li>
            <li>목록</li>
            <li>목록</li>

        </ul>

        <div>
            <p>내용...</p>
        </div>

    </div>

    <form class="forms">
        <input type="text">
        <input type="submit" value="제출">
    </form>
    
</body>
</html>

 

결과

 

반응형