반응형
- 요소는 HTML 페이지를 구성하는 각 부품이다.
- 태그는 요소를 만들 때 사용하는 작성 방법이다.
- 스타일 시트는 마크업 언어가 표시되는 방법을 기술하는 언어로 HTML 페이지의 스타일을 지정할 때 사용한다.
- HTML 요소의 태그, 속성, 속성값 구분하여 작성!! <img title="바다" alt="sea" src="sea.png">
태그: img
속성: title, alt, src
속성값: 바다, sea, sea.png
- HTML5 기본 페이지 형태 작성
<!DOCTYPE html> <!--웹 브라우저에 HTML5 문서라는 것을 알리기 위해 반드시 첫 행에 나와야 한다. -->
<html> <!--모든 HTML 페이지의 기본 요소로, 모든 태그는 이 html 태그 내부에 작성한다. -->
<head> <!--body 태그에 필요한 스타일시트와 자바스크립트를 제공한다. -->
<title>Hello HTML5</title> <!--웹 브라우저에 표시하는 제목을 지정한다. -->
</head>
<body>
<form>
<input type="text" name="search">
<input type="submit">
</form>
</body>
</html>
01 글자 태그
1. 제목과 본문 글자 태그
- 문서의 제목을 표현할 때 사용
- h는 heading을 의미
- 제목 태그는 h1~h6까지 존재하며, 숫자가 작을 수록 크게 출력된다.
- p는 paragraph의 약자
- <p> 태그는 본문 문단을 구분하며, 글의 단락을 나타낸다.
- br는 break의 약자
- <br> 태그는 줄 바꿈을 생성한다.
- hr는 horizontal rule의 약자
- <hr> 태그는 수평 줄을 삽입한다.
2. 앵커 태그
- 하이퍼텍스트: 사용자의 선택에 따라 특정 정보로 이동하는 조직된 문서
- a 태그(Anchor): 다른 웹 페이지나 웹 페이지 내부의 특정 위치로 이동
- <a> 태그의 href 속성
- a는 anchor의 약자
- href는 hyper reference의 약어
- 절대 경로: 현재 웹 페이지의 위치와 상관없이 웹 페이지 또는 파일의 위치를 나타내는 경로
- http ://naver.com - 네이버의 메인 페이지
- /animal.jpg - 현재 웹 사이트 최상위 위치의 animal.jpg 파일
- 상대 경로: 현재 웹 페이지의 위치에 따라 결정되는 웹 페이지 또는 파일의 경로
- animal.jpg - 웹 페이지가 있는 폴더의 animal.jpg 파일
- image/animal.jpg - 웹 페이지가 있는 폴더에 포함된 image 폴더의 animal.jpg 파일
- ../animal.jpg - 웹 페이지가 있는 폴더의 상위 폴더에 있는 animal.jpg 파일
- 아이디 경로: 현재 웹 페이지 내부에 있는 다른 태그의 id 속성
- #name - id 속성이 name인 태그의 위치로 이동
- 메일 경로: 메일 주소
- mailto : hanb@hanbit.co.kr – 해당 주소로 메일 전송
-> 각각의 링크를 클릭하면, 해당하는 id 속성이 붙은 위치로 이동한다.
3. 글자 모양 태그
- 글자 모양 태그 내부에 제목 글자 태그와 본문 글자 태그는 넣을 수 없다.
<!--글자 모양 태그 내부에 제목 글자 태그와 본문 글자 태그는 넣을 수 없다.-->
<i>
<h1>웹 표준 위반</h1>
<p>웹 표준 위반</p>
</i>
- <b>: 굵은 글자 bold
- <i>: 기울어진 글자 italic
- <small>: 작은 글자
- <sub>: 아래 첨자 subscript
- <sup>: 위 첨자 superscript
- <ins>: 밑줄 글자 insert
- <del>: 취소선이 그어진 글자 delete
02 목록 태그
내비게이션 메뉴
- 웹 사이트의 다른 웹 페이지로 이동할 수 있는 버튼
- 내비게이션 메뉴를 만들기 위해 주로 사용되는 목록 태그
- <ul>: 순서가 없는 목록 unordered list 생성
- ul에서 사용 가능한 type
- disc : ●
- circle : ○
- square : ■
- ul에서 사용 가능한 type
- <ol>: 순서가 있는 목록 ordered list 생성
- <li>: 목록 요소 list item 생성
1. 순서가 없는 기본(글머리 기호) 목록 만들기
2. 순서가 있는 목록 만들기
3. 중첩 목록 만들기
03 테이블 태그
테이블 태그
- <table>: 표 삽입
- <tr>: 표에 행(table row) 삽입
- <th>: 표의 제목(table heading) 생성
- <td>: 표의 일반 셀(table data) 생성
테이블 태그의 속성
행, 열 병합 표 생성
- colspan 속성과 rowspan 속성을 적용
- colspan은 열을 더하고 rowspan은 행을 더하는 느낌!
04 미디어 태그
미디어 태그
- 이미지, 오디오, 비디오 등 멀티미디어를 넣을 때 사용
미디어 태그 속성
- 이미지, 오디오, 비디오에 필요한 추가 정보는 속성을 사용
내 시간표 만들기(과제)
테이블 태그 활용하여 내 시간표 만들기
<조건>
- border="1"
- 요일에 th 태그 사용
<!DOCTYPE html>
<html>
<head>
<title>과제</title>
</head>
<body>
<h3>내 시간표 만들기</h3>
<hr>
<table border="1">
<!--테이블을 만들 때는 기본적으로 행과 열로 틀을 먼저 짠다!-->
<!---시간나타내는 열과 요일 행 => 9행, 6열-->
<caption>2022학년 1학기 시간표</caption>
<tr>
<!--가로너비를 같게하기 위한 처리를 해주었다-->
<!--추가해야할점: 세로 너비 같게/글꼴 가운데 정렬-->
<th width=100 height='auto' style='word-break:break-all;'align=center>교시</th>
<th width=100 height='auto' style='word-break:break-all;'>월</th>
<th width=100 height='auto' style='word-break:break-all;'>화</th>
<th width=100 height='auto' style='word-break:break-all;'>수</th>
<th width=100 height='auto' style='word-break:break-all;'>목</th>
<th width=100 height='auto' style='word-break:break-all;'>금</th>
</tr>
<tr>
<td>1교시(9:00)</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2교시(10:00)</td>
<td></td>
<td></td>
<td rowspan="3"><b>웹프로그래밍</b>
<small>문소영 D312</small></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3교시(11:00)</td>
<td rowspan="2"><b>종합설계(1)</b>
<small>안병구 D311</small></td>
<td rowspan="2"><b>인터넷공학(2)</b>
<small>안병구 D420</small></td>
<td><b>종합설계(1)</b>
<small>안병구 D311</small></td>
<td></td>
</tr>
<tr>
<td>4교시(12:00)</td>
<td><b>회계의 이해</b>
<small>육윤복 E301</small></td>
<td></td>
</tr>
<tr>
<td>5교시(13:00)</td>
<td><b>인터넷공학(2)</b>
<small>안병구 D420</small></td>
<td><b>엔지니어앙트레프레너십</b>
<small>김진구 C322</small></td>
<td></td>
<td rowspan="4"><b>근로</b></td>
<td rowspan="3"><b>근로</b></td>
</tr>
<tr>
<td>6교시(14:00)</td>
<td rowspan="3"><b>컴퓨터보안</b>
<small>유동영 D423</small></td>
<td></td>
<td rowspan="3"><b>근로</b></td>
</tr>
<tr>
<td>7교시(15:00)</td>
<td rowspan="2"><b>회계의 이해</b>
<small>육윤복 E301</small></td>
</tr>
<tr>
<td>8교시(16:00)</td>
<td></td>
</tr>
</table>
</body>
</html>반응형
'알아두면쓸데있는신기한잡학사전 > 고군분투흔적들' 카테고리의 다른 글
| [CSS3] 기초 선택자와 단위 (0) | 2022.04.27 |
|---|---|
| [HTML5] 입력 양식 태그와 구조화 태그 (0) | 2022.04.26 |
| [HTML5] 웹 페이지 기본 구조 (0) | 2022.04.16 |
| [HTML5] 웹 개요 (0) | 2022.04.16 |
| [Project] API, REST, REST API (0) | 2022.01.21 |
