웹프로그래밍/실습
CSS) 클래스 선택자, 마우스 선택자, 미디어 질의
by LaTale
2016. 10. 12.
실습문제 1) 다음 화면과 같이 출력되는 HTML 문서를 작성하시오. 클래스 선택자를 이용하여 스타일을 정의한다. 제목은 빨간색, 저자명은 남색, 배경색은 하늘색, 글자색은 파란색의 이탤릭체로 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <HTML>
<HEAD>
<TITLE> 클래스 스타일 만들기 </TITLE>
<style type="text/css">
p{text-align:center;}
p.title{color:red;font-size:40;}
.author{color:#0000FF;text-align:right;font-size:25;}
.italic{background:#33CCCC;color:#0033FF;font-style:italic;font-size:20;}
</style>
</HEAD>
<BODY>
<p class="title">꿈이라면</p>
<p class="author">한용운</p>
<p class="italic">
<br>사랑의 속박이 꿈이라면<br><br>
출세의 해탈도 꿈입니다<br><br>
웃음과 눈물이 꿈이라면<br><br>
무심(無心)의 광명도 꿈입니다<br><br>
일체만법(一切萬法)이 꿈이라면<br><br>
사랑의 꿈에서 불멸을 얻겠습니다<br><br>
</p>
</BODY>
</HTML>
|
(색은 좀 다를 수 있음)
실습문제 2) 다음은 미디어 질의를 이용하여 작성한 문서이다. 화면이 500px 이상으로 늘어나면 오른쪽 화면과 같이 변하게 작성하시오.
화면이 500px 미만 : 제목-오렌지색, 지은이-초록색 내용-보라색
화면이 500px 이상 : 제목-빨간색, 지은이-남색 내용-파란색, 이탤릭체, 배경색 노란색
[#M_|접기|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | <HTML>
<HEAD>
<TITLE> 미디어 질의 </TITLE>
<style type="text/css">
h1{color:orange; text-align:center;}
h2{color:green; text-align:right;}
h3{color:violet; text-align:center;}
</style>
<link rel="stylesheet" type="text/css" href="06_2.max.css" media="screen and (min-width:500px)">
</HEAD>
<BODY>
<h1 class="maxtitle"> 엄마야 누나야 </p>
<h2 class="maxauthor"> 김소월 </p>
<h3 class="maxtxt">
엄마야 누나야 강변 살자<br>
풀에틑 반짝이는 금모래 빛<br>
뒷문 밖에는 갈잎의 노래<br>
엄마야 누나야 강변 살자<br>
</p>
</BODY>
</HTML>
|
1
2
3 | h1.maxtitle{color:red;}
h2.maxauthor{color:navy;}
h3.maxtxt{color:blue;background:yellow;font-style:italic;} |
_M#]
실습문제 3) 실행결과가 다음 화면과 같은 HTML 문서를 작성하시오. 마우스 관련 선택자를 색깔 포함, 자유롭게 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 | <html>
<head>
<title>마우스 관련 선택자</title>
<style type ="text/css">
a:link {background-color : red;}
a:visited {background-color : red;}
a:active {background-color : green;}
div {position : absolute; background-color : red;}
div:hover {background-color : skyblue;}
div:active {background-color : blue;}
</style>
</head>
<body>
<div>
<br>
<b>여기를 누르면
<a href="http://www.w3.org/" target="_blank">w3c</a>
로 연결됩니다.
</b><br><br>
<b>여기를 누르면
<a href="http://www.wikipedia.org/" target="_blank">위키디피아</a>
로 연결됩니다.
</b><br><br>
<b>여기를 누르면
<a href="http://www.w3schools.com/" target="_blank">w3school</a>
로 연결됩니다.
</b><br><br>
</div>
</body>
</html> |
딱히 어려운 점은 없었음.
06_1.html
06_2.max.css
