개발(Web)/Web

[HTML] HTML 기초 30분 요약

shinyelee 2021. 1. 30. 20:00

Learn the basics - 제주 코딩 베이스 캠프 30분 요약 시리즈 + 부산 아이티윌

개요

HTML (Hyper Text Markup Language) 웹페이지의 뼈대를 만드는 프로그래밍 언어
파일 확장자 *.htm *.html
인코딩 방식 UTF-8 (한글 깨짐 방지)
명령어 (태그, tag) 일반적으로 시작태그, 종료태그 한 쌍으로 구성
대소문자를 구분하지 않으나 편의상 소문자로 입력
중첩 사용 가능
태그 형태 <명령어> (시작태그)
</명령어> (종료태그)

문서구조태그

<!DOCTYPE html> html5 버전 문서임을 선언
<html></html> 웹페이지의 시작과 끝
<head></head> 머리말
<title></title> 문서의 제목(브라우저 제목 표시줄)
<meta> 문서의 메타 데이터
<body></body> 본문(웹페이지 내용)

스타일 속성

<div></div> 분할(레이아웃 구역 나누는 용도, block 속성)
style="" 스타일
color: 글자색
background-color: 배경색
text-align: 정렬(좌-left, 우-right, 중-center)

특수문자 태그

입력 출력 설명
&lt; < [less than] ~보다 작다
&gt; > [greater than] ~보다 크다
&amp; & [ampersand] &기호
&nbsp;   [non-breaking space] 줄 바꿈 없는 공백(1칸 띄어쓰기)

참고

 

HTML Entities

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

001.html

<br> [line break] 줄 바꿈(다음 줄로 이동, 한 줄 여백)
<p></p> [paragraph] 문단 설정(다음 줄로 이동, 한 줄 여백 없음)
<pre></pre> [preformatted text] 형식 유지(띄어쓰기, 줄 바꿈 상태 보존)
<u></u> 또는 <ins></ins> 밑줄(ins 태그는 datetime 속성 이용해 추가한 텍스트 나타냄)
<s></s> 또는 <del></del> datetime 속성 이용해 삭제한 텍스트 나타냄(s 태그는 비추) 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- h${hello world}*6 -->
	<h1>제목 크기</h1>
	<h2>제목 크기</h2>
	<h3>제목 크기</h3>
	<h4>제목 크기</h4>
	<h5>제목 크기</h5>
	<h6>제목 크기</h6>
	
	<p>hello world <hr>가로줄</p>
	<p>hello world <br>줄바꿈</p>
	<p><b>b보다</b></p>
	<p><strong>strong 권장</strong></p>
	<p><i>i보다</i></p>
	<p><em>em 권장</em></p>
	<p><mark>형광펜</mark></p>
	<p>H<sub>2</sub>O 아래첨자</p>
	<p>x<sup>2</sup>=4 위첨자</p>
	
	<!-- lorem ipsum 웅앵은 dummy text -->	
</body>
</html>

002.html

dl [description list] 정의 목록
입력 출력
<h3>Description List(dl) - 정의 목록</h3>
  <dl>
    <dt>이지은</dt>
    <dd>아이유(IU), 이지금(dlwlrma)</dd>
    <dd>1993년 5월 16일생</dd>
    <dd>대표곡: 좋은 날, 너랑 나, 분홍신, 금만나, 팔레트, 밤편지, 블루밍, 에잇 등</dd>
  </dl>		 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- ol>li{순서 있는 목록}*3 -->
	<ol>
		<li>순서 있는 목록</li>
		<li>순서 있는 목록</li>
		<li>순서 있는 목록</li>
	</ol>
	<ol type="I">
		<li>순서 있는 목록</li>
		<li>ol type="I"</li>
		<li>적용한 예시</li>
	</ol>
	<ol type="i">
		<li>순서 있는 목록</li>
		<li>ol type="i"</li>
		<li>적용한 예시</li>
	</ol>
	<ol type="A">
		<li>순서 있는 목록</li>
		<li>ol type="A"</li>
		<li>적용한 예시</li>
	</ol>
	<ol type="a">
		<li>순서 있는 목록</li>
		<li>ol type="a"</li>
		<li>적용한 예시</li>
	</ol>
	<ul>
		<li>순서 없는 목록</li>
		<li>앞에 점 없애서</li>
		<li>메뉴로 쓰기도.</li>
	</ul>
	
	<div>여러 태그를 하나로 묶을 때 사용(단독 기능X)</div>
	<dl>
		<dt>단어</dt>
		<dd>해당 단어 정의(내용)</dd>
	</dl>
	<a href="https://www.naver.com">하이퍼링크</a>
</body>
</html>

003.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img width="150px" 
	height="auto" 
	src="opentutorials.png" 
	alt="egoing">
	<br>alt는 엑박 뜰 때 사진 설명해주는 텍스트<br><br>
	
	<iframe width="962" 
	height="551" 
	src="https://www.youtube.com/embed/LiEY6BhDl5w" 
	frameborder="0" 
	allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
	allowfullscreen></iframe>
	<br>유튜브 영향으로 오디오/비디오 태그로 직접 삽입하지 않는 추세
	<br>유튜브 영상 우클릭 → 소스 코드 복사 → 붙여넣기
</body>
</html>

004.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text"><br>
	<input type="password"><br>
	<input type="date"><br>
	<input type="time"><br>
	<input type="range"><br>
	<input type="color"><br>
	<input type="radio">택1만 가능<br>
	<input type="checkbox">다중선택<br>
	<input type="file"><br>
	<textarea cols="30" rows="10"></textarea><br>
	tel, url, email, search 등 생략.
</body>
</html>

005.html

<tr></tr> [table row] 표의 행
<td></td> [table data] 표의 열
<th></th> [table header] 표의 제목(굵게, 가운데 정렬) 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
table, th, tr, td {
	border: solid 1px black;
	border-collapse: collapse;
}
</style>
</head>

<body>
	<!-- table>(tr>td*5)*3 -->
	<table>
		<thead>
			<tr>
				<th>순번</th>
				<th>책이름</th>
				<th>가격</th>
				<th>판매량</th>
				<th>판매액</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>노션</td>
				<td>7,000</td>
				<td rowspan="2">1,000</td>
				<td>7,000,000</td>
			</tr>
			<tr>
				<td>2</td>
				<td>노션</td>
				<td>8,000</td>
				<td>8,000,000</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td colspan="4">총액</td>
				<td>8,000,000</td>
			</tr>
		</tfoot>
	</table>
</body>
</html>

006.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<header>
		<h1>hello world</h1>
	</header>
	
	<nav>
		<ul>
			<li>menu</li>
			<li>menu</li>
			<li>menu</li>
		</ul>
	</nav>
	
	<section>
		<h1>section</h1>
		<article>
			<h1>article</h1>
		</article>
	</section>
	
	<aside>
		<h1>aside</h1>
	</aside>
	
	<footer>
		<h1>footer</h1>
	</footer>
</body>
</html>

007.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>블럭 요소</h1>
	<h1>블럭 요소</h1>
	<h1>블럭 요소</h1><br>
	
	<p>블럭 요소2</p>
	<p>블럭 요소2</p>
	<p>블럭 요소2</p><br>
	
	인라인 레벨 요소<br>
	<img src="opentutorials.png" alt="egoing">
	<img src="opentutorials.png" alt="egoing">
	<img src="opentutorials.png" alt="egoing">
</body>
</html>

이미지 파일 예전에 삭제한 듯? 엑박 뜨는데 귀찮아서 냅둠...

출처

반응형

'개발(Web) > Web' 카테고리의 다른 글

[CSS] CSS 기초 30분 요약  (0) 2021.01.31
[Eclipse] Processing instruction not closed. 버그  (0) 2021.01.30
[Eclipse] Could not delete C:/경로. May be locked by another process.  (0) 2021.01.28
[Eclipse] 오류: 기본 클래스 (클래스명)을(를) 찾거나 로드할 수 없습니다.  (0) 2021.01.04
[Java] 생활코딩 JAVA 상속  (0) 2021.01.01

'개발(Web)/Web'의 다른글

  • 현재글[HTML] HTML 기초 30분 요약

관련글

댓글

티스토리툴바