티스토리

갱ㅎr

검색하기

[HTML5 기초] HTML 태그 모음 I

WebUI/HTML5

[HTML5 기초] HTML 태그 모음 I

gangintheremark 2023. 7. 6. 21:36

728x90

🎈참고. HTML 태그와 설명

1.1 HTML 기본구조

<!DOCTYPE html>   
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

<!DOCTYPE html> : 웹 문서의 유형을 지정. 현재 문서가 HTML5로 작성한 웹 문서
<html> </html> : 웹 문서의 시작과 끝을 나타내는 태그
<head> </head> : 웹 브라우저에 문서 정보를 알려주는 태그
<body> </body> : 실제로 웹 브라우저 화면에 나타나는 내용

1.2 태그 속 태그

<meta> : 글자 인코딩, 웹 문서의 키워드, 설명, 소유자나 작성자 등의 메타데이터 지정
<title> : 해당 문서의 제목
<style> : 해당 문서의 스타일 정보 정의
<script> : 자바스크립트와 같은 클라이언트 사이드 스크립트 정의
<link> : 해당 문서와 외부 소스(external resource) 사이의 관계 정의

2.1 내용 입력

<h1> ~ <h6> : 제목
<p> : 문단
<br> : 행 바꿈
<hr> : 수평 가로선 정의. 콘텐츠 내용에서 주제가 바뀔 때 주로 사용
<blockquote> : 인용블록

2.2 텍스트 효과

<b>, <strong> : 굵게
<i>, <em> : 기울임
<u> : 밑줄
<s> : 취소선

2.3 목록 입력

<ol> <li> : 순서 있는 목록 (1. 2. 3. ...)
- start : 시작 번호 설정
- type : 숫자, 영문 소문자(a), 영문 대문자(A), 로마숫자 소문자(i), 로마숫자 대문자(I)
<ul> <li> : 순서 없는 목록
<dl> : 설명 목록 <dt> : 용어 <dd> 내용

2.4 표 입력

<table> <caption>
행을 만드는 <tr>과 셀을 만드는 <th> <td>
- 행 병합 rowspan
- 열 병합 colspan
표의 구조를 지정하는 <thead> <tbody> <tfoot>
열을 묶어주는 <col> <colgroup> : 특정 열의 스타일을 지정

<table>
   <caption>선물용과 가정용 상품 구성</caption>
        <colgroup>
            <col style="background-color: #eee;"> /* 1 행 */ 
            <col> /* 2 행 */
            <col span="2" style="width: 150px;">  /* 3,4 행 */
        </colgroup>
</table>

코드 실행결과

2.5 이미지 삽입

<img> - src alt width height2.6 오디오와 비디오 삽입
<img src="이미지 파일 경로: alt="대체용 텍스트">
<object> : 오디오, 비디오, PDF 등 다양한 멀티미디어 파일 삽입
<embed> : HTML 초기 버전부터 사용해서 대부분 브라우저에서 사용 가능

<object data="파일" width="너비" height="높이"> </object>
<embed src="파일경로" width="너비" height="높이">

<audio> : 배경음악이나 효과음 등 오디오 파일 삽입
<video> : 비디오 파일 삽입
- controls : 플레이어 화면에 컨트롤 바 표시
- autoplay : 오디오나 비디오 자동 실행
- loop : 반복 재생
- muted : 소리제거
- preload : 로딩방법
- width height
- poster="파일이름" : 비디오 재생되기 전 포스터

오디오 파일을 배경 음악처럼 사용하려면 <audio> 태그에서 autoplay 속성과 loop 속성을 지정

2.6 하이퍼링크 삽입

<a> href
- target="_blank" : 링크를 새 탭에서 열기

    <a href="링크할 주소">표시 텍스트 또는 이미지</a>

728x90