✿∘˚˳°∘°

33일차 : 선택자 본문

국비수업/HTML+CSS

33일차 : 선택자

_HYE_ 2023. 1. 11. 16:41

20230111

 

-- style 적용방법

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        h2{
            color:green;
            background-color:rgba(145, 90, 75, 0.866);
        }
    </style>
    <link rel="stylesheet" href="css/test.css"
</head>
<body>
    <!-- 인라인 스타일 적용 : 스타일값을 직접 지정 -->
    <!-- color : 글자색 / background-color : 배경색 -->
    <h1 style="color:rgb(162, 62, 174);background-color: blanchedalmond;">h1</h1>
    <!-- 내부 스타일 시트 : <style></style>코드 입력 -->
    <h2>h2</h2>
    <!-- 외부 스타일 시트 : css파일생성 -->
    <!-- 단, 파일만 생성해서는 x link를 작성해주어야한다,.-->
    <h3>h3</h3>
</body>
</html>
h3{
    color:rgb(155, 137, 79);
    background-color: burlywood;
}

 

[ 1. 선택자 ]

p { color : red; }

p : 선택자 / color : 속성 / red : 값

- p태그의 글씨 색을 red로 변경 

 

CSS  선택자 : html문서 내부에서 스타일을 적용하기 위한 요소를 선택하는 것

 

<head></head> 에 반드시 css파일을 연동해 주어야 사용이 가능하다.

<!DOCTYPE html>
<html lang="ko">
<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>선택자1</title>
    <link rel="stylesheet" href="css/selector1.css">
</head>
   <h1>CSS 선택자</h1>
    <p>
        선택자<br>
        특정한 HTML태그를 선택할 때 사용하는 기능<br>
        태그를 선택해서 원하는 스타일과 기능을 적용
    </p>
    <hr>

 

-- 전체 선택자 

    <h2>전체 선택자(모든선택자)</h2>
    <p>HTML 문서 안의 모든태그를 선택할 때 사용하는 선택자</p>
    <pre>*{속성 : 값;} 와 같은 형태로 사용</pre>
    <hr>
*{
    color:blue;
}

문서안의 모든 태그의 글자 색이 blue가 된다.

 

 

p태그에 작성된 글자만 변경된걸 확인할 수 있다.

    <h2>태그 선택자</h2>
    <p>HTML 문서 내 같은 태그를 모두 선택하는 선택자</p>
    <pre>태그이름{속성 : 값;}</pre>
    <hr>
p{
    color:rgb(153, 93, 68);
}

 

 

 

    <h2>아이디 선택자</h2>
    <p>HTML 문서 내에 해당하는 id 속성을 가진 태그만 선택할 때 사용(단, id중복X)</p>
    <!-- 아이디가 중복되면 나중에 javascript에서 오류발생-->
    <pre>#아이디{속성 : 값;}</pre>
    <ol>
        <li id="li1">아이디 선택자 테스트1</li>
        <li id="li2">아이디 선택자 테스트2</li>
        <li id="li3">아이디 선택자 테스트3</li>
        <li id="li4">아이디 선택자 테스트4</li>
        <li id="li5">아이디 선택자 테스트5</li>
    </ol>
/*아이디선택자*/
/*선택자를 여러개 사용할 경우 ,로 구분*/
#li3, #li1{
    color:red;
    background-color:rgb(189, 248, 255);
}
#li5{
    color:rgb(143, 228, 237);
}

 

 

 

 

    <h2>클래스 선택자</h2>
    <p>HTML 문서 내에 여러개 태그를 동일한 클래스 명으로 지정하여 선택할 때 사용</p>
    <!-- CSS에서 가장 핵심이 되는 선택자 -->
    <pre>.클래스{속성 : 값;}</pre>
    <ul>
        <li class="li1">클래스 선택자 테스트1</li>
        <li class="li1">클래스 선택자 테스트2</li>
        <li class="li2">클래스 선택자 테스트3</li>
        <li class="li2">클래스 선택자 테스트4</li>
        <li class="li3">클래스 선택자 테스트5</li>
    </ul>
    <div class="li1">클래스 선택자 테스트6</div>
    <!--태그에 종속적인게X 클래스에 종속적이므로 테스트6도 .li1에 설정한 속성이 적용된다-->
    <!--글자색은 같게하고 배경색 추가하는 방법-->
    <!--1 : 원시적인방법으로 클래스를 바꾸고 글자색을 동일하게 해준다 -->
    <div class="li4">클래스 선택자 테스트7</div>
    <!-- 방법2 : 태그.클래스{속성:값;}-->
    <!-- 클래스에서만 가능한 것 -->
    <div class="li1 bg">클래스 선택자만 가능한 기능</div>
    <hr>
    <!-- 속성을 미리 만들어두고 적용 -->
    <div class="t-red bg-blue">안녕</div>
    <div class="t-white bg-red">클래스</div>
/*클래스 선택자*/
.li1{
    color:darksalmon;
}
div.li1{
    color:darksalmon;
    background-color:blanchedalmond;
}
.li3{
    background-color:thistle;
}
.li4{
    color:darksalmon;
    background-color:thistle;
}
.bg{
    background-color: aquamarine;
}
/*미리 색상클래스를 만들어놓고 사용*/
.t-white{
    color:white;
}
.t-red{
    color:red;
}
.t-blue{
    color:blue;
}
.bg-red{
    background-color: red;
}
.bg-blue{
    background-color: blue;
}

 

 

 

 

    <h2>속성선택자</h2>    
    <p>기본선택자 뒤에 []를 이용하여 속성과 속성값을 사용하여 선택</p>
    <pre>선택자[속성이름=속성값]{속성명:속성값;}</pre>
    <div name="name1" class="div-class1">div1</div>
    <div name="name2" class="div-class2">div2</div>
    <div name="name3" class="div-class3">div3</div>
    <div name="name4" class="class-div">div4</div>
    <hr>
/* 속성선택자 */
/*속성명*/
div[name=name3]{
    color:violet;
}
/*클래스명*/
div[class=div-class2]{
    color:blueviolet
}
/*클래스 속성값이 div로 시작*/
div[class^=div]{
    background-color: bisque;
}

 

 

 

    <h2>자손/후손 선택자</h2>
    <p>자손선택자 : 바로 아래 하위요소<br>후손선택자: 하위요소 전체</p>
    <div id="div1">
        <h4>나는 div1의자손입니다.</h4>
        <h3>나도 div의 자손입니다.</h3>
        <ul id="ul1">
            <li>나는 ul1의 자손이면서 div의 후손1</li>
        </ul>
        <ul id="ul2">
            <li>나는 ul2의 자손이면서 div1의 후손2</li>
        </ul>
    </div>
/*자손선택자*/
#div1>h4{
    color:blue;
}
#div1 #ul2>li{
    background-color: antiquewhite;
}
/*후손 선택자*/
#div1 h4{
    color:aquamarine
}
#div1 li{
    color:yellowgreen;
}

 

 

 

 

    <h2>동위 선택자</h2>
    <p>동위 관계에서 뒤에있는 태그를 선택할 때 사용</p>
    <pre>바로다음요소 선택 : 선택자a+선택자b{속성:값;} / 다음의 모든태그 선택 : 선택자a~선택자b{속성:값;}</pre>
    <div id="div2">
        <div class="test1">TEST1</div>
        <div class="test2">TEST2</div>
        <div class="test3">TEST3</div>
        <div class="test4">TEST4</div>
        <div class="test5">TEST5</div>
    </div>
#div2>.test3+div{
    color:red;
}
#div2>.test2~div{
    background-color: antiquewhite;
}
/*
#div2>div+div{
    background-color: antiquewhite;
}
*/

 

 

    <h2>반응선택자</h2>
    <p>사용자의 움직임에 따라서 달라지는 선택자</p>
    <pre>사용자가 클릭한 태그 선택자:active{속성:값;}
         사용자의 마우스가 올라간 태그 선택자:hover{속성:값;}
    </pre>
    <div id="active-test" class="action-div">active</div>
    <hr>
    <div id="hover-test" class="action-div">hover</div>
/*반응선택자*/
.action-div{
    width: 300px;
    height: 300px;
    background-color: orange;
}
#active-test:active{
    background-color: brown;
}
#hover-test:hover{
    background-color: brown;
}

 

 

 

 

    <h2>상태선택자</h2>
    <p>입력양식의 상태에 따라 선택되는 선택자</p>
    <pre>input태그선택자:상대선택자{속성:값;}</pre>
    <input type="checkbox" name="hobby" value="독서">독서
    <input type="checkbox" name="hobby" value="잠">잠
    <input type="checkbox" name="hobby" value="공부">공부
    <br>
    <input type="text" name="id"><br>
    <input type="password" name="pw" disabled><br>
    <br>
    <input type="radio" name="gender" value="m" id="m">
    <label for="m">남자</label>
    <input type="radio" name="gender" value="f" id="f">
    <label for="f">여자</label>
/*상태선택자*/
/*누르면 체크박스 사이즈 변경*/
input[name=hobby]:checked{
    width: 20px;
    height: 20px;
}
/*누르면 배경색 생김*/
input[name=id]:focus{
    background-color: aquamarine;
}
/*disabled(비활성화) 색상변경 */
input[name=pw]:disabled{
    background-color: black;
}
/*라디오버튼을 안보이게 하는 기능*/
input[name=gender]{
    display: none;
}

input[name=gender]:checked+label{
    background-color: black;
    color: white;
}

label{
    display: block;
    float: left;
    width: 50px;
    height: 30px;
    line-height: 30px;
    border: 1px solid black;
    text-align: center;
}

라디오 버튼을 숨기고, 라벨을 디자인하는것도 가능

 

 

    <h2>일반구조선택자</h2>
    <p>특정한 위치에 있는 태그를 선택(위치로 구분)</p>
    <div id="div1">
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
        <p>test4</p>
        <p>test5</p>
        <pre>test6</pre>
    </div>
/*일반구조선택자*/
/*첫번째 자식*/
#div1>p:first-child{
    background-color: burlywood;
    color: green;
}
/*실행 안됨 : 마지막은 p태그가 아니기때문에*/
#div1>p:last-child{
    background-color: antiquewhite;
    color: aqua;
}
/*nth-child(몇번째자식인지)*/
#div1>p:nth-child(2n){
    background-color: aquamarine;
    color:white;
}
/*뒤에서부터 2번째인 자식 : test5*/
#div1>p:nth-last-child(2){
    background-color: blanchedalmond;
    color:blueviolet;
}

 

    <h2>형태구조선택자</h2>
    <p>특정한 위치에 있는 태그를 선택(태그별로 구분)</p>
    <div id="div2">
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
        <p>test4</p>
        <p>test5</p>
        <pre>test6</pre>
    </div>
/*형태구조선택자*/
/*p들 중에 첫번째 */
#div2>p:first-of-type{
    background-color: cadetblue;
    color:azure;
}
/*p들중에 마지막 pre는 제외된다.*/
#div2>p:last-of-type{
    background-color: blanchedalmond;
    color:blueviolet;
}
#div2>p:nth-of-type(2){
    color:blueviolet;
}
#div2>p:nth-last-of-type(2){
    color:red;
}
#div2>p:nth-of-type(2n){
    background-color: aquamarine;
}

 

 

    <h2>문자선택자</h2>
    <p>태그 내부에서 특정 조건의 문자를 선택하는 선택자</p>
    <div id="test3">
        <p>
            동해 물과 백두산이 마르고 닳도록
            하느님이 보우하사 우리나라 만세.
            무궁화 삼천리 화려 강산
            대한 사람, 대한으로 길이 보전하세.

            남산 위에 저 소나무, 철갑을 두른 듯
            바람 서리 불변함은 우리 기상일세.
            무궁화 삼천리 화려 강산
            대한 사람, 대한으로 길이 보전하세.

            가을 하늘 공활한데 높고 구름 없이
            밝은 달은 우리 가슴 일편단심일세.
            무궁화 삼천리 화려 강산
            대한 사람, 대한으로 길이 보전하세.

            이 기상과 이 맘으로 충성을 다하여
            괴로우나 즐거우나 나라 사랑하세.
            무궁화 삼천리 화려 강산
            대한 사람, 대한으로 길이 보전하세.
        </p>
    </div>
/*문자선택자*/
/*특징 : 콜론(:)이 두개이다.*/
/*첫글자*/
#test3>p::first-letter{
    color:red;
}
/*첫줄*/
#test3>p::first-line{
    background-color: beige;
}
/*드래그색*/
#test3>p::selection{
    background-color: darkorange;
}

 

 

 

    <h2>부정선택자</h2>
    <p>선택을 반대로 적용하는 선택자</p>
    <div id="test4">
        <p>test1</p>
        <p>test2</p>
        <p>test3</p>
        <p>test4</p>
        <p>test5</p>
    </div>
/*부정선택자*/
/*2n빼고 나머지(선택을 뒤집음)*/
#test4>p:not(:nth-of-type(2n)){
    background-color:cornflowerblue;
    color:white;
}

 

 

 

.bbb로 지정해준건 취소되는걸 확인할 수 있다.

    <h2>선택자 사용 시 주의점</h2>
    <div id="aaa" class="bbb">안녕하세요</div>
    <div class="bbb ccc">HI</div>
/*선택자 주의점*/
.bbb{
    color:red;
}
#aaa{
    color:blue;
}
/*우선순위가 id가 더 높기 때문에 파란색이된다.*/
/*우선순위 : 태그 -> class -> id -> 인라인 */

.ccc{
    color:teal;
}
/*우선순위가 동등할 때는 문서기준 나중에 작성된게 적용*/

 

 

저작자표시

'국비수업 > HTML+CSS' 카테고리의 다른 글

36일차 : [실습] 헤더 / 약관동의 / 회원가입  (0) 2023.01.17
35일차 : 배경스타일 / 트랜스폼 / 애니메이션  (0) 2023.01.14
34일차 : 텍스트 / 목록스타일 / 레이아웃  (0) 2023.01.14
32일차 : 테이블 / 영역분할 / 하이퍼링크 / 폼  (0) 2023.01.11
31일차 : 글자태그 / 목록태그  (0) 2023.01.09
'국비수업/HTML+CSS' Related Articles more
Comments