'쌍용강북교육센터' 태그의 글 목록 (2 Page)

인터넷에 존재하는 이력서 폼을 똑같이 HTML로 만들기

나는 아래 이력서 양식과 똑같이 만드려고 한다.

http://www.sampledocu.com/resume/408

워드 상세 이력서 양식 (호적관계포함) - DOC

서식 확장자 안내 DOC : MS오피스 워드문서 프로그램 또는 MS워드뷰어 / 네이버 구글 오피스 문서 편집기 서식 이용안내 기본인적사항과 학력사항,경력사항,가족관계,자격증을 입력할수 있는 워드

sampledocu.com

숙제 제출 코드 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* {
	margin: 0; padding: 0;
}

body {
	font-size: 12px;
	font-family: "맑은 고딕", 나눔고딕, 돋움, sans-serif;
}

.resume {
	margin: 20px auto;
	width: 600px;
}

.title {
	padding: 10px;
	text-align: center;
	padding-bottom: 0;
}

.table {
	margin: 0px auto;
}

.info .td, .info .tr {
	text-align: center;
}

.contents {
	text-align: left;
	padding: 10px 0px;
}

.name, .gender, .age {
	width: 80px;
	text-align: center;
	background: #ccc;
}
</style>

</head>
<body>

<div class="resume" >
	<h2 class="title">이&nbsp;&nbsp;력&nbsp;&nbsp;서</h2>
	<table style="width: 200px; border-top: 2px solid #000; margin: 5px auto;">
		<tr >
			<td></td>
		</tr>
	</table>
	
	<table class="info" style="width: 115px; height: 140px; border: 2px solid #000; float: left;">
		<caption class="contents"><b>1.기본정보</b></caption>
			<tr>
				<td align="center">&lt;사진&gt;</td>
			<tr>
	</table>
	<table border="2" style="border-collapse: collapse; height: 170px; width: 480px; float: right;">
	<caption class="contents">　</caption>
		<tr>
			<td class="name">성 명</td>
			<td></td>
			<td class="gender">성 별</td>
			<td style="width: 50px;"></td>
			<td class="age">나 이</td>
			<td style="width: 50px;"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">주민등록번호</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style=" height:40px; width: 80px; text-align: center; background: #ccc;">주소</td>
			<td colspan="5" valign="bottom">(우편번호:　　　　　)</td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">전화번호</td>
			<td></td>
			<td style="	width: 80px; text-align: center; background: #ccc;">휴대폰</td>
			<td colspan="3"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">홈페이지주소</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">이메일</td>
			<td colspan="5"></td>
		</tr>
		<tr>
			<td style="	width: 80px; text-align: center; background: #ccc;">호주성명</td>
			<td></td>
			<td style="	width: 80px; text-align: center; background: #ccc;">호주와의 관계</td>
			<td colspan="4"></td>
		</tr>
	</table>
	
	<table border="2" style="margin-top: 5px; border-collapse:collapse; float: right; width: 120px;">
		<tr>
			<td style=" height: 21px; text-align: center; background: #ccc;">호적관계</td>
		</tr>
	</table>

	<table border="2" style="width: 600px; height: 100px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>2.학력사항</b></caption>
		<tr>
			<td style="text-align: center; background: #ccc;">년/월/일</td>
			<td style="width: 350px; text-align: center; background: #ccc;">학 교 명</td>
			<td style="text-align: center; background: #ccc;">전공과목 및 학과</td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>	
	</table>
	<table border="2" style="width: 600px; height: 80px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>3.경력사항</b></caption>
		<tr>
			<td style="width: 125px;text-align: center; background: #ccc;">회사명</td>
			<td style="width: 350px;text-align: center; background: #ccc;">직위 및 업무내용</td>
			<td style="text-align: center; background: #ccc;">업무기간</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
	</table>
		<table border="2" style="width: 600px; height: 130px;clear: both; border-collapse: collapse;">
	<caption class="contents"><b>4.자격증</b></caption>
		<tr>
			<td style="width: 125px;text-align: center; background: #ccc;">취득년월일</td>
			<td style="width: 350px;text-align: center; background: #ccc;">자 격 증</td>
			<td style="text-align: center; background: #ccc;">발령청</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<table border="2" style="width: 600px; height: 120px; clear: both; border-collapse: collapse;">
	<caption class="contents"><b>5.가족관계</b></caption>
		<tr>
			<td style="width: 100px;text-align: center; background: #ccc;">성 명</td>
			<td style="width: 80px;text-align: center; background: #ccc;">관 계</td>
			<td style="text-align: center; background: #ccc;">생년월일</td>
			<td style="width: 80px;text-align: center; background: #ccc;">동거여부</td>
			<td style="width: 100px;text-align: center; background: #ccc;">기타</td>
		</tr>
		<tr> 
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>			
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td>　</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

</body>
</html>

잘 나오기는 하는데 코드에 잘못된 부분이 있는지 자꾸 느낌표가 떠있다.

뭐가 잘못된건지 모르겠다 짜증 ㅠㅠ

위랑 같게 해도 느낌표가 자꾸 나오고 화딱지난당

Style을 head 에 태그나 class명으로 주고 싶은데 잘 안돼서 자꾸 인라인으로 style을 주게된다ㅠㅠ..

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0916~0917_CSS : Cascading Style Sheets(CSS) (0)	2021.09.22
0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0)	2021.09.15
0913_HTML : 레이아웃 관련 태그(2) div 태그 (0)	2021.09.14
0913_HTML : 레이아웃 관련 태그 (1) (1)	2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그 (0)	2021.09.14

<style> ~ </style>

- 스타일 정보 태그(Style Information)로 HTML문서 내에 스타일 시트를 선언하는 데 사용

<div> ~ </div>

- 블럭 태그(Division)

- <div> 요소는 그 자체로 어떤 의미를 갖지는 않으며, 몇가지 요소를 한 덩어리로 묶어서 스타일을 주거나 스크립트를 연결하는데 사용

- <div> 태그는 블럭 레벨 태그로 줄 바꿈이 일어난다.

ex10 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>div 태그</h3>
<div>
<p> 대표적인 블록태그</p>
<p> 요소들을 묶어서 처리할 때 사용 </p>
</div>
<hr>

<div style="background: red">A</div>
<!--  내용이 없거나 height가 없으면 표시되지 않는다. -->
<div></div>
<div style="background: green">B</div>
<div style="background: blue">C</div>
<hr>

<div style="border: 1px solid red;">A</div>
<!-- 내용이 없거나 height가 없으면 선은 위(top) 한선만 나온다. -->
<div style="border: 1px solid greed;"></div>
<div style="border: 1px solid black;">B</div>
<div style="border: 1px solid blue;">C</div>
<hr>

<!-- padding : 안쪽 여백 -->
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 20px;">padding-안쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 5px 10px 5px;">위 오른쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px 10px">위 오른쪽/왼쪽 아래 왼쪽여백</div>
<div style="border: 1px solid red; width: 200px; height: 50px; padding: 10px 15px;">위/아래 오른쪽/왼쪽 여백</div>>
<hr>

<!-- margin: 바깥쪽 여백 -->
<div style="background: red; width: 200px; height: 50px;"></div>
<div style="background: blue; width: 200px; height: 50px; margin: 20px;"></div>
<div style="background: green; width: 200px; height: 50px;"></div>
<!-- 위아래는 여백이 20이고, 왼쪽 오른쪽은 auto이므로 수평 가운데 정렬 -->
<div style="background: blue; width: 200px; height: 50px; margin: 20px auto;"></div>
<hr>

</body>

ex11 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
* { /* 모든 태그 */
	margin: 0;
	padding: 0;
}

</style>

</head>
<body>

<h3>div 태그</h3>

<!-- border, margin, padding도 기본적으로 width, height에 포함된다. -->
<div style="background: yellow; width: 300px; height: 118px;">
	<div style="border: 3px solid green; height: 30px;">A</div>
	<div style="border: 3px solid red; margin: 5px; width: 284px; height: 30px;">B</div>
	<div style="border: 3px solid #333; height: 30px">C</div>
</div>
<hr>

<p>
  다음 div의 width는 270px이고 height는 170px이다.
</p>
<div style="width:200px; height: 100px; margin: 10px; padding: 20px; border: 5px solid #ccc;"></div>




</body>
</html>

ex12 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
	margin: 0; padding: 0;
}

h3 {
	margin: 20px auto;
}
</style>
</head>
<body>

<h3>div 예제</h3>

<p>
  style - float 속성 : 해당 요소를 감싸고 있는 컨테이너의 왼쪽이나 오른쪽에 배치하도록 설정<br>
  style - clear 속성 : 설정된 float 속성을 해제
</p>

<div style="border: 3px solid blue; width: 399px; height: 50px;">
	<div style="width: 200px; background: yellow; float: left;">A</div>
	<div style="width: 100px; background: red; float: left;">B</div>
	<div style="width: 50px; background: green; float: right;">C</div>
	<div style="width: 50px; background: tomato; float: right;">D</div>
</div>
<hr>

<div>
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="background: black; height: 30px; width: 200px; clear: both;"></div>
<!-- 위에 있던 float 속성을 없앰 -->


<div>
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>
<div style="clear: both"></div>

<div style="margin: 30px auto; width: 200px;">
	<div style="background: red; height: 30px; width: 100px; float: left;"></div>
	<div style="background: green; height: 30px; width: 100px; float: left;"></div>
</div>

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0915_HTML : table, ul li 사용한 회원가입 폼 만들기 숙제 (0)	2021.09.15
0914_HTML : table 태그 사용 이력서 만들기 숙제 (2)	2021.09.14
0913_HTML : 레이아웃 관련 태그 (1) (1)	2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그 (0)	2021.09.14
0913_HTML: 기본 태그(4) 공통속성 (0)	2021.09.14

CSS 지정 형식

inline Style

- inline Style 은 HTML tag 속에 style 속성을 사용하여 직접 지정한다.

예 : <div style="color=red;">HTML</div>

embedded style sheet 방식

- 스타일 시트의 기본적인 사용 방법으로 html의 <head> ~ </head>사이에 삽입한다.

ex08 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
/* embedded style sheet */

/* 태그 선택자 우선순위 3*/
div {
	color: blue; 
	font-weight: bold;
}

/* id 선택자 우선순위 1 [가장 높은 우선순위는 inline]*/
#java { background: yellow; }

/* class 선택자 우선순위 2*/
.web { color: tomato; }

</style>
</head>
<body>

<h3>간단한 css 예</h3>

<div>과목-프로그래밍</div>
<p id="java">자바</p>
<p style="font-size: 20px;">스프링</p>
<hr>

<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>
<hr>

</body>
</html>

linked style sheet 방식

- <head> ~ </head> 사이에 link element 를 사용하여 css file(확장자가 .css인 파일)을 연결 시켜서 사용하는 방식이다.

- 형식 : <link rel="stylesheet" href="파일명" type="text/css">

ex09 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- 외부 css 파일을 포함시키기 -->
<link rel="stylesheet" href="test.css" type="text/css">

</head>
<body>

<h3>css - linked style sheet</h3>

<div>과목-프로그래밍</div>
<p>자바</p>
<p>스프링</p>
<p>C/C++</p>
<hr>

<div>과목-웹프로그래밍</div>
<p class="web">HTML</p>
<p class="web">CSS</p>
<p class="web">Javascript</p>


</body>
</html>

@charset "UTF-8";

/* 외부 css 파일 */

div {
	font-size: 17px;
	font-weight: 700;
}

.web {
	color: tomato;
}

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0914_HTML : table 태그 사용 이력서 만들기 숙제 (2)	2021.09.14
0913_HTML : 레이아웃 관련 태그(2) div 태그 (0)	2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그 (0)	2021.09.14
0913_HTML: 기본 태그(4) 공통속성 (0)	2021.09.14
0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1)	2021.09.14

<b> ~ </b>

- 글자 강조 태그(Bold), 볼드체(굵은 글씨체)

- 키워드, 리뷰에서의 상품명, 기타 보통 볼드체로 표현하는 텍스트에 사용

<em> ~ </em>

- 텍스트 강조 태그(Emphasis). 주관적인 강조를 나타낼 뿐, 중요성을 나타내지는 않는다.

- 강조체(이탤릭체). i 태그와 동일하게 출력

<i> ~ </i>

- 이탤릭체 태그

- 다른 언어에서 널리 쓰이는 숙어의 인용, 생각, 꿈, 분류학 명칭, 기타 보통 이탤릭체로 표현하는 텍스트에 사용

<dfn> ~ </dfn>

- 용어 정의 태그(Defining Instance of aTerm)

- 웹 페이지 내의 용어, 단어 등의 정의할 때 사용(이탤릭체로 표시)

<pre> ~ </pre>

- 서식 설정 텍스트 태그 (Preformatted Text)

- 서식이 설정된 텍스트를 표시하는 데 사용

- <pre> 태그는 텍스트 박스에 입력된 그대로 상태를 웹 페이지 상에 보여주는 태그. 예를 들면 공백, 탭(Tab), 엔터키 등을 그대로 화면상에 표현할 수 있다.

<sub> ~ </sub>

- 첨자 텍스트 태그 (Subscript)

- 아래 첨자

<sup> ~ </sup>

- 슈퍼 스크립트 태그 (SuperScript)

- 위 첨자

<s> ~ </s>

- 텍스트 가운데 선 정의 태그(Strikethrough)

- 문자의 가운데에 선을 넣어 준다. HTML5에서는 지원하지 않음

<u> ~ </u>

- 밑줄 태그(Underline). HTML 5 에서는 지원하지 않음

<cite> ~ </cite>

- 인용 태그(Citation)

- 제목(책, 노래, 영화, TV 쇼, 그림, 조각 등 제목)을 나타낼 때 사용

<code> ~ </code>

- 코드 예제 태그(Code Listing)

- 컴퓨터와 관련된 모든 코드 마크업 하는 코드, XML 속성이름, 파일이름 등 표시하기 위해 사용

ex07 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>formatting 관련 태그</h3>

<p>b : 글자 <b>강조</b> 태그</p>
<p>em : 텍스트 <em>강조</em>. 이탤릭체. i 태그와 동일</p>
<p>i : <i>이텔릭체</i> 태그</p>
<hr>

<p> pre : 문서 서식 설정 텍스트 태그. 공백, 탭, 엔터등을 화면상에 표현할 수 있다.</p>
<pre>
	자바
	스프링
	HTML CSS		Javascript
</pre>
<hr>

<p> sub : 아래첨자, sup : 위첨자</p>
<p> log<sub>2</sub>x<sup>10</sup></p>
<hr>

<p> code : 코드 예제 태그. 마크업 하는 코드, XML 속성이름, 파일명 등을 표시 </p>
<code>sample.html</code>

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0913_HTML : 레이아웃 관련 태그(2) div 태그 (0)	2021.09.14
0913_HTML : 레이아웃 관련 태그 (1) (1)	2021.09.14
0913_HTML: 기본 태그(4) 공통속성 (0)	2021.09.14
0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1)	2021.09.14
0913_HTML : 기본 태그 (2) (1)	2021.09.14

공통적으로 사용하는 속성(Global Attributes)

- accesskey : 문서의 요소에 단축키 설정

- class : 문서의 요소를 식별. 스타일시트 선택자(CSS의 셀렉터)

- dir : HTML문서의 요소 안에 있는 텍스트의 방향을 설정

- id : 요소의 유일한 식별. 스타일시트 선택자

- lang : 요소 내용의 언어를 지정

- style : 요소에 대한 인라인 스타일을 지정

- tabindex : 탭 순서에서의 위치를 지정

- title : 해당 element 의 제목

+ HTML 5 추가 속성

- contenteditable : 편집 가능한 영역임을 표시하는 속성

- data-* : HTML 안에 속성처럼 데이터를 저장하거나 추가

- draggable : 지정된 요소를 드래그 할 수 있게 한다. 웹 브라우저 외부로까지 드래그가 가능하다.

- dropzone : 드래그된 데이터를 드롭할 때 복사, 이동, 링크

- hidden : CSS를 사용하지 않고도 HTML 내에서 요소를 숨길 수가 있다.

ex06 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	border: 3px solid gray;
	width: 500px;
	height: 100px;
}
</style>

</head>
<body>

<h3>공통 속성</h3>

<p>노랑 상자에 마우스를 올려 보세요...</p>
<div title="안녕.." style="width: 300px; height: 50px; background: yellow;"></div>
<hr>

<!-- contenteditable : 내용을 입력할 수 있는지의 여부를 지정하며 입력된 내용의 제어는 자바스크립트로  -->
<p class="box" contenteditable="true"></p>
<hr>

<p>data-* : 개발자가 임의의 속성을 html 요소에 추가할 때 사용 </p>
<ul>
	<li data-subject="java">자바</li>
	<li data-subject="spring">스프링</li>
	<li data-subject="oracle">오라클</li>
</ul>
<hr>

<p> draggable : 지정된 요소의 드래그 가능 여부를 지정</p>
<div class="box" draggable="true">드래그 예제</div>


</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0913_HTML : 레이아웃 관련 태그 (1) (1)	2021.09.14
0913_HTML : 기본 태그(5) formatting 관련 태그 (0)	2021.09.14
0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1)	2021.09.14
0913_HTML : 기본 태그 (2) (1)	2021.09.14
0913_HTML : 기본 태그(1) (1)	2021.09.14

블록 레벨 요소 (Block Level Element)

- 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한줄을 차지

- 특징

· 항상 새로운 라인에서 시작한다.

· 화면 크기 전체의 가로 폭을 차지한다. (width : 100%)

· width, height, margin, padding 프로퍼티 지정이 가능하다.

· block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

· block 레벨 요소 예 div, h1~h6, p, ol, ul, li, hr, table, form 등 . . .

인라인 레벨 요소 (Inline Level Elemet)

- 인라인 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치

- 특징

· 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다.

즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.

· content의 너비만큼 가로 폭을 차지한다.

· width, height 속성은 무시되며, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. 즉, padding-top, padding-bottom, margin-top, magrin-bottom속성은 무시된다.

상, 하 여백은 line-height로 지정한다.

· inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 공백(4px)이 자동 지정된다.

- inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다.

- inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

- inline 레벨 요소 예 : span, a, string, img, br, input, select, textarea, button 등 . . .

ex04 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>block 태그와 inline 태그</h3>

<div>
<p>
   - block 태그 : 혼자 한줄을 차지하며, 항상 새로운 라인에서 시작<br>
     화면 전체가 가로폭을 차지<br>
     width, height, margin, padding 프로퍼티 지정이 가능<br>
     block 태그에는 inline 태그를 포함할 수 있음
     주요 block 태그 : div, h!h6, p, ol, ul, li, table, form 등
</p>
</div>
<p>
   - line 태그 : 새로운 라인에 시작하지 않고 다른 요소들과 나란히 배치<br>
     content 요소 만큼 폭을 차지<br>
     width, height는 무시되고, margin, padding은 좌우 간격만 적용<br>
     line 태그 뒤에 공백(엔터 포함)이 있는 경우 4px 정도의 공백이 자동으로 생김<br>
     주요 inline 태그 : span, a, img, input, select, textarea, button 등 
</p>
<hr>

<h3>block 태그 예</h3>
<p style="background: yellow;">자바</p><p style="background: tomato;">스프링</p>
<p style="width: 200px; background: gray;">웹</p>
<p style="background: blue;">CSS</p>
<hr>

<h3>inline 태그 예</h3>
<span style="background: red;">자바</span><span style="background: green;">안드로이드</span>
<span style="background: tomato;">인라인태그의 공백 엔터등은 4px정도의 자동공백이 생김</span>
<span style="width: 300px; background: black; color: white;">안드로이드</span>
<hr>

</body>
</html>

HTML 특수문자

ex05 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>html 특수문자</h3>

<p>
	&lt;br&gt; : 라인을 넘긴다.
</p>
<hr>

<p>
html은                             공백을 많이 띄어도 한칸만 떨어진다.
이럴 경우에는 &amp;nbsp;으로 공백을 띄을 수 있다.
</p>
<p>
스&nbsp;&nbsp;&nbsp;&nbsp;프&nbsp;&nbsp;&nbsp;&nbsp;링
</p>


</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0913_HTML : 기본 태그(5) formatting 관련 태그 (0)	2021.09.14
0913_HTML: 기본 태그(4) 공통속성 (0)	2021.09.14
0913_HTML : 기본 태그 (2) (1)	2021.09.14
0913_HTML : 기본 태그(1) (1)	2021.09.14
0913_HTML : HTML 이란? (1)	2021.09.13

<body> ~ </body>

- body 요소는 문서의 주된 콘텐츠를 나타낸다.

- HTML 문서에는 body 요소를 반드시 하나 기술한다.

<hx> ~ </hx>

- 글자크기를 지정하는 태그로 x는 1~6 사이의 숫자(1: 가장 큰 글씨, 6: 가장 작은 글씨)이다.

- <h> 태그는 자동으로 줄 바꿈이 이루어지며 타이틀을 입력할 경우에 보통 사용한다.

<p> ~ </p>

- 문단 태그 (Paragraph)

- 단락을 정의하며 한 문단을 바꾸는 경우 사용

- <p> 태그는 <br><br>과 유사하다. <p>태그의 원래 목적은 단순히 줄을 나누는 것이 아니라 문단을 브라우저에게 알려준다.

- <p> 태그는 종료 태그를 생략할 수 있는데, 이는 웹 브라우저들이 <p>태그와 만나게 되면 그 이전의 문단이 끝났다고 해석하기 때문이다.

<br>

- 줄 바꿈 태그 (Line Break). 줄 바꿈을 지정하는 데 사용한다.

<hr>

- 수평선 태그(Horizontal Rule). 문서 내에 수평선을 넣어주는 태그이다.

ex02 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3> h 태그</h3>

<p>
  글자 크기를 지정하는 태그로 보통 제목을 나타낼 때 사용
  크기는 1~6 이며 1이 가장 큼
</p>

<h1>h1 태그 예제</h1>
<h2>h2 태그 예제</h2>
<h3>h3 태그 예제</h3>
<h4>h4 태그 예제</h4>
<h5>h5 태그 예제</h5>
<h6>h6 태그 예제</h6>

</body>
</html>

ex03 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>기본 태그</h3>

<div>
 - p 태그 : 문단 태그. 단락을 정의하여 한 문단을 나타내는데 사용<br>
   p태그는 &lt;br&gt;&lt;br&gt;과 유사한 정도의 간격이 생김<br>
 - br 태그 : 줄 바꿈 태그. <br>
   HTML은 엔터로 줄을 바꿀 수 없으며 공백도 한칸만 표시됨<br>
 - hr 태그 : 수평선 태그. 문서 내에 수평선을 넣어주는 태그.<br>
</div>

<p> p 태그 예제 1 </p>
<p> p 태그 예제 2 </p>
자바
안드로이드<br>
HTML
CSS<br><br>
servlet
JSP

<hr>
<hr color="blue">
<hr width="50%" align="center">
<hr size="5" width="50%" align="right">
<hr noshade="noshade" size="5" width="50%">

</body>
</html>

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0913_HTML: 기본 태그(4) 공통속성 (0)	2021.09.14
0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1)	2021.09.14
0913_HTML : 기본 태그(1) (1)	2021.09.14
0913_HTML : HTML 이란? (1)	2021.09.13
0901~0910_JDBC : Semi Project 빵켓컬리 (1)	2021.09.13

- 문서의 내용을 설명하거나 나중에 태그 분석 등에 사용하기 위해서 사용한다. 하지만 나중에는 쓰면 안된다. client 에게도 데이터가 가므로 주석은 공부할 때만 사용할 것

<html> ~ </html>

- HTML 문서의 최상위 태그로 HTML 문서의 시작과 끝을 나타낸다.

- head 요소와 body 요소를 포함할 수 있다.

- lang 속성으로 내용에서 사용할 언어를 지정할 수 있다.

<head> ~ </head>

- HTML 요소 내부의 첫 번째 요소로 사용

- head 요소는 문서의 메타데이터 집합을 나타낸다.

- 대부분 title요소를 포함해야 하지만 HTML로 쓴 이메일의 제목 줄처럼 상위 레벨의 프로토콜에서 타이틀 정보를 얻을 수 있을 때는 생략할 수 있다.

- 그 밖에 script, style, meta 요소를 정의할 수 있다.

<title> ~ </title>

- HTML 문서의 제목 표시 부분을 기술한다. 이 부분에 기술된 내용은 브라우저의 제목 표시줄에 나타난다.

<meta>

- 메타 정보 태그(Meta-Information)

- meta 요소는 title 요소나 base 요소, link 요소, style 요소, script 요소로 표현할 수 없는 다양한 메타데이터를 표시한다.

- 내장 스크립트와 CSS 정보, 스크립트와 CSS 파일 링크 정보뿐만 아니라 검색 엔진을 위한 해당 문서의 검색 키워드 정보도 담을 수 있다.

- 가장 일반적으로 사용되는 속성은 name, content 속성이다.

- name 속성, http-equiv 속성, charset 속성 중 하나를 반드시 써야 한다.

- charset : 문자 인코딩을 정의. HTML 5 추가 속성

- content : 지정된 메타 키에 대한 관련 정보를 지정

- http-equiv : HTTP 응답 메세지 헤더에 대한 정보를 제공하는 태그

- name : 요소에 대한 이름을 지정

- scheme : 관련 메타 요소의 content 속성의 값을 나타내기 위해 사용할 수 있는 스키마를 지정

ex01 예시 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"> <!-- 기본:ISO-8859_1, 한글은 깨짐 -->
<meta name="keywords" content="html, css, javascript, tag">
	<!-- 검색엔진에게 제공할 키워드 -->
<meta http-equiv="refresh" content="10; url=https://www.naver.com">
	<!-- http-equiv : HTTP 응답 메세지 헤더에 대한 정보를 제공 -->
<title>첫번째 예제</title>
</head>
<body bgcolor="yellow">

<h3>meta 태그</h3>

<p> 10초 후 이동합니다.</p>


</body>
</html>

10초 후에 naver로 이동한다

저작자표시 동일조건

'쌍용강북교육센터 > 9월' 카테고리의 다른 글

0913_HTML : 기본 태그(3) 블럭요소와 인라인 요소 (1)	2021.09.14
0913_HTML : 기본 태그 (2) (1)	2021.09.14
0913_HTML : HTML 이란? (1)	2021.09.13
0901~0910_JDBC : Semi Project 빵켓컬리 (1)	2021.09.13
0907_Java : 채팅프로그램 만들기 (1)	2021.09.08