![[2021/12/21]국비지원 CSS3 3-(6) 과제5 : nhn 사업영역 클론코딩](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FwG6mz%2Fbtrr5VrgHKW%2FAAAAAAAAAAAAAAAAAAAAANo0dRSZTLABRWAQNYjgBO67WQu5puz-bplTCRlLNqpi%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3DOUJ3Pkj%252F8trRKwLWnCXfJoxCNw4%253D)
수업 중 과제 5
이 날의 마지막 과제
nhn 사이트 ( N사 본사 ) 사업영역 이미지 클론 코딩
더보기
인간적으로 우리 강사 N사 미친 듯이 사랑하는 듯..?
다음카카오는 들여다본 적도 없음
사용한 css3
- padding
- margin
- font-size
- font-family
- width
- border
- text-indent
- overflow
- text-align
- border-collapse
- backgroun-color
{ text-indent : -9999px ; overflow : hidden; }
= 자리는 있는데 그 줄에서 화면 밖으로 날리는 방식으로 숨김 처리하는 법
{ border-collapse : collapse; }
= table 태그에서 기본적으로 있는 각 셀의 border 간격
(1px 정도 공간이 뜸)을 아작 내는 법
대상 이미지
작업내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>사업영역<title>
<style type="text/css">
body,div,h2,p,table,caption,thead,tr,th,td{padding: 0;margin: 0;}
body{font-size: 12px;font-family: Dotum,"돋움",sans-serif;}
#content{width: 700px;margin:20 auto;border: 2px solid red;}
#content caption{text-indent:-99999px;overflow: hidden;}
#content p.text{margin: 10px 0;}
#content p.unit{text-align: right;margin: 10px 0;}
#content table{width:100%;border-collapse: collapse;}
#content .line th{border-top: 2px solid grey;}
#content .title{text-align: left; background-color: #ccc; border-bottom: 1px solid grey;padding-left: 15px;}
#content th, #content td{border-bottom: 1px solid grey; padding: 7px 15px 7px 0;text-align: right;}
</style>
</head>
<body>
<div id="content">
<h2>사업영역</h2>
<p class="text">NHN은 안정적인 수익 모델을 발굴하고 이를 성공적으로 시장에 정착시켜 국내 최고의
수익률을 자랑하는 인터넷 기업으로 성장하고 있습니다.</p>
<p class="unit">단위 : 억원</p>
<table>
<caption>사업영역별 매출성장</caption>
<thead>
<tr class="line">
<th scope="col" class="title">사업영역</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="col">2003</th>
<th scope="col">2004</th>
<th scope="col">2005</th>
<th scope="col">2006</th>
<th scope="col">2007</th>
<th scope="col">2008</th>
<th scope="col">2009</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="title">검색</th>
<td>23</td>
<td>164</td>
<td>418</td>
<td>856</td>
<td>1,732</td>
<td>2,987</td>
<td>4,873</td>
<td>6,085</td>
<td>6,323</td>
</tr>
<tr>
<th scope="row" class="title">게임</th>
<td>130</td>
<td>337</td>
<td>767</td>
<td>870</td>
<td>921</td>
<td>1,288</td>
<td>2,429</td>
<td>3,667</td>
<td>4,467</td>
</tr>
<tr>
<th scope="row" class="title">디스플레이 광고</th>
<td>70</td>
<td>187</td>
<td>330</td>
<td>340</td>
<td>586</td>
<td>950</td>
<td>1,214</td>
<td>1,390</td>
<td>1,504</td>
</tr>
<tr>
<th scope="row" class="title">전자상거래</th>
<td>10</td>
<td>45</td>
<td>62</td>
<td>108</td>
<td>233</td>
<td>407</td>
<td>574</td>
<td>844</td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
당시 결과물 ( 내지는 답안으로 수정된 것 )
더보기
border 치라고 하니까 친 거고
색상 저 코드 쓰라고 하니까 쓴 거고
원본이랑 최대한 같게 뽑으려고
저렇게 안 했을 가능성이 오지게 높은데
아마 강사가 이거라고 보여준 답안 보고
변경했을 가능성 매우 높음
( 디테일 강박 )
안 고쳐도 됐는데.....
쯥