![[2021/12/22]국비지원 CSS3 4-(3) 과제1 : 온라인상담게시판 코딩](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbupqhv%2Fbtrr2WkayJ5%2FAAAAAAAAAAAAAAAAAAAAAKCAX6TJN0YdDZLtuGab_5WVOSWWzo9HaP4T96fWW0Ji%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DyMfl8P3xuhtJS2ElV4To6IqrWhU%253D)
수업 중 과제 1
메인에 출력되는 사이즈의 게시판 이미지를 보고 클론 코딩 하기
( 이미지를 화면으로 봤어서 원본 모델 X )
작업내용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>온라인상담게시판</title>
<style type="text/css">
body,div,h3,ul,li,p{margin: 0;padding: 0;}
ul, li{list-style: none;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;}
img{border: none;}
a:link, a:visited{text-decoration: none;color: gray;}
a:hover, a:active, a:focus{text-decoration: underline;color: green;}
#content{width: 430px;border: 1px solid red;line-height:1.5;
position:relative;margin: 0 auto;padding: 0;}
#content ul{margin: 7px 0;}
#content li{text-indent: 40px;
background: url(images/icon01.gif) no-repeat 0 50%;}
#content .Ans{background: url(images/icon02.gif) no-repeat 0 50%;}
#content p{position:absolute; right: 0;top: 0;}
#content p a{color: red;}
#content li span{position:absolute; right: 0;}
</style>
</head>
<body>
<!-- div id는 javascript에서 줄기차게 써 먹으니 당분간은 class로 무조건... -->
<div id="content">
<h3><img src="images/qna_title.gif" alt="온라인상담게시판"></h3>
<ul>
<li>
<a href="#">웹퍼블리셔 과정 꼭 이번에 배우고 싶은데 어떻게 신...</a>
<span>2021-08-13</span>
</li>
<li class="Ans">
<a href="#">안녕하세요. 문의하신 과정이...</a>
<span>2021-08-13</span>
</li>
<li>
<a href="#">사직서 낸 날 등록 가능한가여</a>
<span>2021-08-11</span>
</li>
<li class="Ans">
<a href="#">안녕하세요. 개인적으로 듣는 경..</a>
<span>2021-08-13</span>
</li>
<li>
<a href="#">과정관련 문의</a>
<span>2021-08-10</span>
</li>
</ul>
<p><a href="#" title="온라인 상담게시판 더보기">MORE ></a></p>
</div>
</body>
</html>
결과물
