[CSS]TIL(Today I Learned)_230828

Aspyn Choi·2023년 8월 28일
TodayILearned
0

TIL

목록 보기
26/37

☝🏻오늘 배운 것

1. css / html파일 연결하기

<link rel="stylesheet" href="css/selector2.css" type="text/css">
  • href에 들어갈 내용은 css파일 경로임

2. 기본 속성 / 자식 / 후손(자손) 반응 / 상태 / 동위 선택자

html파일

<!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 태그 : 외부에 있는 파일과 연결하는 태그-->
    <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">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>

    <ul id="parent-ul"> 부모
        <li>자식1</li>
        <li>
            <span>자식2</span>
        </li>
        
        <li>자식3</li>
        <li>
            <span>자식4</span>
        </li>
    </ul>
    
    <hr>
    
    <h3>후손(자손) 선택자( (띄어쓰기) )</h3>

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

        [작성법]
        선택자1 선택자2{ CSS 코드; }
        - 선택자1 : 부모(조상) 요소 선택자
        - 선택자1 : 후손 요소 선택자
    </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 관련 태그)의
        상태에 따라 선택되는 선택자

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

        : enabled / desabled 
        -> 요소가 사용가능/ 사용불가능한 상태일 때
    </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>

    <input type="checkbox" id="check1">
    <label for="check1"></label>

</body>
</html>

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{
    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;
}

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

/* 요소에 초점이 맞춰졌을 때(:focus) */
#focus-test:focus{
    background-color: blueviolet;
}

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

    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: 25px;
    height: 25px;

    border: 1px solid black;
    background-color: chocolate;
    
    display: block;

    cursor: pointer;

    border-radius: 20%;
}

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

#check1{
    display: none;
}

3. 문자열 속성 선택자

html파일

<!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="str2 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>

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;
}

4. 일반 구조 / 형태 구조 / 부정 선택자

html파일

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/selector4.css" type="text/css"
    <title>04_CSS 선택자 4</title>
</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>

    <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>

css파일

/* 일반 구조 선택자 */

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

/* last-child : 형제 관계 요소 중 마지막 요소 */
#test1 > pre:last-child{
    background-color : orange;
}

/* nth-child(수열) 
    : 형제 관계 요소 중 지정된 수열 번째 요소를 모두 선택
    * 순서를 따질 때 1부터 시작함(0부터 아님) 
*/
#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-size: 30px;
    font-weight: bold;
}

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


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

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

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


/* 형태 구조 선택 */

/* 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;
}

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


/* 부정 선택자 */
/* test3 자식 li요소 중 3의 배소를 제외한 요소만 선택*/
#test3 > li:not(:nth-of-type(3n)){
    background-color: pink;
}
profile
Aspyn Choi
-
이전 포스트

[HTML]TIL(Today I Learned)_230823

다음 포스트

[CSS]TIL(Today I Learned)_230829

0개의 댓글