CSS 1-2. 선택자(sector)

(7) 위치선택자

(7)-1. 배수

ul태그에서 li가 5개 이상일 때 짝수와 홀수를 한꺼번에 선택해서 효과를 줄 수 있다.
짝수ㅣ nth-child(2n)
홀수ㅣ nth-child(2n+1)
nth-child 자체가 n번째 자식 요소에 선택자 효과를 주라는 말.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>위치선택자(배수)</title>
    <style>
ol li:nth-child(2n) {
    background-color: lightgreen;
    color: hotpink;
}
ol li:nth-child(2n+1) {
    background-color: blueviolet;
}
    </style>
</head>
<body>
    <ol>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
        <li>list</li>
    </ol>
</body>
</html>
위치선택자(배수)
  1. list
  2. list
  3. list
  4. list
  5. list
  6. list
  7. list
  8. list
  9. list
  10. list


(7)-2. 위치선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>위치선택자</title>
    <style>
        .menu {
            border: 1px solid #000;
            margin: 0 auto;
            background-color: lightsteelblue;
            width: 800px;
            overflow: hidden;
        }
        .menu li {
            list-style: none;
            padding: 20px 50px;
            float: left;
        }
        .menu li:first-child {
color: darkmagenta;
        }
        li:last-child {
            background-color: slateblue;
        }
        li:nth-child(3) {
            color: darksalmon;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ul>
</body>
</html>
위치선택자
  • menu1
  • menu2
  • menu3
  • menu4

(8) 속성 선택자 : 속성과 속성값에 대한 구분

!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>08_속성선택자</title>
    
    <style>
    /*속성선택자
        속성과 속성값에 대한 구분
    */
        input[placeholder] {
background-color: azure;
        }
          
        /*속성값 선택자*/
        input[type="password"] {
        background-color: lightgray;
        }
    </style>
    
</head>
<body>
    
    <input type="text" placeholder="아이디 입력">
    <input type="password">
    <input type="email" placeholder="이메일 입력">
    
</body>
</html>
08_속성선택자 아이디    :
비밀번호 :
E-mail    :

(9) 상태 선택자_a태그

:link__ 방문하지 않은 링크에 스타일 적용
:visited__ 방문한 링크에 스타일 적용
:hover__웹 요소에 마우스 커서를 올려놓았을 때 스타일 적용
:active__웹 요소를 활성화(클릭)했을 때 스타일 적용
CSS 작성 순서 : link > visited > hover > active

Table 구성 요소 사용 설명서:Column 동적 증가
집중 집중 과정 파트 VI: 블록, 범위 및 섀도잉

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage