반응형
HTML 태그 요약
<HTML 개요>
| 태그명 | 기능 | 활용 예시 |
| <!DOCTYPE> | 브라우저가 올바르게 웹 페이지를 표시할 수 있도록 HTML 종류와 버전을 표시함 | <!DOCTYPE html> |
| <base> | 링크의 기준이 되는 URL, 향후 body 요소 내에서 상대경로로 표시한 URL은 절대경로처럼 인식됨 - 주요 속성 : href, target |
<base href=”http://www.naver.com/” target=”_blank”> |
| <body> | 웹 브라우저에 실제로 출력해서 보여 주려는 모든 정보를 넣는 부분 | <body>The content of the document</body> |
| <head> | 웹 브라우저를 통해 사용자에게 보이지 않지만, 문서의 정보와 문서 자체에 대한 설명을 담기 위함 | <head><title>문서의 제목<title></head> |
| <html> | 웹 브라우저에게 HTML 문서의 시작과 끝을 알려주기 위함 | <html> <head> <title></title> </head> </html> |
| <link> | 별도의 파일로 이루어진 CSS 스타일을 HTML 문서에 적용하기 위해서 사용함 - 주요 속성 : href, rel |
<link rel=”stylesheet”, href=”example.css”> |
| <title> | 웹 브라우저 상단에 HTML 문서의 제목을 보여줄 수 있음 | <title>문서의 제목<title> |
<HTML에서 텍스트 표현>
| 태그명 | 기능 | 활용 예시 |
| <!--> | 주석(소스의 이해를 돕기 위한 설명)을 첨가하기 위해 사용됨 | <!-- 이 소스코드는 HTML 소스코드입니다. --> |
| <abbr> | 축약형을 표시하기 위함 | <abbr title=” HyperText Markup Language”>HTML</abbr> |
| <address> | 실제 우편물 주소를 표시하기 위함 | <address>서울 양재동 357-2번지</address> |
| <b> | 텍스트를 진하게 표시함. 주목해야 할 단어를 표시하는 용도 | <b> 주목해주세요 </b> |
| <blockquote> | 구분되는 단락을 생성하고 일반 텍스트보다 안쪽으로 들여쓰기를 하는 태그 | <blockquote cite=”http://www.naver.com”> " 인용문을 주로 씀 " </blockquote> |
| <br> | 줄 바꿈을 수행하는 태그 | 줄을 바꾸는 태그<br/> |
| <cite> | 인용 대신에 작품의 제목을 표시함 | <cite>책, 시, 그림 등의 작품 제목을 표시함</cite> |
| <code> | 컴퓨터 소스코드를 표시함 | <code>Hello world</code> |
| <dd> | dl, dt 태그와 함께 사용되어 dt 태그에서 나열된 용어/이름에 대한 설명을 표시하기 위한 태그 | <dl> <dt> 용어 </dt> <dd> 용어에 대한 설명 </dd> </dl> |
| <dfn> | 용어에 대한 정의(definition)를 표시함 | <dfn>용어에 대한 정의를 표시함</dfn> |
| <div> | 컨텐츠를 그룹핑하는 컨테이너로 사용되는 태그. HTML 요소들을 묶어 논리적인 단위의 영역을 구성하는 컨테이너 | <div style=”background-color:red”></div> |
| <dl> | 용어/이름을 정의하고, 정의된 용어/이름에 대한 설명을 제공하는 형태의 목록을 제공하는 태그. (dt, dd 태그와 함께 사용 됨) | <dl> <dt> 용어 </dt> <dd> 용어에 대한 설명 </dd> </dl> |
| <dt> | dl 태그와 함께 사용되어 용어/이름을 나열하기 위한 태그 | <dl> <dt> 용어 </dt> <dd> 용어에 대한 설명 </dd> </dl> |
| <em> | 내용을 강조(emphasis)하기 위한 태그 | <em>이 내용을 강조합니다 </em> |
| <hn> | 단락의 제목(헤딩)을 표현하는 태그, 숫자가 작을수록 제목 크기가 큼 | <h1> 제목크기 1 </h1> <h2> 제목크기 2 </h2> |
| <hr> | 수평선을 그리는 태그, 단락의 주제를 구분하는 용도로 사용됨 | 단락을 구분하자 <hr> |
| <i> | 글자가 기울여진 형태(이탤릭체)로 표시됨 | <i> 다른 분위기나 어조, 구분되어야 하는 텍스트를 표시 </i> |
| <kbd> | 키보드(keyboard)로 입력한 내용임을 표시하기 위한 태그 | <kbd>키보드로 입력한 내용입니다 </kbd> |
| <li> | 부모 태그인 ul, ol태그와 같이 쓰이는 태그로 목록에서 실제 내용을 표현하는 태그 | <ol> <li>HTML</li> <li>CSS</li> </ol> |
| <ol> | 순서 있는 목록(Ordered List)를 만드는 태그. 자식 태그 li와 같이 사용됨 - 주요 속성: type, start, reserved, value |
<ol> <li>HTML</li> <li>CSS</li> </ol> |
| <p> | 단락을 나누어 독립된 단락을 생성하는 태그 | <p>단락을 구분하기 위해 p 태그를 사용</p> |
| <pre> | preformatted text로 문서 작성 과정에서 스페이스바, 엔터키, 공백, 줄바꿈 등을 편집기에서 작성한 형태 그대로 유지하여 웹브라우저로 출력하게 하는 태그 | <pre> pre 태그는 입력 형태를 유지한다! (특수문자가 많으면 유용)</pre> |
| <q> | 짧은 인용구(quotation)을 표시하기 위한 태그 | <q> 인용구입니다 </q> |
| <s> | 글자 가운데를 통과하는 수평줄이표시됨 | <s> 정확하지 않은 내용입니다 </s> |
| <samp> | 프로그램의 샘플(sample) 출력을 표시 | <samp> 프로그램의 샘플 출력임 </samp> |
| <small> | 글자가 기본 크기보다 작은 크기로 표시됨 | <small>부수적인 해설이나 이용조건, 법적공지 등에 사용함</small> |
| <span> | 인라인 요소로서 텍스트를 위한 컨테이너로 사용되는 태그 | <span style=”background-color:red”>텍스트</span> |
| <strong> | 중요한(important) 내용을 표시하기 위한 태그 | <strong>이 내용은 반드시 알아두세요 </strong> |
| <sub> | 글자가 아래첨자로 표시됨 | 글자를 <sub>아래첨자</sub>로 표시 |
| <sup> | 글자가 위첨자로 표시됨 | 글자를 <sup>위첨자</sup>로 표시 |
| <u> | 글자에 밑줄이 표시됨 | <u> 글자에 밑줄이 표시됩니다 </u> |
| <ul> | 순서 없는 목록(Unordered List)를 만드는 태그, 자식 요소 li와 같이 씀 | <ul> <li>HTML</li> <li>CSS</li> </ul> |
| <var> | 변수를 표시하는 태그 | <var>변수를 표시합니다</var> |
반응형
'Programming' 카테고리의 다른 글
| VSCODE 주석 단축키 안 먹힘 (0) | 2022.10.10 |
|---|---|
| HTML 태그 요약2 (0) | 2020.11.29 |
| 스크립트를 이용한 Manifest 자동 생성 (Shell+Python) (0) | 2020.01.10 |
| 개발할때 수정한 함수명 추출 (Git diff) (0) | 2018.06.26 |