HTML Basic
Hyper Text Markup Language
- 웹 문서의 구조와 내용을 담고 있는 구조화된 문서 파일(Text)
- HTML의 기본 구조
Tag
- <> 사이에 오는 단어나 문자. ex) <head>, <p>, <h1>
- 작성한 텍스트의 구조와 의미에 관해 브라우저에게 알려줌
속성(Attribute)
<h1>Main Title</h1>
<h2>Sub Title</h2>
<p>P 태그는 하나의 문단을 나타냅니다.
<br/>BR 태그는 줄 바꿈 태그입니다.</p>
<hr/>- 기본 마크업 태그 h1 ~ h6
- 문서의 헤더 정보를 정의. 가장 중요한 헤더는 <h1>, 가장 낮은 중요도의 헤더 정보는 <h6>
- 기본 마크업 태그 p
- 한 개의 문단을 의미
- 기본 마크업 태그 br
- 줄 바꿈
-기본 마크업 태그 hr
- 주제를 분리, 가로 줄을 삽입
-br, hr 처럼 Content가 없는 태그는 Closing Tag 없이 <br/>, <hr/> 방식으로 표기
Basic Tags
- 기본 마크업 태그 img
- HTML 문서에 이미지를 삽입하고자 할 때 사용
<img src="profile.png" alt="프로필 사진" width="320" height="240" />| 속성명 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 대체 텍스트 |
| width | 이미지의 너비 |
| height | 이미지의 높이 |
- 기본 마크업 태그 a
<a href="another-page.html">Hyper Text Link</a>
- 단일 페이지에서 벗어나 다른 페이지와 연결할 수 있게 해 주는 태그
- 웹의 근간을 이루는 Hyper Text 연결을 위한 Anchor Tag
- href 속성은 링크의 목적지를 명시
Table Tags
table 태그
- 표를 만들 때 사용하는 태그
- 테이블 캡션 : caption
- 테이블 헤더 : thead
- 테이블 본문 : tbody
- 테이블 푸터 : tfoot
- tr 태그 (Table Row)
- 테이블의 한 열(row)을 표현
- td 태그 (Table Data)
- tr 태그 내에서 하나의 행(column)을 표현
- th 태그 (Table Header)
- td 대신 사용. 제목 셀로 사용
- 열(TR)과 행(TD)의 확장
- rowspan : 열의 확장
- colspan : 행의 확장
Form Tags
input 태그
- 전송할 데이터를 입력하기 위한 입력 영역을 만드는 태그. form 태그 안쪽에 기술됨
- type 속성에 따라 다른 형태의 입력 영역이 표시
<form method="POST" action="profile.jsp">
<input type="text" name="userid" /><br/>
<input type="password" name="password" /><br/>
<input type="hidden" name="secret_key" /><br/>
<input type="button" value="My Button" /><br/>
<input type="submit" value="전송" />
</form>
input 태그 : checkbox와 radio
- checkbox (type="checkbox")
<input type="checkbox" name="pet" value="dog" checked>개
<input type="checkbox" name="pet" value="cat" checked>고양이
<input type="checkbox" name="pet" value="bird">새
- radio (type="radio")
<input type="radio" name="fruit" value="apple">사과
<input type="radio" name="fruit" value="grape">포도
<input type="radio" name="fruit" value="orange" checked>오렌지
textarea 태그
- 장문의 텍스트(여러 줄)를 전송하고자 할 때 사용
<textarea name="content" rows="10" cols="30"></textarea>select 태그
- 여러 개의 선택 옵션(option) 가운데서 하나를 선택
<select name="telecom">
<option value="S">SKT</option>
<option value="K">KT</option>
<option value="L">LGT</option>
<option value="E">기타</option>
</select>공간 정의 태그
HTML 요소가 공간을 점유하는 방식 : block vs inline
- 모든 시각적인(공간을 점유하는) HTML 요소들은 block 혹은 inline 방식으로 영역을 차지한다.
- div와 span은 임의의 작은 구역을 설정할 때 사용하는 태그
- div : Block 요소로 줄 바꿈이 일어난다.
- span : inline 요소로 줄 바꿈이 일어나지 않는다. 문맥의 흐름이 유지된다.
'HTML + CSS' 카테고리의 다른 글
| CSS3로 웹 페이지 스타일링하기 - 2 (0) | 2021.08.24 |
|---|---|
| CSS3로 웹 페이지 스타일링하기 (0) | 2021.08.23 |
| 인터넷과 웹 (0) | 2021.08.20 |
| Visual Studio Code install (0) | 2021.08.20 |