재.키.클.래.스

<<<<<

웹프로그래밍 (2026)

>>>>>

6월 11일 - 1

mystyle.css

body {background-color: linen; color: blueviolet;}

h3 {text-align: center; color: darkred; }

연습.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>외부 스타일 시트</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <h3>소연재</h3>
    <hr>
    <p>저는 체조 선수 소연재입니다. 음악을 들으면서 책 읽기를 좋아합니다.</p>
</body>
</html>

엘비스

<!DOCTYPE html>
<html>
<head> <title><style> 속성에 스타일 만들기</title>
<style>
p {color: red; font-size: 15px; } /* 모든 p 태그에 적용 */
</style>
</head>
<body>
<h3>손 흥 민</h3>
<hr>
<p>오페라를 좋아하고</p>
<p>엘비스 프레슬리를 좋아하고</p>
<p style="color:blue">김치부침개를 좋아하고</p>
<p style="color:magenta; font-size:30px"> 축구를 좋아합니다.</p>
</body>
</html>

부모 스타일 상속

<!DOCTYPE html>
<html>
<head><title>부모 스타일 상속</title> </head>
<body>
<h3>부모 스타일 상속</h3>
<p style="color:green">자식 태그는 부모의 스타일을
<em style="font-size:25px">상속</em>받는다.
</p>
</body>
</html>

external.css

p {background: mistyrose; }

HTML파일

<!DOCTYPE html>
<html>
<head> <title>스타일 합치기 및 오버라이딩</title>
<link type="text/css" rel="stylesheet" href="external.css">
<style>
p {color: blue; font-size: 12px;}
</style>
</head>
<body>
<h3>p 태그에 중첩된 스타일</h3>
<hr>
<p>Hello students!</p>
<p style="font-size:25px">안녕하세요 교수님!</p>
</body>
</html>

6월 11일 - 1

<<<<<

웹프로그래밍 (2026)

>>>>>

어제 86 ('199')

오늘 162 ('612')

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