HTML기본구조
<!doctype html><!--문서의 시작-->
<head><!--현재 문서의 타이틀 제목-->
<meta charset="UTF-8"><!-- 한글표시(UTF-8) -->
<title>template.html</title>
</head>
<body><!-- 본문의 시작 -->
</body><!-- 본문의 끝 -->
</html><!-- 문서의 끝 -->
HTML 문서의 특징
태그 내부에 또 다른 태그를 사용 할 수 있다.
태그는 대소문자 구분이 없다.
파일저장시 확장자명은 ~.html or ~.htm
태그 내부에 속성을 사용 할 수 있다. 속성으로 태그의 자세한 설정을 줄 수 있다.
html문서에 문자, 이미지, 동영상, 음악파일도 올릴 수 있다.
HTML 태그들
<태그>내용<태그>
<h1>제목</h1>
<h6>1~6 숫자에 따라 작은 제목</h6>
<br>줄바꿈(엔터)
<p>단락구분(엔터2번)
<pre>br, p태그를 사용하지 않아도 띄어쓰기 줄바꿈 적용</pre>
<hr>선 긋기
<b>굵게</b>
<em>이탤릭체(기울림)</em>
<i>이탤릭체(기울림)</i>
<u>글씨밑줄</u>
<mark>형광펜</mark>
<center>가운데 위치</center>
<font size="글씨크기" color="글씨색깔" face="글씨체">글꼴 크기 색깔</font>
<figure><img src="파일경로" width="가로크기" height="세로크기" border="테두리굵기" alt="그림설명"><figcaption>이미지에 대한 설명글</figcaption></figure>
<a href="주소">하이퍼링크</a>
<ul type="디폴트는 색칠 된 공"><li>순서없는목록</li></ul>
<ol type="디폴트는 숫자"><li>순서있는목록</li></ol>
빈칸(공백으로 데이터갯수 표시)
**************************************************************
비디오태그
<video width="넓이" height="높이" controls poster="정지화면 이미지경로">
<source src="경로" type="video/mp4"></source>
</video>
controls => 동영상 화면에 컨트롤막대를 추가
poster => 정지화면시 표시 할 그림
**************************************************************
오디오태그
<audio controls>
<source src="경로"></source>
</audio>
**************************************************************
테이블태그
<table>
<tr><!--tr태그는 행(가로)-->
<th>th태그는 제목으로 가운데정렬, 글씨굵게</th>
<td>td태그는 열(세로)</td>
</tr>
</table>
테이블태그 속성
<table> : border="선의굵기" width="가로크기" height="세로크기"
cellspacing="쉘과 쉘사이의 거리" cellpadding="쉘과 문자열 사이의 거리"
bgcolor="배경색" align="가로정렬" valign="세로정렬" bgcolor="배경색"
colspan="가로 병합할 갯수" rowspan="세로 병합할 갯수"
**************************************************************
폼태그
<form method="전송방식" action="전송되는 페이지">
<input type="형식" name="데이터 값 담을 변수명">
<select name="변수명"><option>목록상자 옵션1</option></select>
<textarea name="변수명" rows="가로크기" cols="세로크기">여러줄입력</textarea>
</form>
폼태그 속성
method="데이터를 전송 할 전송방식 지정으로 Get or Post"
get => 사이트 접속, 이동
post => 데이터입력(회원가입, 로그인, 게시판에 글쓰기)
action="데이터가 전송되는 페이지이름"
type="input타입"
text => 입력을 받는 부분 name="변수명" size="문자열 길이 박스크기"
password => 입력 받으면 암호로 표시 name="변수명" size="문자열 길이 박스크기"
radio => 여러개중 한개만 선택 name="변수" checked="checked"기본선택
checkbox => 다중선택 name="변수명"
submit => action경로로 데이터 값 전송 value="버튼이름"
reset => 다시입력 value="버튼이름"
<select name="변수명"><option selected></option> 목록상자 selected를 준 옵션 디폴트 선택
<textarea name="변수명" rows="가로크기" cols="세로크기">여러줄입력받을때
HTML5 추가 폼 속성
type="input타입"
email => 이메일 양식대로 입력하지 않으면 에러메세지를 보낸다.
number => 숫자데이터만 입력을 받을 때 사용한다.
min="최소값" max="최대값" step="증가/감소" value="현재값"
range => 마우스로 올리기
color => 색상대화상자(chrome)
search => 입력한 값을 취소시 X를 클릭하면 된다.
date => 날자입력받고싶을때
time => 지정시간을 편하게 입력받기위해서
required => 필수입력. 입력하지 않을 시 전송버튼을 눌렀을때 알려준다.
placeholder="툴팁문자열 표시" (미리 보기 기능)
autofocus="autofocus" input박스 중 특정값에 커서 넣기. 보통 첫번째 항목에 적용
**************************************************************
semantic
'의미를 가진다'라는 뜻으로 각 태그가 스스로 의미를 가진다.
1. header : 사이트 소개, 메인메뉴(상대메뉴), 사이트로고 등을 포함한다.
2. nav : 사이트 메뉴(좌측), 링크문자열로 상단메뉴와 연결
3. section : 실제 문서 내용이 나오는 영역, 소제목이 있는 단락의 구분(논리적인 단위)
4. article : 실제적인 자세한 문서 내용, 문서의 내용이 많으면 여러개의 article로 구분한다.
5. aside : 블로그 형식(오른쪽) 사이드바
6. footer : 작성자정보, 저작권정보(링크문자열)
<hearder>
<h1>사이트제목, 로고 등</h1>
<nav>메뉴바</nav>
</hearder>
<section>
<h3>소제목을 가진 논리적인 단락</h3>
<article>실질적인 문서 내용</article>
<article>실질적인 문서 내용</article>
</section>
<section>
<h3>소제목을 가진 논리적인 단락</h3>
<p>단락</p>
<article>실질적인 문서 내용</article>
</section>
<footer>
작성자정보, 저작권정보
</footer>
**************************************************************
'프로그래밍언어 > HTML' 카테고리의 다른 글
| [HTML] HTML 개요 (0) | 2022.03.04 |
|---|---|
| [HTML] semantic 태그 (0) | 2021.09.01 |
| [HTML] HTML 태그 정리 (0) | 2020.11.18 |
| [HTML] HTML문서에 다른 사람들이 만들어 놓은 기능 추가하기(동영상, 댓글, 채팅, 방문자분석) (0) | 2020.11.17 |
| [HTML] <meta> 태그의 속성들 (0) | 2020.11.14 |
