재.키.클.래.스

<<<<<

웹프로그래밍 (2026)

>>>>>

6월 11일 - 2

셀렉터

<!DOCTYPE html>
<html>
<head><title>셀렉터 만들기</title> </head>
<body>
<h3>Web Programming</h3>
<hr>
<div>
<div>2학기 <strong>학습 내용</strong></div>
<ul>
<li>HTML5</li>
<li><strong>CSS</strong></li>
<li>JAVASCRIPT</li>
</ul>
<div>60점 이하는 F!</div>
</div>
</body>
</html>

스타일 추가 : head 태그 사이에 추가

<style>
.warning {color:red;}
body.main {background:aliceblue;}
</style>

셀렉터 만들기


    <style>
        h3, li {/* 태그 이름 셀렉터 */
            color: brown;
        }
        div > div > strong {/* 자식 셀렉터 */
            background: yellow;
        } 
        ul strong {/* 자손 셀렉터 */
            color: dodgerblue;
        }
        .warning {/* class 셀렉터 */
            color: red;
        }
        body.main {/* class 셀렉터*/
            background: aliceblue;
        }
        #list {/* id 셀렉터 */
            background: mistyrose;
        }
        #list span{/* 자손 셀렉터 */
            color: forestgreen;
        }
        h3:first-letter {/* 가상 클래스 셀렉터 */
            color: red;
        }
        li:hover {/* 가상 클래스 셀렉터 */
            background: yellowgreen;
        }
    </style>

6월 11일 - 2

<<<<<

웹프로그래밍 (2026)

>>>>>

어제 86 ('199')

오늘 162 ('612')

전체 114,895 ('485,330')