2024-10-10  DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>                /* 홀수 선택자 */        ul li:nth-of-type(odd) {            color: gray;        }        /* 짝수 선택자 */        ul li:nth-of-type(even) {            color: tomato;        }    style>head>body>                ul> ..

2024-10-10 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        ul li:first-child{            color: blue;        }                ul li:last-child{            color: red;        }            style>    head>body>            ul>        li>item1li>        li>item2li>        li>it..

2024-10-10 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        /* 2의 배수(짝수)에 스타일 적용 */        ul li:nth-of-type(2n) {            color: blueviolet;        }        ul li:nth-of-type(2n+1) {            color: yellow;        }                   style>head>body>        ul>       ..

2024-10-10 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        /* 순서 선택자 : nth-of-type(순서) */                ul li:nth-of-type(1) {            color: #ff8000;        }        ul li:nth-of-type(2) {            color: #66f;        }        ul li:nth-of-type(4) {            color..

2024-10-10 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        /* 그룹 선택자 */        h1, h2, h3 {            color: #00f;        }            style>head>body>        h1>제목1h1>    h2>제목2h2>    h3>제목3h3>body>html>

2024-10-10  DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>    style>        ul li {  /* 자식을 포함한 자손 */            color: blue;        }        ul > li {  /* 자식을 의미 */            color: red;        }    style>head>body>        h3>음료 메뉴h3>    ul>        li>콜라li>        li>사이다li>        li>환타..