1. 테이블태그

테이블 태그
수업명 개강일 인원 수강료
건축설계 04-07 25명 300,000
웹 개발자 프론트 05-02 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/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: "k4kGHBezofTAQzMPWtACbjwEWBrRockax6lTrcwqGx9HTr6sVrs0YkoAs9XYqgWn" }; var servicePath = ""; var blogURL = ""; 테이블 실습

테이블 전체의 마크업

본사 부서별 연락처
부서명 전화번호(02+) 팩스번호(02+)
종합상황실 310-1300~1304 310-1300~1304
비서실 비서실장 310-1110 314-8184(사장)
312-7894(감사)
비서실 314-1112(사장)
312-1113(감사)
홍보실 홍보실장 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

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/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: "k4kGHBezofTAQzMPWtACbjwEWBrRockax6lTrcwqGx9HTr6sVrs0YkoAs9XYqgWn" }; var servicePath = ""; var blogURL = ""; 테이블 실습

테이블 전체의 마크업

구 군별 행정구역 현황 (인구수, 세대수)
구군별구분 계 중구 남구 동구 북구 울주군
읍면동 계 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>

 

 

 

 

5.

<thead>

<tbody>
<tfoot>
<!-- 테이블태그에서 내용 컨텐츠들을 하나의 그룹으로 묶을 때 사용하는 태그 -->

 

<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태그 입니다.

나는 p태그 입니다.

나는 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"/>

'Stack > HTML' 카테고리의 다른 글

[HTML] index / list / text / table / image / video 태그  (0) 2022.04.04
[HTML] 5일 만에 끝내는 HTML 기초 5일차  (0) 2022.03.18
[HTML] 5일 만에 끝내는 HTML 기초 4일차  (0) 2022.03.17
[HTML] 5일 만에 끝내는 HTML 기초 3일차  (0) 2022.03.16
[HTML] 5일 만에 끝내는 HTML 기초 1일차  (0) 2022.03.14

티스토리툴바