[WEB FRONT] TIL 032 - 23.08.28

유진·2023년 8월 28일

CSS

02_CSS 선택자 2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_CSS 선택자 2</title>

    <!-- link 태그 : 외부에 있는 파일과 연결하는 태그 -->
    <!-- rel 및 type 고정값 , href만 변경하면 됨. -->
    <link rel="stylesheet" href="css/selector2.css" type="text/css">
</head>
<body>

    <h3>기본 속성 선택자</h3>

    <pre>
        태그에 작성된 특정 속성을 선택하는 선택자.
        ( id, class 속성도 선택 가능은 하지만 보통 #, .을 사용함 )

        [작성법]
        선택자[속성명="속성값"] { CSS 코드 ; }

        (참고)
        1) 선택자는 생략할 수 있다.
            -> 특정 속성을 가진 모든 요소 선택

        2) "속성값" 양쪽의 쌍따옴표 ("") 는
            홑따옴표('') 로 변경할 수 있다.
    </pre>

    <div name="name-1" class="cls-1" id="">div1</div>
    <div name="name-1">div2</div>
    <div name="name-2">div3</div>
    <div name="name-2">div4</div>

    <p name="name-1">p1</p>
    <p name="name-1">p2</p>
    <p name="name-2">p3</p>
    <p name="name-2">p4</p>

    <hr>

    <h3>자식 선택자( > )</h3>
    <pre>
        지정된 요소 바로 하위에 존재하는 요소를 선택하는 선택자.

        [작성법]
        선택자1 > 선택자2 { CSS 코드 ; }

        - 선택자1 : 부모 요소 선택(반드시 필요)
        - 선택자2 : 자식 요소 선택(반드시 필요)
    </pre>

    <!-- li 자식 / span 후손 -->
    <ul id="parent-ul"> 부모
        <li>자식1</li>

        <li>
            <span>자식2</span>
        </li>

        <li>자식3</li>

        <li>
            <span>자식4</span>
        </li>
    </ul>

    <h3>후손(자손) 선택자 ( (띄어쓰기) )</h3>

    <pre>
        지정된 요소의 모든 하위에 존재하는 요소를 선택하는 선택자.

        [작성법]
        선택자1 선택자2 { CSS 코드 ; }

        - 선택자1 : 부모(조상) 요소 선택자
        - 선택자2 : 후손 요소 선택자
    </pre>

    <div id="test-div">
        <p>test-div의 자식 요소입니다</p>
        <p>test-div의 후손 요소입니다</p>

        <div>
            <p>나도 후손일까?</p>
        </div>
    </div>


    <hr>

    <h3>반응 선택자</h3>
    <pre>
        사용자의 움직임에 반응하여 스타일이 달라지는 선택자
        (마우스 오버, 클릭 유지.. )
        <!-- 마우스 오버는 굉장히 많이 사용! -->

        - 요소를 클릭하고 있는 경우(:active)
        - 요소에 마우스가 올라가는 경우(:hover)
    </pre>

    <div class="div-cls" id="active-test">:active 테스트</div>
    <div class="div-cls" id="hover-test">:hover 테스트</div>

    <hr>

    <h3>상태 선택자</h3>

    <pre>
        입력 양식(input, input 관련 태그)의
        상태에 따라 선택되는 선택자

        :focus -> 요소에 초점이 맞춰졌을 때
        :checked -> 요소가 체크 되었을 때(radio, checkbox)

        :enabled / :disabled
        -> 요소가 사용 가능한/불가능한 상태일 때
    </pre>

    <h4>:focus</h4>
    <input type="text" id="focus-test">


    <h4>:checked</h4>

    <label>사과
        <input type="checkbox" name="fruits">
    </label> <br>

    <label>바나나
        <input type="checkbox" name="fruits">
    </label> <br>

    <label>멜론
        <input type="checkbox" name="fruits">
    </label> <br>

    <h4>:enabled : :disabled</h4>

    <div id="test-div2">
        사용 가능 : <input type="text" enabled> <br>
        사용 불가능 : <input type="text" value="변경하면 안되는 값" disabled>
    </div>

    <hr>

    <h3>동위 선택자</h3>
    <pre>
        동위 관계(동등한 위치 == 형제 관계)에서
        뒤(다음)에 위치한 요소를 선택하는 선택자.

        A
        B
        B

        1) A 바로 뒤(다음)에 있는 B 요소 하나를 선택 (+)
            A선택자 + B선택자 { CSS 코드 ; }

        2) A 뒤에 있는 모든 B요소를 선택(~ 틸드(Tilde))
            A선택자 ~ B선택자 { CSS 코드 ; }    
    </pre>

    <div id="div1">1번 입니다.</div>
    <div>2번 입니다.</div>
    <div id="div3">3번 입니다.</div>
    <div id="div4">4번 입니다.</div>

    <p>관련 없는 태그입니다!</p>

    <div id="div5">5번 입니다</div>

    <hr>

    <h2>checkbox 모양 바꾸기</h2>

    <pre>
        [준비물]
        - 동위 선택자(+)
        - 상태 선택자(:checked)
        - input type="checkbox"
        - label 태그
        - 체크박스 이미지
    </pre>

    <!-- id, for 반드시 연결되어 있어야 함! -->
    <input type="checkbox" id="check1">
    <label for="check1"></label>

</body>
</html>

selector2.css

cf ) css 파일은 별도로 따로 작성!

/*
CSS 파일
파일 전체가 <style> 태그 내부라고 생각하면 됨

*/

/* 기본 속성 선택자 */
div[name="name-1"] {
    background-color: red;
}

[name="name-2"] {
    background-color: blue;
}

p[name="name-1"] {
    background-color: green;
}

/* 자식 선택자 */
#parent-ul > li {
    background-color: orange;
}

/* #parent-ul > li > span 가능! */
#parent-ul span {
    background-color: red;
}

#test-div p {
    background-color: yellowgreen;
}


/* 반응 선택자 */

.div-cls {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background-color: #ddd;

    /* 아래쪽 요소와의 간격 */
    margin-bottom: 30px;

    /* 요소에 마우스 커서가 올라오면
    손가락 모양으로 변경 */
    cursor: pointer;
}

/* 클릭하고 있을때만 반응하는 :active */
#active-test:active {
    background-color: yellow;
}

#hover-test:hover {
    background-color: pink;
    width: 230px;
    height: 230px;
}

/* #hover-test 요소가 변화를 일으키면 0.5초 동안 변해라 */
#hover-test {
    transition-duration: 0.5s;
}

/* 요소에 초점이 맞춰졌을 때 (:focus) */
/* focus out 시에는 원래대로 돌아옴 */
#focus-test:focus {
    background-color: blueviolet;
}

/* 요소가 체크되었을때 (:checked) */
input[name="fruits"]:checked {
    width: 30px;
    height: 30px;

    background-color: red;
    /* radio, checkbox 는
        크기를 제외한 스타일 적용되지 않는다.
    */
}

/* 사용 가능/불가능 (:enabled/:disabled) */
#test-div2 > input:enabled {
    background-color: lightgreen;
}

#test-div2 > input:disabled {
    background-color: lightcoral;
}

/* 동위 선택자 */

#div1 + div {
    background-color: olive;
}

#div3 ~ div {
    background-color: brown;
}

/***** checkbox 모양 바꾸기 *****/

#check1 + label {
    width: 30px;
    height: 30px;

    border: 1px solid black;

    display: block;

    cursor: pointer;
    border-radius: 15%;
}

/* 체크된 #check1 뒤에 있는 label 태그 */
#check1:checked + label {
    background-image: url(../../images/check.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#check1 {
    display: none;
}

03_CSS 선택자 3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_CSS 선택자 3</title>

    <link rel="stylesheet" href="css/selector3.css" type="text/css">
</head>
<body>
    <h1>문자열 속성 선택자</h1>

    <pre>
        속성값의 문자열을 확인하여 스타일을 적용하는 방식의 선택자.

        1) 선택자[속성명 ~= "특정값"] { CSS 코드 ; }
        -> 띄어쓰기로 구분되어있는 여러 속성 값이 작성된 속성 중
        속성값이 특정 값을 단어로 포함하는 요소를 선택

        2) 선택자[속성명 |= "특정값"] { CSS 코드 ; }
        -> 속성값이 특정 값을 단어로 포함하는 요소를 선택
        단, "-" 기호로 구분, "-" 앞의 내용이 동일해야 한다.

        3) 선택자[속성명 ^= "특정값"] { CSS 코드 ; }
        ( ^ : 캐럿 )
        -> 속성값이 특정값으로 시작하는 요소를 선택

        4) 선택자[속성명 $= "특정값"] { CSS 코드 ; }
        -> 속성값이 특정값으로 끝나는 요소를 선택

        5) 선택자[속성명 *= "특정값"] { CSS 코드 ; }
        -> 속성값이 특정값을 포함하는 요소를 선택
    </pre>


    <div name="aaa bbb str-1" class="str-class"> div1 </div>
    <div name="str-2 aaa" class="str-class"> div2 </div>
    <div name="str" class="class-str"> div3 </div>
    <div name="aaa str-3" class="str-class2"> div4 </div>

</body>
</html>

selector3.css

/* ~= : 여러 속성 값중 하나라도 일치하면 선택 */
div[name ~= "aaa"] {
    background-color: greenyellow;
}

/* |= : "-" 기호 앞쪽 단어가 일치하는 요소 선택 */
div[class |= "str"] {
    color: red;
    font-weight: bold;
}

/* ^= : 특정 값으로 시작하는 요소 선택 */
div[class ^= "class"] {
    background-color: black;
    color: white;
}

/* $= : 특정 값으로 끝나는 요소 선택 */
div[class $= "class2"] {
    font-size: 24px;
}

/* *= : 특정 값을 포함하는 요소 선택 */
div[name *= "2"] {
    border: 3px solid red;
}

04_CSS 선택자 4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_CSS 선택자 4</title>

    <link rel="stylesheet" href="css/selector4.css" type="text/css">
</head>
<body>
    <h2>일반 구조 선택자</h2>

    <pre>
        형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자

        위치를 기준으로 구분함 (중요)

        :first-child
        :last-child
        :nth-child(수열)
        :nth-last-child(수열)
    </pre>

    <div id="test1">
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>

    <hr>

    <h2>형태 구조 선택자</h2>
    <pre>
        선택된 형제 관계 요소 중 특정 요소를 선택하는 선택자

        (선택된 요소들을 기준으로 구분)

        :first-of-type : 같이 선택된 형제들 중에서 첫번째 요소
        :last-of-type : 같이 선택된 형제들 중에서 마지막 요소
        :nth-of-type(수열) : 같이 선택된 형제들 중에서 수열번째 모든요소
        :nth-last-of-type(수열) : 같이 선택된 형제들 중에서 뒤에서 수열번째 모든요소
    </pre>

    <div id="test2">
        <pre>테스트0</pre>
        <p>테스트1</p>
        <p>테스트2</p>
        <p>테스트3</p>
        <p>테스트4</p>
        <p>테스트5</p>
        <pre>테스트6</pre>
    </div>

    <hr>

    <h2>부정 선택자 ( 선택자1:not(선택자2) )</h2>
    <pre>
        괄호 내 선택자를 제외한 나머지 요소를 선택
    </pre>

    <ul id="test3">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

</body>
</html>

selector4.css

/* 일반 구조 선택자 */

/* :first-child : 형제 관계의 요소 중 첫번째 요소 */
#test1 > p:first-child {
    background-color: red;
    color: white;
}

/* :last-child : 형제 관계의 요소 중 마지막 요소 */
/* #test1 > p:last-child로 하면 바뀌지 않음! 주의! */
#test1 > pre:last-child {
    background-color: orange;
}


/* nth-child(수열) : 
    형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
    * 순서 따질때 1부터 시작함
*/

#test1 > p:nth-child(2) {
    /* #test1의 자식 요소중 2번째 요소를 선택하고, p태그인지 검사 */
    background-color: yellow;
}

#test1 > p:nth-child(4) {
    /* #test1의 자식 요소중 4번째 요소를 선택하고, p태그인지 검사 */
    background-color: green;
}

/* 홀수 번째 형제 요소 선택 */
#test1 > p:nth-child(2n-1) {
    font-weight: bold;
    font-size: 30px;
}

/* 짝수 번째 형제 요소 선택 */
#test1 > p:nth-child(2n) {
    border: 3px solid black;
}

/* :nth-last-child(수열) : 
    형제 관계 요소 중
    뒤에서 부터 지정된 수열 번째 요소를 모두 선택
*/

#test1 > p:nth-last-child(2) {
    color: hotpink;
}

/**********************************************************/

/* 형태 구조 선택자 */

/* :first-of-type */
#test2 > p:first-of-type {
    background-color: orange;
}

/* :last-of-type */
#test2 > p:last-of-type {
    background-color: skyblue;
}

/* :nth-of-type(수열) */

/* #test2 자식 p태그 중에서 홀수번째 요소의 글자크기 30px 변경 */
#test2 > p:nth-of-type(2n-1) {
    font-size: 30px;
}

#test2 > p:nth-last-of-type(2n) {
    background-color: red;
}

/* 부정 선택자 */

/* #test3 자식 li 요소 중 3의 배수를 제외한 요소만 선택 */
#test3 > li:not(:nth-of-type(3n)) {
    background-color: pink;
}

유진

이전 포스트

[DB] 시험대비 - 23.08.27

다음 포스트

[WEB FRONT] TIL 032 - 23.08.28

02_CSS 선택자 2

selector2.css

03_CSS 선택자 3

selector3.css

04_CSS 선택자 4

selector4.css

[DB] 시험대비 - 23.08.27

[WEB FRONT] TIL 032 - 23.08.28

0개의 댓글