728x90
과제내용
- 하단의 사진과 동일한 결과물 제작
- 각 리스트마다 css 생성
- 태그에 직접 style부여 X
결과물
리스트형.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./20230302_과제_리스트형.css">
</head>
<body>
<div>
<table>
<col style="width: 70px;">
<col style="width: 400px;">
<col style="width: 120px;">
<col style="width: 100px;">
<col style="width: 100px;">
<tr>
<th>번호</th>
<th>제목</th>
<th>첨부파일</th>
<th>작성일</th>
<th>조회수</th>
</tr>
<tr>
<td>01</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>02</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>03</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>04</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>05</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>06</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>07</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
<tr>
<td>08</td>
<td class="tatle">게시된 제목이 표출됩니다.</td>
<td><img src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fcdn-icons.flaticon.com%2Fpng%2F512%2F5521%2Fpremium%2F5521863.png%3Ftoken%3Dexp%3D1636391246%7Ehmac%3D4d6fe153e4228700f9d83386be02acd9&type=sc960_832" alt="첨부파일 이미지"></td>
<td>2011.11.11</td>
<td>00</td>
</tr>
</table>
</div>
</div>
</body>
</html>리스트형.css
.content{
}
.ground{
height: 30px;
display: flex;
}
img{
width: 30px;
height: 30px;
}
table{
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
th{
background-color: antiquewhite;
border: 1px solid;
}
td{
border: 1px solid;
}
.tatle{
text-align: left;
}이미지형.html
<!--페이지를 3개 작성
css파일을 3개 사용 (페이지가 3개이기 때문)
태그에 직접 스타일 주지말고 css파일 link로 불러와서 사용
class속성 추가하여 작업-->
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./20230302_과제_이미지형.css">
</head>
<body>
<div class="content">
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
<div class="ground">
<div class="image">
<img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버로고">
</div>
<div class="temp">
<p>네이버 로고</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>이미지형.css
.content{
width: 880px;
height: 250px;
display: flex;
flex-wrap: wrap;
}
.ground{
width: 220px;
height: 250px;
display: flex;
flex-direction: column;
text-align: center;
}
img{
width: 200px;
height: 150px;
border: 1px solid black;
}
.temp{
text-align: center;
}리스트+이미지형.html
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="./20230302_과제_이미지+리스트형.css">
</head>
<body>
<div class="content">
<table>
<col style="width: 400px;">
<col style="width: 400px;">
<col style="width: 200px;">
<tr>
<th rowspan="3" class="image"><img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버 로고"></th>
<th>THE MARKET</th>
<td class="date">2111.08.23</td>
</tr>
<tr>
<td colspan="2"><p>식품업계가 잇달아 가격 인상 계획을 철회하면서 CJ제일제당도 계획을 보류했다.
2일 식품업계에 따르면 CJ제일제당은 지난달 28일 유통업체에 이같은 내용이 담긴 공문을 전달했다.
앞서 CJ제일제당은 전날부터 편의점 판매용 고추장과 조미료 제품 출고가를 최대 11% 올릴 예정이었다.</p></td>
</tr>
<td colspan="2" class="add">자세히보기 ></td>
<tr>
<th colspan="3" class="row"> <br> </th>
</tr>
</table>
<br>
<table>
<col style="width: 400px;">
<col style="width: 400px;">
<col style="width: 200px;">
<tr>
<th rowspan="3" class="image"><img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버 로고"></th>
<th>THE MARKET</th>
<td class="date">2111.08.23</td>
</tr>
<tr>
<td colspan="2"><p>식품업계가 잇달아 가격 인상 계획을 철회하면서 CJ제일제당도 계획을 보류했다.
2일 식품업계에 따르면 CJ제일제당은 지난달 28일 유통업체에 이같은 내용이 담긴 공문을 전달했다.
앞서 CJ제일제당은 전날부터 편의점 판매용 고추장과 조미료 제품 출고가를 최대 11% 올릴 예정이었다.</p></td>
</tr>
<td colspan="2" class="add">자세히보기 ></td>
<tr>
<th colspan="3" class="row"> <br> </th>
</tr>
</table>
<br>
<table>
<col style="width: 400px;">
<col style="width: 400px;">
<col style="width: 200px;">
<tr>
<th rowspan="3" class="image"><img src="https://s.pstatic.net/static/www/mobile/edit/20230228/mobile_170043920226.png" alt="네이버 로고"></th>
<th>THE MARKET</th>
<td class="date">2111.08.23</td>
</tr>
<tr>
<td colspan="2"><p>식품업계가 잇달아 가격 인상 계획을 철회하면서 CJ제일제당도 계획을 보류했다.
2일 식품업계에 따르면 CJ제일제당은 지난달 28일 유통업체에 이같은 내용이 담긴 공문을 전달했다.
앞서 CJ제일제당은 전날부터 편의점 판매용 고추장과 조미료 제품 출고가를 최대 11% 올릴 예정이었다.</p></td>
</tr>
<td colspan="2" class="add">자세히보기 ></td>
<tr>
<th colspan="3" class="row"> <br> </th>
</tr>
</table>
</div>
</body>
</html>리스트+이미지형.css
.content{
width: 100%;
}
img{
width: 300px;
height: 200px;
border: 1px solid black;
}
.date{
opacity: 0.5;
text-align: right;
}
.add{
opacity: 0.5;
text-align: right;
}
th{
text-align: left;
}
.row{
border: 1px solid black;
border-left: none;
border-right: none;
border-top: none;
}728x90
'블록체인_9기 > 과제' 카테고리의 다른 글
| 6강_230307_과제_github 연동 (0) | 2023.03.14 |
|---|---|
| 5강_230306_과제_메가박스 영화목록 (1) | 2023.03.14 |
| 4강_230303_과제_유튜브 재생화면 제작 (0) | 2023.03.14 |
| 2강_230228_과제_입사지원서 작성 (2) | 2023.03.13 |
| 1강_230227_과제_자기소개서 작성 (0) | 2023.03.13 |
