Stack/HTML

[HTML] 5일 만에 끝내는 HTML 기초 2일차

7ingout 2022. 3. 15. 10:00

1. 테이블태그

테이블 태그

수업명	개강일	인원	수강료
건축설계 04-07		25명	300,000
웹 개발자 프론트	05-02	25명	360,000

그린컴퓨터 아카데미
그린컴퓨터 아카데미
그린컴퓨터 아카데미

<!DOCTYPE html>
<html lang ="ko>
	<head>
		<meta charset="utf-8" />
		<title>테이블 태그</title>
	</head>
	<body>
		<table border="1" cellpadding="10">   <!-- border은 속성, cellpadding은 글자와 셀 테두리 간의 여백 -->
			<tr>
				<th>수업명</th>
				<th>개강일</th>
				<th>인원</th>
				<th>수강료</th>
			</tr>
			<tr>
				<td colspan="2">건축설계 04-07</td>
				<td rowspan="2">25명</td>
				<td>300,000</td>
			</tr>
			<tr>
				<td>웹 개발자 프론트</td>
				<td>05-02</td>
				<!-- <td>25명</td> -->
				<td>360,000</td>
			</tr>
		</table>
		<p>
			그린컴퓨터 아카데미<br/>   <!-- br은 줄바꿈 태그 -->
			그린컴퓨터 아카데미<br/>
			그린컴퓨터 아카데미
		</p>
	</body>
</html>

2. 테이블태그 실습

if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":5292937,"name":"7ingout","title":"Hello, 7ingout world!","isDormancy":false,"nickName":"7ingout","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=https://7ingout.tistory.com/m/5","DEFAULT_URL":"https://7ingout.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"IS_SCRAPABLE":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","PHASE":"prod","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":5,"isAuthor":false,"categoryId":1030616,"categoryLabel":"Stack/HTML"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://7ingout.tistory.com", tistoryUrl: "https://7ingout.tistory.com", manageUrl: "https://7ingout.tistory.com/manage", token: "IBEw/cSyZTqSLurpNfCKR3wzaU6fzgwH1mKVEd3BNK01LoOvL8TfF5FOnhaPmLU+" }; var servicePath = ""; var blogURL = "";window.T.gnbContext = {"userId":0,"userName":"","profileSrc":"https://t1.daumcdn.net/tistory_admin/blog/admin/profile_default_03.png","storyServiceURI":{"storyHome":"https://storyhome.kakao.com/","brunchStory":"https://brunch.co.kr/","kakaoStory":"https://story.kakao.com/"},"blogs":[],"tryAutoLogin":false}; 테이블 실습

테이블 전체의 마크업

본사 부서별 연락처
부서명		전화번호(02+)	팩스번호(02+)
종합상황실		310-1300~1304	310-1300~1304
비서실	비서실장	310-1110	314-8184(사장) 312-7894(감사)
비서실	비서실	314-1112(사장) 312-1113(감사)	314-8184(사장) 312-7894(감사)
홍보실	홍보실장	310-1110	314-8184
	홍보부	314-1112
	국제협력부	314-1113

<!DOCTYPE html>
<html lang ="ko>
	<head>
		<meta charset="utf-8" />
		<title>테이블 실습</title>
	</head>
	<body>
		<h1>테이블 전체의 마크업</h1>
		<table border="1" cellpadding="3" cellspacing="0">   <!-- cellspacing은 표 테두리 굵기(셀과 셀사이 여백) -->
			<caption>본사 부서별 연락처</caption>
			<tr>
				<th colspan="2">부서명</th>   <!-- th는 텍스트를 굵게 만듦 ~ -->
				<th>전화번호(02+)</th>
				<th>팩스번호(02+)</th>
			</tr>
			<tr>
				<th colspan="2">종합상황실</th>
				<td>310-1300~1304</td>
				<td>310-1300~1304</td>
			</tr>
			<tr>
				<th rowspan="2">비서실</th>
  				<th>비서실장</td>
				<td>310-1110</td>
				<td rowspan="2">314-8184(사장)</br>312-7894(감사)</td>
			</tr>
			<tr>
				<th>비서실</th>
				<td>314-1112(사장)</br>312-1113(감사)</td>
			</tr>
			<tr>
				<th rowspan="3">홍보실</th>
				<th>홍보실장</th>
				<td>310-1110</td>
				<td rowspan="3">314-8184</td>
			</tr>
			<tr>
				<th>홍보부</th>
				<td>314-1112</td>
			</tr>
			<tr>
				<th>국제협력부</th>
				<td>314-1113</td>
			</tr>
		</table>
	</body>
</html>

3. 테이블태그 실습 2

테이블 전체의 마크업

구 군별 행정구역 현황 (인구수, 세대수)
구군별구분		계	중구	남구	동구	북구	울주군
읍면동	계	56	13	14	9	8	12
	읍	6					6
	면	6					6
	동	44	13	14	9	8
면적(㎢)		1,062.31	37.01	73.51	36.07	157.35	758.37
세대수		482,650	93,633	138,512	66,201	85,815	98,489
총인구 (주민등록+외국인)		1,139,343	215,129	318,575	157,257	220,426	227,956
주민등록	계	1,121,592	212,883	313,819	154,096	218,735	222,059
	남	576,217	107,736	160,055	80,417	113,265	114,744
	여	545,375	105,147	153,764	73,679	105,470	107,315
외국인		17,751	2,246	4,756	3,161	1,691	5,897

<!DOCTYPE html>
<html lang ="ko>
	<head>
		<meta charset="utf-8" />
		<title>테이블 실습</title>
	</head>
	<body>
		<h1>테이블 전체의 마크업</h1>
		<table border="1" cellpadding="10" cellspacing="0">   <!-- cellspacing은 표 테두리 굵기(셀과 셀사이 여백) -->
			<caption>구 군별 행정구역 현황 (인구수, 세대수)</caption>
			<tr>
				<th colspan="2">구군별구분</th>   <!-- th는 텍스트를 굵게 만듦 ~ -->
				<th>계</th>
				<th>중구</th>
				<th>남구</th>
				<th>동구</th>
				<th>북구</th>
				<th>울주군</th>
			</tr>
			<tr>
				<th rowspan="4">읍면동</th>
				<td>계</td>
				<td>56</td>
				<td>13</td>
				<td>14</td>
				<td>9</td>
				<td>8</td>
				<td>12</td>
			</tr>
			<tr>
				<th>읍</th>
				<td>6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>6</td>
			</tr>
			<tr>
				<th>면</th>
				<td>6</td>
				<td></td>
				<td></td>
				<td></td>
				<td></td>
				<td>6</td>
			</tr>
			<tr>
				<th>동</th>
				<td>44</td>
				<td>13</td>
				<td>14</td>
				<td>9</td>
				<td>8</td>
				<td></td>
			</tr>
			<tr>
				<th colspan="2">면적(㎢)</th>
				<td>1,062.31</td>
				<td>37.01</td>
				<td>73.51</td>
				<td>36.07</td>
				<td>157.35</td>
				<td>758.37</td>
			</tr>
			<tr>
				<th colspan="2">세대수</th>
				<td>482,650</td>
				<td>93,633</td>
				<td>138,512</td>
				<td>66,201</td>
				<td>85,815</td>
				<td>98,489</td>
			</tr>
			<tr>
				<th colspan="2">총인구</br>(주민등록+외국인)</th>
				<td>1,139,343</td>
				<td>215,129</td>
				<td>318,575</td>
				<td>157,257</td>
				<td>220,426</td>
				<td>227,956</td>
			</tr>
			<tr>
				<th rowspan="3">주민등록</th>
				<th>계</th>
				<td>1,121,592</td>
				<td>212,883</td>
				<td>313,819</td>
				<td>154,096</td>
				<td>218,735</td>
				<td>222,059</td>
			</tr>
			<tr>
				<th>남</th>
				<td>576,217</td>
				<td>107,736</td>
				<td>160,055</td>
				<td>80,417</td>
				<td>113,265</td>
				<td>114,744</td>
			</tr>
			<tr>
				<th>여</th>
				<td>545,375</td>
				<td>105,147</td>
				<td>153,764</td>
				<td>73,679</td>
				<td>105,470</td>
				<td>107,315</td>
			</tr>
			<tr>
				<th colspan="2">외국인</th>
				<td>17,751</td>
				<td>2,246</td>
				<td>4,756</td>
				<td>3,161</td>
				<td>1,691</td>
				<td>5,897</td>
			</tr>
		</table>
	</body>
</html>

4. 테이블태그 실습 3

제목	금액
인터랙티브 웹북	34,000
워드프레스	27,000
총합계	61,000

<table border="1" cellspacing="0" cellpadding="10" width="400">
	<thead>
		<tr>
			<td width="250">제목</td>
			<td width="150">금액</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>인터랙티브 웹북</td>
			<td>34,000</td>
		</tr>
		<tr>
			<td>워드프레스</td>
			<td>27,000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>총합계</td>
			<td>61,000</td>
		</tr>
	</tfoot>
</table>

<thead>

<html><body><head><meta><title>
<table><tr><td><th><tbody><thead><tfoot>
<li><ol><ul><h1>~<h6>
<em><strong><mark><ins><del><sub><sup>
<small>

태그, 속성, 요소
자식요소, 부모요소, 형제요소, 상위요소, 하위요소

<p> 
<span> <div> 
<span>은 인라인요소 그룹핑
<div>은 블럭요소 그룹핑
인라인요소, 블럭요소

6. p, div, span태그

나는 p태그 입니다.

strong태그입니다. em태그입니다.

그린컴퓨터아카데미

<!-- <style>
	span { color: green; font-size: 28px; }   컨텐츠에서 일부분을 묶고 싶을 때 span 사용
</style> -->
<p>나는 p태그 입니다.</p>
<p>나는 p태그 입니다.</p>
<p>나는 p태그 입니다.</p>
<div>
	<strong>strong태그입니다.</strong>
	<em>em태그입니다.</em>
</div>
<p><span>그린컴퓨터</span>아카데미</p>

<div>는 내용만큼 크기가 늘어남 -> 컨텐츠의 너비만큼 공간을 가짐

* css 코드 (style)을 html 블럭에 넣으니 블로그 게시물 자체의 스타일도 바뀌어버림 ;

~~아마 dtd선언 & 헤드 부분 안넣고 html 삽입해서 그런 듯 !~~

7. div태그 실습

div태그

Web Cafe - Coffee

Coffee 원두

자메이카 블루마운틴(jameica blue mountain)

자메이카의 블루 산맥에서 재배되는 커피의 명칭이다. 블루 마운틴은 쓴 맛이 덜하고 향이 부드러운 커피로 신맛과 단맛이 완벽하게 조화를 이룬 커피로 평가 받는다.

케냐 커피(kenya)

아프리카 최고의 커피 생산국에서 생산되는 케냐 커피는 와인향 또는 꽃향기가 나는 것으로 유명하며, 과일의 상큼한 신맛과 품위 있는 산미, 중후하면서도 상큼한 맛이 매력적인 커피이다.

Blending Coffee

아메리카노(americano)

커피 원액에 물을 희석시킨 커피로 에스프레소의 진하고 쓴맛을 부드럽고 가볍게 만든 음료

카페라떼(caffe latte)

커피원액에 우유를 듬뿍 넣은 부드러운 커피

카푸치노(cappuccino)

커피 원액에 우유와 우유 거품을 넣은 커피로 라떼보다는 다소 진한 맛, 우유의 거품을 풍부하게 느낄 수 있는 커피

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8"/>
		<title>div태그</title>
	</head>
	<body>
		<div id="wrap">
			<h1>Web Cafe - Coffee</h1>
			<div id="origin">
				<h2>Coffee 원두</h2>
				<h3>자메이카 블루마운틴(jameica blue mountain)</h3>
				<p>자메이카의 블루 산맥에서 재배되는 커피의 명칭이다. 블루 마운틴은 쓴 맛이 덜하고 
				향이 부드러운 커피로 신맛과 단맛이 완벽하게 조화를 이룬 커피로 평가 받는다.</p>
				<h3>케냐 커피(kenya)</h3>
				<p>아프리카 최고의 커피 생산국에서 생산되는 케냐 커피는 와인향
				 또는 꽃향기가 나는 것으로 유명하며, 과일의 상큼한 신맛과 품위 있는 산미, 
				중후하면서도 상큼한 맛이 매력적인 커피이다. </p>
			</div>
			<div id="blending">
				<h2>Blending Coffee</h2>
				<h3>아메리카노(americano)</h3>
				<p>커피 원액에 물을 희석시킨 커피로 에스프레소의 
				진하고 쓴맛을 부드럽고 가볍게 만든 음료</p>
				<h3>카페라떼(caffe latte)</h3>
				<p>커피원액에 우유를 듬뿍 넣은 부드러운 커피</p>
				<h3>카푸치노(cappuccino)</h3>
				<p>커피 원액에 우유와 우유 거품을 넣은 커피로 라떼보다는 다소 진한 맛, 
				우유의 거품을 풍부하게 느낄 수 있는 커피</p>
			</div>	
		</div>
	</body>
</html>

8. img태그 실습

<!-- img 태그: 빈요소

<img src="이미지경로" />

상대경로
절대경로 -->

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8"/>
</head>
<body>
<img src="../img/dog.jpg" alt="말티즈 강아지" title="아련한 표정의 멍멍이"/>   
<!-- 상대경로, alt는 이미지가 안 나타날시 대체할 수 있는 텍스트 -->
</body>

현재 폴더 주소창에서 cmd 치면 그 위치로 실행

./ 현재 내 파일의 위치

../ 얘는 한 단계 앞 위치

9. 인코딩 방식 잘 체크하기 !

인코딩 ANSI -> <meta charset="euc-kr"/>

인코딩 UTF-8 -> <meta charset="utf-8"/>