HTML
연습 예제
haventmetyou
2023. 10. 20. 17:30
연습 문제 1
<!DOCTYPE html>
<html>
<head>
<title>연습 1</title>
<style>
#top {
background: green;
margin: 0 auto;
height: 50px;
color: white;
font-size: 24px;
line-height: 50px;
position: relative;
}
#middle {
overflow: hidden;
}
#left {
width: 230px; height: 250px;
border: 1px solid red;
float: left;
}
.lside_1 {
font-size: 22px;
font-weight: bold;
margin: 0%;
}
.lside_2 {
font-size: 30px;
}
.lside_3 {
margin-top: 30px;
}
#right {
width: 550px; height: 255px;
border: 1px solid red;
float: right;
}
.rbox1 {
border: 1px solid blue;
position: absolute;
}
.rbox2 {
border: 1px solid blue;
position: absolute;
width: 350px ; height: 250px;
right: 10px;
}
table {
line-height: 3.5em;
}
th {font-size: 28px;}
td {
font-size: 18px;
text-decoration: underline lightgray;
position: fixed;
}
</style>
</head>
<body>
<div id="top">
<p> 기업 연혁</p>
</div>
<br>
<br>
<div id="middle">
<div id="left">
<p class="lside_1">2018 ~ 현재 <p>
<p class="lside_2">환경과 사람을<br>존중하는 기업<br>'환경 사랑'</p>
<p class="lside_3">환경 관련 우수기업<br>대통령상을 수상하다.<p>
</div>
<div id="right">
<div class="rbox1"><img src="Chocolate.jpg" width="170"></div>
<div class="rbox2">
<table>
<tr>
<th>2021</th>
<td>환경사랑 수원 전시장 오픈</td>
</tr>
<tr>
<th>2020</th>
<td>환경사랑 광주 전시장 오픈</td>
</tr>
<tr>
<th>2019</th>
<td>환경사랑 대전 전시장 오픈</td>
</tr>
<tr>
<th>2018</th>
<td>환경사랑 서울 전시장 오픈</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
연습 문제 2
아직 푸는 중...
<!DOCTYPE html>
<html>
<head>
<title>The 베이킹</title>
<style>
body {
width: 1200px; height: 700px;
position: relative;
}
img {border: 1px solid lightgray;}
#mid1 {
width: 350px; height: 350px;
position: absolute;
left: 300px;
top: 100px;
}
#mid2 {
width: 350px; height: 350px;
position: absolute;
left: 300px;
top: 350px;
}
#right {
width: 350px; height: 600px;
position: absolute;
left: 720px;
top: 100px;
}
#left {
width: 200px; height: 600px;
position: absolute;
top: 100px;
left: 10px;
}
#menu {
}
.left_top {
position: absolute;
left: 0px;
top: 60px;
}
.left_bottom {
position: absolute;
left: 0px;
bottom: 60px;
}
.right_top {
position: absolute;
right: 0px;
top: 60px;
}
.right_bottom {
position: absolute;
right: 0px;
bottom: 60px;
}
.title {
font-weight: bold;
font-size: 18px;
border-bottom: 1px solid gray;
}
.text {
position: absolute;
font-size: 15px;
}
.left_title {
position: absolute;
background-color: #30b3a6;
color: white;
width: 200px; height: 40px;
top: 10px;
left: 0px;
line-height: 10px;
font-weight: bold;
}
.left_text p {
position: absolute;
font-size: 15px;
top: 60px;
left: 5px;
}
.left_text span {
position: absolute;
left: 0px;
top: 170px;
}
</style>
</head>
<body>
<section>
<div id="mid1">
<p class="title">알림</p>
<div class="text">
<p>8월 3일 쿠킹 클래스 연기합니다. 09.30</p>
<p>8월 3일 쿠킹 클래스 연기합니다. 09.30</p>
<p>8월 3일 쿠킹 클래스 연기합니다. 09.30</p>
<p>8월 3일 쿠킹 클래스 연기합니다. 09.30</p>
<p>8월 3일 쿠킹 클래스 연기합니다. 09.30</p>
</div>
</div>
<div id="mid2">
<p class="title">자유 게시판</p>
<div class="text">
<p>안녕하세요. 반갑습니다. 09.30</p>
<p>안녕하세요. 반갑습니다. 09.30</p>
<p>안녕하세요. 반갑습니다. 09.30</p>
<p>안녕하세요. 반갑습니다. 09.30</p>
<p>안녕하세요. 반갑습니다. 09.30</p>
</div>
</div>
</section>
<aside>
<div id="right">
<p class="title">제빵 클래스</p>
<div class="left_top">
<br>
<img src="img1.png", width="160px", height="130px">
<p><b>도너트 만들기[3]</b><br>21.09.30</p>
</div>
<div class="left_bottom">
<br>
<img src="img2.jpg", width="160px", height="130px">
<p><b>도너트 만들기[3]</b><br>21.09.30</p>
</div>
<div class="right_top">
<br>
<img src="img3.jpg", width="160px", height="130px">
<p><b>도너트 만들기[3]</b><br>21.09.30</p>
</div>
<div class="right_bottom">
<br>
<img src="img4.png", width="160px", height="130px">
<p><b>도너트 만들기[3]</b><br>21.09.30</p>
</div>
</div>
<div id="left">
<div class="left_title">
<p> The 베이킹</p>
</div>
<div class="left_text">
<p>안녕하세요. 쿠키와 빵 만들기 정보를 공유하고 소통하는 공간입니다.</p>
<span><input type = 'text' size=16> <input type = 'button' value = '검색' size = 16></span>
</div>
<div class=""
</div>
</aside>
</body>
</html> 개수가... ㅎ 더 멋있게 짜고 싶은데
