Web

까먹쟁이 나를 위한 태그 정리

codingtori 2023. 3. 9. 23:52

<!DOCTYPE html>                      문서 유형을 지정하는 태그 : 현재문서가 html 이다!

<html>                                        html 파일의 시작과 끝 표시                                                 

                                                                                                                           +) lang=""  :   사용할 언어 표시

     

<head>                                       문서 정보가 들어있는 태그

             <meta>                          웹 문서 관련 정보 지정; 키워드, 설명, 제작자, 글자표시를 위한 인코딩 지정

             <title>                            문서 제목; 제목 표시줄에 표시되는 내용

 

<body>                                       화면에 보이는 내용

 

 

 

 

 

문서구조태그

 

<header>                                     헤더 영역

     <nav>                                      같은 웹 문서 안에서 다른 위치로 연결 /다른 웹 문서로 연결하는 링크 생성

<main>                                        메인 콘텐츠

     <article>                                 독립된 웹 콘텐츠 항목

     <section>                                몇 개의 콘텐츠를 묶는 용도                                                                     

<aside>                                       사이드바

<footer>                                       푸터 영역 ; 사이트 제작정보, 저작권 정보, 연락처

     <div>                                       id 나 class 속성을 이용하여 문서구조를 만들거나 스타일 적용

 

 

 

 

 

텍스트 관련 태그

 

<hn>                                             제목 태그; 숫자가 커질수록 크기가 작아짐

<p>                                                텍스트 단락 생성; 텍스트 앞 뒤로 빈 줄 생성

<br>                                              줄바꿈 태그

<blockquote>                                인용문

<strong>                                        텍스트 굵게 표시; 중요한 내용 강조

<b>                                                텍스트 굵게 표시; 단순 글자만

<em>                                             이탤릭체 ; 특정부분 강조

<i>                                                 이탤릭체 ; 단순히 구별위해

 

<abbr>                                                 줄임말 표시

<cite>                                                  참고 내용 표시

<code>                                                컴퓨터 인식을 위한 소스코드

<small>                                               부가 정보 처럼 작게 표시해도 되는 텍스트

<sub>                                                  아래 첨자 표시

<sup>                                                  위 첨자 표시

<s>                                                      취소선 표시

<u>                                                      밑줄 표시

<ins>                                                   공동 작업 문서에서 새로운 내용을 삽입+밑줄 생성

<del>                                                   공동 작업 문서에서 기존 내용을 삭제

 

 

 

 

 

목록 태그

 

<ol>                                              순서있는 목록 생성

        <li>                                             

<ul>                                              순서없는 목록 생성

        <li>                                             

<dl>                                              설명 목록 생성

        <dt>                                                                     - 이름 지정

        <dd>                                                                    - 값 지정

 

 

 

 

 

표 태그

 

<table>                                          표의 시작과 끝

<caption>                                       표의 제목

<th>                                               표의 제목 행에 셀 생성

<tr>                                                행 생성

<td>                                               셀 생성

 

표의 구조

<thead>                                         표의 제목 지정

<tbody>                                         표의 본문 지정

<tfoot>                                           표의 요약 지정

<col>                                             열 1개 지정

<colgroup>                                    여러 열 지정; col 태그 2개 이상

 

 

 

 

 

이미지 태그

 

<img src="이미지 파일 경로" alt="대체용 텍스트">

 

 

 

 

 

멀티미디어 삽입 태그

 

<object width="너비" height="높이" data="파일"></object>

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

 

 

 

 

 

 

오디오와 비디오 파일 삽입

 

<audio src="오디오 파일 경로"></audio>

<video src="비디오 파일 경로"></video>

 

 

 

 

 

링크 삽입

 

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

 

 

 

 

 

 

<form [속성="속성값"]>여러 폼 요소</form>                         

                                                 입력받은 자료를 어떤 방식으로 서버로 넘길 것인지, 서버에서 어떤 프로그램을 이용해 처리할 것인지 지정

<fieldset [속성="속성값"]> </form>                          하나의 폼 안에서 여러 구역을 나누어 표시(그룹화)  

<legend> </legend>                                                그룹에 제목을 붙일 수 있음

<label>                                                                    폼 요소에 레이블 붙임_폼 요소와 레이블 텍스트 서로 연결

 

 

 

 

 

 

 

 

공부하는 대로 업뎃중...........