문서 구조 태그
- <html></html>
- <head></head>
- <body></body>
<html> 태그
- <html></html>
- 문서의 시작과 끝 표시
- 크게 두 부분으로 구성되어 있음
- <head></head>
- <body></body>
<head> 태그 및 포함되는 태그들
- 웹 브라우저 화면에는 보이지 않지만
- 웹 브라우저가 알아두어야 할 문서 정보 포함
- <meta> 태그
- 문자 인코딩, 문서 키워드, 문서 정보 등
- <meta charset="UTF-8">
- <link> 태그
- 외부 리소스 연결
- <link rel=”stylsheet” href=”myCss.css”>
- <title></title> : 문서 제목
- <script></script> : 자바스크립트 코드 삽입
<body> 태그
- <body></body>
- 문서의 몸통 부분
- 실제 화면에 보이는 문서 내용 포함
- 대부분의 태그가 <body>와 </body> 사이에 위치
- 종료 태그 </body> 뒤에 다른 태그를 위치시키지 않음
공백 / 괄호 등의 특수 문자 사용
- 연속된 여러 개의 공백은 하나로 인식 -> 여러 개의 공백 입력을 원한다면 특수 문자 사용해야 함
- 공백 :
- < : <
- < : >
- & : &
텍스트 관련 태그
- 제목 : <hn></hn> (예: <h1></h1>)
- 본문 : <p></p>
- 앵커 태그(하이퍼링크) : <a></a> (텍스트 클릭 시 이동)
- 텍스트 장식 효과, 글자 모양 지정 : <b><i><strong><em> 등
제목 태그
- <h1>제목</h1>, <h2>제목</h2> 등과 같이 사용
- Headline의 약어
- 제목으로 사용
- 기본 줄바꿈 되어 출력
- h 뒤의 숫자로는 1~6의 값이 올 수 있으며, 1에 가까울수록 크기가 크고 6에 가까울수록 크기가 작음
본문 태그
- <p>본문 내용</p>와 같이 사용
- 문단을 나누는 태그 (paragraph)
- 새로 줄바꿔서 시작
- <br> 태그를 2번 사용한 만큼의 간격
- <p> 태그를 여러 번 연속적으로 사용해도 행 간격이 더 이상 벌어지지 않음 (아래 두 코드는 같은 결과)
<p>내용1111111</p>
<p>내용2222222</p>
<p></p>
<p></p>
<p></p>
<p>내용3333333</p>
<p>내용1111111</p>
<p>내용2222222</p>
<p>내용3333333</p>
<br> 태그
- 줄 바꿈 태그
- 여러 줄을 바꾸려면 여러 개 사용 -> <br><br><br>
<hr> 태그
- <hr>
- <hr></hr>
- 수평 줄 표시
주석 태그
- <!-- 주석 -->
텍스트에 장식 효과를 주는 태그
- <b>..</b> : 텍스트 강조
- <strong>..</strong> : 텍스트 강조
- <i>..</i> : 이탤릭체
- <em>..</em> : 이탤릭체
- <sub>..</sub> : 아래첨자
- <sup>..</sup> : 위첨자
- <big>..</big> : 현재 설정된 크기 보다 2포인트 크게
- <small>..</small> : 현재 설정된 크기 보다 2포인트 작게
- <ins>..</ins> : 밑줄 표시
- <del>..</del> : 취소선
- <strike>..</strike> : 취소선
<pre> 태그
- 입력한 형태 그대로 출력
<span> 태그
- <span></span>
- 줄바꿈 없이 영역 묶기
- 태그 그 자체로는 아무 의미가 없음
- 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일 적용 시 주로 사용
하이퍼링크 태그
- <a> 태그 (앵커 태그)
- 하이퍼링크로 문서를 연결
- 원하는 문서나 사이트로 연결
- 한 문서 내 다른 영역으로 이동 (한 페이지 안에서 지정된 영역으로 이동)
<a href="파일 경로" target="연결된 문서가 보여줄 위치(프레임영역)">
<!-- 사이트로 이동 -->
<a href="http://www.naver.com">
<!-- 다른 문서로 이동-->
<a href="newMember.html">
<!-- 문서 내 다른 영역으로 이동 -->
<a href="#jQuery">id가 jQuery인 영역으로 이동</a>
...
<h3 id="jQuery">- target
- 하이퍼링크의 대상인 문서를어디에서 보여줄지를 지정
- _blank : 새 창에서 출력
- iFrame 이름
'Frontend > HTML' 카테고리의 다른 글
| 입력 양식 태그 (0) | 2021.12.02 |
|---|---|
| 이미지/이미지 맵 태그 & 문서 삽입 태그 & 오디오/비디오 태그 (0) | 2021.12.02 |
| 목록 태그 & 테이블 태그 (0) | 2021.12.02 |
| 태그(tag)의 개념 및 HTML의 기본 태그들 (0) | 2021.12.02 |
| HTML (Hyper Text Markup Language) (0) | 2021.12.02 |