728x90
1.다음 HTML코드에 태그 이름 셀렉터로 스타일 시트를 삽입하여 브라우저 출력과 같게 하라.
(1)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>태그 셀렉터 만들기</title>
<style>
body{
background: bisque;
}
h3{
color: blue;
text-align: right;
}
p{
color: plum;
}
span{
color: blue;
background: lightblue;
}
</style>
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. <span>음악</span>을 들으면서 책읽기를 좋아합니다. <span>김치찌개</span>와 <span>막국수</span> 무척 좋아합니다.
</p>
</body>
</html>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>태그 셀렉터 만들기</title>
<link href="practice4-1.css" type="text/css" rel="stylesheet">
</head>
<body>
<h3>소연재</h3>
<hr>
<p>저는 체조 선수 소연재입니다. <span>음악</span>을 들으면서 책읽기를 좋아합니다. <span>김치찌개</span>와 <span>막국수</span> 무척 좋아합니다.
</p>
</body>
</html>css파일
body{
background: bisque;
}
h3{
color: blue;
text-align: right;
}
p{
color: plum;
}
span{
color: blue;
background: lightblue;
}
2.다음 HTML 소스에 태그 이름 셀렉터로 스타일 시트를 삽입하여 브라우저 출력과 같게 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 꾸미기</title>
<style>
p{
background: aliceblue;
color: brown;
font-family: "Lucida Console";
}
span{
text-decoration: underline;
font-size: 150%;
}
</style>
</head>
<body>
<h3>텍스트와 폰트</h3>
<hr>
<p>AliceBlue 바탕색에 Brown 색의 "Lucida Console" 폰트로 10px 크기이고 <span>저는 이보다 1.5배 큽니다.</span>
</p>
</body>
</html>
3.다음과 같이 색 이름, 색 코드, 색을 보여주는 테이블을 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>색 테이블 만들기</title>
<style>
table{
border: 1px solid black;
}
td, th{
border: 1px solid black;
width: 60px;
}
</style>
</head>
<body>
<h3>색 이름과 코드</h3>
<hr>
<table>
<tr>
<th>이름</th><th>코드</th><th>색</th><th>이름</th><th>코드</th><th>색</th>
</tr>
<tr>
<td>Brown</td><td>#A52A2A</td><td style="background-color: brown"></td><td>DeepSkyBlue</td><td>#00BFFF</td><td style="background-color: deepskyblue"></td>
</tr>
<tr>
<td>Blueviolet</td><td>#8A2BE2</td><td style="background-color: blueviolet;"></td><td>Gold</td><td>#FFD700</td><td style="background-color: gold"></td>
</tr>
<tr>
<td>DarkOrange</td><td>#FF8C00</td><td style="background-color: darkorange"></td><td>OliveDrab</td><td>#6B8E23</td><td style="background-color: olivedrab;"></td>
</tr>
</table>
</body>
</html>
5.HTML태그를 수정하지 말고 셀렉터와 스타일 시트를 삽입하여 다음과 같이 출력되게 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>셀렉터</title>
<style>
body{
background: aliceblue;
}
h3{
color: darkgreen;
}
#center{
text-align: center;
color: darkblue;
}
div.indent{
text-indent: 3em;
}
</style>
</head>
<body class="main">
<h3>얼굴</h3>
<hr>
<div id="center"><strong style="background: yellow;">박인희</strong></div>
<div class="indent">
<p><em style="color: green">길</em>을 걷고 산들 무엇하리
<strong style="color:red">꽃</strong >이 내가 아니듯 내가
<strong style="color:red">꽃</strong>이 될 수 없는 지금...</p>
</div>
</body>
</html>
6.아래와 같이 밑줄이 없는 초록색 링크를 만들고 마우스가 올라가면 밑줄과 더불어 violet색으로 바뀌도록 HTML테이블을 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>링크 꾸미기</title>
<style>
a{
text-decoration: none;
color: darkgreen;
}
a:hover{
color: violet;
}
</style>
</head>
<body>
<h3>링크 꾸미기</h3>
초록색에 밑줄 없는 링크. 마우스 올리면 밑줄과 violet색으로 변경
<hr>
<ul>
<li><a href="https://www.naver.com">네이버 사이트</a></li>
<li><a href="https://www.google.co.kr">구글 사이트</a></li>
</ul>
</body>
</html>
7.<div>태그를 이용하여 카드의 뒷면을 출력하고, 마우스를 올리면 카드의 앞면이 보이게 HTML페이지를 작성하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:hover활용</title>
<style>
div.front{
background-image: url('media/spade-2.png');
background-size: 120px 200px;
width: 120px;
height: 200px;
}
div.front:hover{
background-image: url('media/spade-7.png');
background-size: 120px 200px;
width: 120px;
height: 200px;
}
</style>
</head>
<body>
<h3>:hover활용</h3>
<hr>
<table>
<td>이미지를 올리면 카드의 앞면이 보인다.</td>
<td><div class="front"></div></td>
</table>
</body>
</html>
8.<img>태그로 이미지를 출력하고, 액자 모양의 이미지 테두리를 만들어라. 테두리의 두께는 15px, 패딩은 5px로 하여 테두리와 이미지 사이에 공간이 있게 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 테두리 만들기</title>
<style>
img{
border: 15px solid;
padding: 5px;
}
img#imageborder{
border-image: url('media/border.png') 30 round;
}
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
<img id="imageborder" src="media/spongebob.png">
</body>
</html>
9.다음 페이지를 작성하라. Most Visited Pages 텍스트를 text-shadow로 꾸미고, 이미지에 마우스를 올리면 box-shadow를 이용하여 박스에 그림자가 보이도록 하라.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow와 box-shadow</title>
<style>
h2{
text-align: center;
color: yellow;
text-shadow: 2px 2px 2px black
}
img:hover{
box-shadow: 0px 0px 5px darkblue;
}
</style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table align="center">
<td><a href="https://www.google.com" target="_blank"><img src="media/google.png"></a></td>
</table>
</body>
</html>728x90
'HTML+CSS+JavaScript' 카테고리의 다른 글
| [HTML5+CSS3+Javascript 웹프로그래밍]7장 연습문제 (0) | 2021.10.15 |
|---|---|
| [HTML5+CSS3+Javascript 웹프로그래밍]3장 실습문제 (0) | 2021.10.15 |
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 OpenChallenge (0) | 2021.10.11 |
| [HTML5+CSS3+Javascript 웹프로그래밍]6장 실습문제 (0) | 2021.10.10 |
| [HTML5+CSS3+Javascript 웹프로그래밍]5장 OpenChallenge (0) | 2021.10.10 |