1. HTML 이란?
- HTML은 화면을 통해 웹 콘텐츠를 표시하는 문서인 ‘웹 페이지’를 만들기 위해 사용하는 언어
- 웹 상에서 콘텐츠를 표시하기 위해 사용하는 마크업 언어
2. 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
<!DOCTYPE html>: 문서 형식 선언<meta charset="utf-8>: 인코딩 방식 설정<title>: 문서의 제목<body>: 화면에 표시될 콘텐츠
3. 텍스트 표시
1) 제목
<h1>~<h6>
<body>
<h1>숫자가 1일 때의 제목 텍스트</h1>
<h2>숫자가 2일 때의 제목 텍스트</h2>
<h3>숫자가 3일 때의 제목 텍스트</h3>
<h4>숫자가 4일 때의 제목 텍스트</h4>
<h5>숫자가 5일 때의 제목 텍스트</h5>
<h6>숫자가 6일 때의 제목 텍스트</h6>
</body>
2) 문단 표시하기 <p>
<body>
<p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
<p>하나의 문단에는 일정한 여백이 형성되어 화면 상에서 구분하기가 용이합니다.</p>
</body>
3) 인용구 표시 <blockquote>
- 일반적인 텍스트보다 안쪽으로 들여 써집니다. 또한
<blockquote>태그에는 선택적으로 - cite라는 속성을 추가 가능.
- cite 속성 : 해당 인용구의 출처를 입력하는 속성, 주로 문구를 인용해 온 웹페이지의 주소를 입력
<body>
<p>p 태그는 문단을 나타낼 때 사용하는 태그입니다.</p>
<blockquote cite="https://wikidocs.net/book/7596">웹 개발 입문자들을 대상으로 하는 HTML 교재입니다.</blockquote>
</body>
4) 수평선 표시하기 <hr>
- 단일 태그
- color, size 속성을 사용할 수 있음
<body>
<p>지금까지 스포츠 뉴스였습니다.</p>
<hr color="purple" size="10">
<p>날씨 예보입니다. 오늘은 하루 종일 맑았지만, 내일은 비가 올 예정입니다.</p>
</body>
5) 개행 <br>
- 엔터 키를 대신해 개행을 표시할 수 있는 단일 태그
6) 공백
- 엔티티 코드 : 기호 ‘&’로 시작해서 기호 ‘;’로 끝나는 문자의 조합을 말하는 것으로 HTML 코드 내에서 다양한 특수 문자를 나타내기 위해 사용하는 일종의 약속
7) 있는 그대로 표시하기 <pre>
- 태그 안에 작성된 텍스트를 HTML 코드에 작성된 그대로 화면에 표시하는 태그로써, 개행이나 공백 등도 모두 코드에 쓰여진 그대로 표시
8) 텍스트 표시
<strong>: 두꺼운 텍스트 표시<em>: 기울어진 텍스트 표시<mark>: 형광펜 효과가 있는 텍스트 표시
9) 컨테이너 태그
- 컨테이너 : 콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
-
<div>: 블록 레벨의 컨테이너 요소를 만드는 태그
<body>
<div>
<p>행복하고 즐거워요~</p>
<p>HTML 공부!</p>
</div>
<div>
<p>슬프고 힘들어요</p>
<p>적게 먹고 운동하는 다이어트!</p>
</div>
</body>
<span>: 인라인 레벨의 컨테이너를 만드는 태그
<body>
<p>
예능 프로그램 즐겨 보시나요?
저는 <span>골때리는 그녀들</span> 재미있게 보고 있습니다!
</p>
</body>
10) 전역 속성(Global attributes)
- 모든 HTML 태그에서 공통적으로 사용할 수 있는 속성
-
id : 요소에 고유한 이름을 부여하는 식별자 역할을 함
<body>
<div id="study">
<p>행복하고 즐거워요~</p>
<p>HTML 공부!</p>
</div>
<div id="diet">
<p>슬프고 힘들어요</p>
<p>적게 먹고 운동하는 다이어트!</p>
</div>
</body>
- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할을 함
<body>
<div>
<p class="text content">행복하고 즐거워요~</p>
<p class="text content">HTML 공부!</p>
</div>
<div>
<p class="text content">슬프고 힘들어요</p>
<p class="text content">적게 먹고 운동하는 다이어트!</p>
</div>
</body>
- title : 요소에 대한 추가 정보를 기입할 수 있는 텍스트 속성으로, 사용자에게 툴팁을 제공함
<body>
<p title="현재의 심정">화창한 날씨... 어디론가 떠나고 싶다!</p>
</body>
4. 이미지와 링크
1) 이미지 표시하기 <img>
<body>
<h1>위키독스 소개글 대표이미지</h1>
<img src="https://wikidocs.net/images//book/wikidocs_1_5nYDT0Q.png">
<p>위키독스라는 훌륭한 플랫폼을 알게되어 영광입니다 ㅎㅎ 이미지는 아마도 화분인 것 같습니다!</p>
</body>
2) 대체 텍스트 추가
- URL을 바르게 입력한 경우에만 이미지가 표시되고 잘못 입력했을 때는 대체 텍스트가 표시
<body>
<img src="penguin.png" alt="이미지를 대신해 내가 등장!">
<img src="no_penguin.png" alt="이미지를 대신해 내가 등장!">
</body>
3) 이미지 크기
<body>
<img src="penguin.png" width="250" height="100">
<img src="penguin.png" width="100" height="100">
</body>
4) 자막이 있는 이미지
- HTML5에서는 이미지를 비롯해 오디오, 비디오 등의 독립적인 콘텐츠에 자막을 추가해 표시할 수 있는
<figure>와<figcaption>태그가 추가
<body>
<img src="penguin.png"> <br>
<span>귀여운 펭귄이네요~!</span>
</body>
<body>
<figure>
<img src="penguin.png">
<figcaption>귀여운 펭귄의 따봉</figcaption>
</figure>
</body>
5) 여러 이미지 중 선택
- HTML5의
<picture>태그 또한 이미지 소스를 감싸는 역할을 합니다. 그리고 그 안에는 여러 개의<source>태그를 사용해 화면 크기 별로 사용할 수 있는 여러 개의 이미지를 포함시킬 수 있습니다.
<body>
<picture>
<source media="(max-width: 375px)" srcset="image1.png">
<source media="(max-width: 768px)" srcset="image2.png">
<source media="(max-width: 1024px)" srcset="image3.png">
<img src="penguin.png" alt="source의 모든 조건이 맞지 않거나 브라우저 호환 문제가 있을 때">
</picture>
</body>
- 하나의
<picture>태그의 안에 세 개의<source>태그를 포함하면, 결과가 렌더링되는 화면의 크기에 따라 세 이미지 중 하나의 이미지 만이 선택되어 화면에 표시
6) 링크 만들기
<a>: 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 링크 요소를 만들어주는 태그
<body>
<h1>
네이버 홈페이지로 이동하려면
<a href="https://www.naver.com/">여기</a>
를 클릭
</h1>
</body>
- 새 탭에서 열기
<a href="https://www.naver.com/" target="_blank">새 탭에서 열기</a>
- 전화 걸기 & 메일 보내기
- href 속성에 전화 번호나 메일 주소를 지정할 때는 각각 “tel:”과 “mailto:” 문자열을 맨 앞에 작성해 해당 값이 전화 번호 또는 메일 주소라는 것을 명시
<body> <a href="tel:010-1234-5678"> 전화 걸기 </a> <a href="mailto:eansdrawer@naver.com"> 메일 보내기 </a> </body>
5. 목록과 표
1) 목록
<ul>: 순서 없는 목록(Unordered List)<ol>: 순서 있는 목록(Ordered List)- start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
- type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.
<body> <h1>과목명 나열하기</h1> <ol start="3" type="a"> <li>유체역학</li> <li>전자회로</li> <li>동역학</li> <li>마이크로프로세서</li> </ol> </body><ul>과<ol>태그 안에서 항목을 나타낼 때는<li>태그를 사용
<body>
<h1>항목 태그는 같은 것을 쓴다</h1>
<ul>
<li>강아지</li>
<li>고양이</li>
<li>거북이</li>
<li>햄스터</li>
</ul>
</body>
<body>
<h1>항목 태그는 같은 것을 쓴다</h1>
<ol>
<li>스타벅스</li>
<li>커피빈</li>
<li>파스쿠찌</li>
<li>이디야</li>
</ol>
</body>
2) 표 만들기
<table>: 하나의 표를 나타내는 태그<tr>: 표 안에서 하나의 행을 나타내는 태그<th>: 행 안에서 제목에 해당하는 셀을 나타내는 태그<td>: 행 안에서 항목에 해당하는 셀을 나타내는 태그<thead>: 표의 제목을 나타내는 영역<tbody>: 표의 본문을 나타내는 영역<tfoot>: 표의 요약 부분을 나타내는 영역
<body>
<table border="1">
<thead>
<tr>
<th>한국 선수</th>
<th>일본 선수</th>
<th>미국 선수</th>
</tr>
</thead>
<tbody>
<tr>
<td>김철수</td>
<td>오오다</td>
<td>제임스</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>세계 랭킹 5위</td>
<td>세계 랭킹 8위</td>
<td>세계 랭킹 2위</td>
</tr>
</tfoot>
</table>
</body>
6. 입력
1) 입력 받기
<input>: 텍스트를 입력할 수 있는 ‘입력 필드’ 를 나타내는 단일 태그
<body>
<h1>입력 필드를 만든다</h1>
<input>
<input>
</body>
2) <input> 태그의 핵심 속성 type
- text : 한 줄 짜리 일반 텍스트를 입력할 수 있는 유형, 따로 type 속성을 지정하지 않은 경우에도 사용할 수 있는 유형
- password : 웹 이용자가 입력한 내용이 화면에 표시되지 않음
- number : 숫자를 입력 받을 때 사용
- color : 웹 이용자에게 색상표를 제공해 색상을 선택할 수 있게 해줌
- button : 클릭할 수 있는 버튼을 만드는 유형
- radio : 여러 항목 중 하나의 항목만을 선택해야 할 때 주로 사용
- checkbox : 여러 항목 중 몇 가지 동시에 선택할 때 주로 사용
3) <label> 태그
- 입력 요소에 라벨을 붙이는 역할
<body>
<h1>로그인 해주세요</h1>
<label>
아이디
<input type="text">
</label>
<br>
<label for="pw">비밀번호</label>
<input id="pw" type="password">
</body>
4) 드롭다운 메뉴 <select>
- 드롭다운 메뉴 : 요소를 클릭했을 때 선택 가능한 항목들이 아래로 펼쳐지는 메뉴
<select>태그는 드롭다운 메뉴의 개별 항목을 나타내는<option>태그와 함께 사용
<body>
<select>
<option>커피</option>
<option>콜라</option>
<option>쥬스</option>
<option>생수</option>
</select>
</body>
- size : 화면에 표시될 메뉴 항목의 개수를 지정하고, 드롭다운 메뉴의 형태를 변경합니다.
- multiple : 여러 개의 항목을 함께 선택할 수 있도록 합니다.
<body>
<select size="3" multiple>
<option>커피</option>
<option>콜라</option>
<option>쥬스</option>
<option>생수</option>
<option>녹차</option>
<option>맥주</option>
</select>
</body>
- selected : 화면에 표시될 때 기본으로 선택되어 있을 항목을 지정합니다.
- value : 항목을 선택했을 때 최종적으로 반영될 값을 지정합니다.
<body>
<select>
<option value="coffee">커피</option>
<option value="coke">콜라</option>
<option value="juice">쥬스</option>
<option value="water" selected>생수</option>
<option value="tea">녹차</option>
<option value="beer">맥주</option>
</select>
</body>
5) 여러 줄의 텍스트를 입력 받기 <textarea>
<textarea>태그는<input>태그와 달리 여는 태그와 닫는 태그 함께 사용- 코드 작성 시 여는 태그와 닫는 태그 사이에 텍스트를 입력하면 웹 페이지에 렌더링 될 때 이미 텍스트가 입력되어 있는 상태로 렌더링
-
cols : 텍스트 영역의 가로 너비를 지정, 기준은 문자의 개수
- rows : 텍스트 영역의 세로 너비를 지정, 기준은 문자의 개수
<body>
<textarea cols="10" rows="6"></textarea>
</body>
6) 진척도 <progress>
- max : 작업 완료를 위해 필요한 작업량을 지정합니다. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
- value : 화면에 표시할 진척도를 지정합니다. max의 값보다 작거나 같아야 합니다.
<body>
<p>작업 진행 중... 60%...</p>
<progress value="60" max="100"></progress>
</body>
7) 버튼 <button>
<input type="button">과<button>을 통해 만든 요소는 형태나 기능 면에서 차이 X<button>태그의 경우, 코드 작성 시 여는 태그와 닫는 태그 사이에 콘텐츠를 입력해 버튼에 표시될 콘텐츠를 지정할 수 있다는 특징이 있다.
<body>
<!-- value 속성에 콘텐츠를 써 줍니다. -->
<input type="button" value="PUSH">
<!-- 태그 사이에 콘텐츠를 써 줍니다. -->
<button>PUSH</button>
</body>
8) 입력 폼 만들기
<form>: 웹 이용자가 입력 요소에 입력한 값들을 서버로 전송해주는 역할을 하는 ‘폼 요소(양식)’ 를 만드는 태그-
action : 폼 요소에 입력된 값들을 전달 받아 처리할 서버의 프로그램을 지정(URL)
- method : 사용자가 입력한 내용들을 서버로 전송할 때의 방식을 지정
- get 방식 : 입력 후 전송한 값이 주소창에 표시
- post 방식 : 입력 후 전송한 값이 주소 창에 표시 X
<body>
<form method="post" action="fake_server.php">
<label for="id">아이디</label>
<input type="text" id="id">
<br>
<label for="pw">비밀번호</label>
<input type="password" id="pw">
<br>
<input type="button" value="로그인">
</form>
</body>
9) submit 타입
- submit 유형의
<input>은 기본적으로 button 타입의<input>과 형태가 같지만, 클릭 시 서버로의 값 전송이 이루어진다는 기능이 추가
<body>
<form method="post" action="fake_server.php">
<label for="name">이름</label>
<input type="text" id="name" name="name">
<br>
<label for="age">나이</label>
<input type="number" id="age" name="age">
<br>
<label for="character">성격</label>
<textarea id="character" name="character"></textarea>
<br>
<!-- 클릭하면 입력 값들이 서버로 전송됩니다 -->
<input type="submit" value="전송">
</form>
</body>
7. 외부 파일 및 문서 삽입
1) 외부 리소스 표현 <object>
<object>태그 : 이미지, 중첩된 브라우저 컨텍스트, 플러그인에 의해 표시되는 콘텐츠 등 다양한 외부 리소스를 나타내는 요소를 만드는 태그-
data : 외부 파일의 경로를 지정하는 속성입니다.
- type : 포함 시킨 내용의 유형을 지정하는 속성입니다.
- name : 다른 요소들과 구분할 수 있는 식별자 역할을 하는 속성입니다.
<body>
<!-- 예제 출처 : MDN -->
<object type="application/pdf"
data="/media/examples/In-CC0.pdf"
width="250"
height="200">
</object>
</body>
2) 외부 리소스 표현 <embed>
<embed>태그 : HTML5를 지원하지 않는 브라우저에서 재생할 수 없는 콘텐츠를 삽입할 때 사용하는 태그- src : 외부 파일의 경로를 지정하는 속성입니다.
- type : 포함 시킨 내용의 유형을 지정하는 속성입니다.
- width : 요소의 너비를 지정하는 속성입니다.
<object>에도 사용 가능. - height : 요소의 높이를 지정하는 속성입니다.
<object>에도 사용 가능.
<body>
<!-- 예제 출처 : MDN -->
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
</body>
3) HTML문서 삽입하기
<iframe>태그 : 웹 페이지 안에 공간을 마련해 그 안에 또 다른 웹 페이지를 표시
답글 남기기