문서 구조 태그
- <html></html>
- <head></head>
- <body></body>
<html> 태그
<html></html>- 문서의 시작과 끝을 표시
- 크게 두 부분으로 구성되어 있음
- <head></head>
- <body></body>
<head> 태그 및 포함되는 태그들
- 웹 브라우저 화면에는 보이지 않지만
- 웹 브라우저가 알아둬야 할 문서 정보 포함
<meta>태그- 문자 인코딩, 문서 키워드, 문서 정보 등
<meta charset="UTF-8"><link>태그- 외부 리소스 연결
<link rel="stylesheet" href="myCss.css"><title> </title>: 문서 제목<script> </script>: 자바 스크립트 코드 삽입
<body> 태그
<body></body>문서의 몸통 부분
실제 화면에 보이는 문서 내용 포함
대부분의 크기가 <body>와 </body> 사이에 위치
종료 태그 </body> 뒤에 다른 태그를 위치시키지 않음
줄 바꿈 / 공백 문자 사용하지 않는 경우
- 줄이 바뀌지 않고 스페이스가 생지 않음
- 스페이스는 기본 1개
- 줄 바꿈 태그:
<br> - 공백(스페이스) :
(1개가 스페이스 1개) (여러 개 사용)
텍스트 관련 태그
- 제목 :
<h1></h1>(h2~h6) - 본문 :
<p></p> - 텍스트 형태 (장식 효과)
<b>,<i>,<strong>,<em>
- 앵커 태그 :
<a></a>(텍스트 클릭할 때 이동)
<h1> ~ <h6> 태그
- <h1> 제목태그 </h1>
- Headline의 약어
- 제목으로 사용
- 줄바꿈으로 출력
- 크기는 1 ~ 6 : 1 < 6
h.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H 태그</title>
</head>
<body>
<h1>제목 표시 (크기1)</h1>
<h2>제목 표시 (크기2)</h2>
<h3>제목 표시 (크기3)</h3>
<hr>
<h4>제목 표시 (크기4)</h4>
<h5>제목 표시 (크기5)</h5>
<h6>제목 표시 (크기6)</h6>
<!-- html 주석 표시 입니다 -->
<!--
여러줄 주석처리 하는 방법
-->
</body>
</html><p> 태그
<p></p>- 문단을 나누는 태그(paragraph)
- 새로 줄바꿔서 시작
- <br> 태그를 2번 사용한 만큼의 간격
- <p> 태그를 여러 번 연속으로 사용해도 행 간격이 더 이상 벌어지지 않음
<br> 태그
- 줄 바꿈 태그
- 여러 줄을 바꾸려면 여러 번 사용
<hr> 태그
<hr>- 수평 줄 표시
주석처리
<!-- --->
텍스트에 장식 효과를 주는 태그
<b></b>,<strong></strong>: 텍스트 강조<i></i>,<em></em>: 이탤릭체<sub></sub>: 아래 첨자<sup></sup>: 아래첨자<big></big>: 위첨자<small></small>: 현재 설정된 크기보다 2포인트 작게<ins></ins>: 밑줄 표시<del></del>,<strike></strike>: 취소선 (글자 가운데에 선)
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>텍스트 관련 태그</title>
</head>
<body>
<h3>h3: 텍스트에 장식 효과를 주는 태그들</h3>
<b>b : 굵은 표시 (텍스트 강조)</b><br>
<em>em : 텍스트 강조</em><br>
<i>i : 이탤릭체 (텍스트 강조)</i><br>
텍스트<sub>sub: 아래 첨자</sub>
</body>
</html><pre> 태그
- 입력한 형태 그대로 출력
pre.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>pre 태그</title>
</head>
<body>
<pre>
입력한 형식 그대로 출력
작성한 대로 보여주기
시작은 여기 부터
public void sum(int x, int y){
int sum = x + y
}
</pre>
</body>
</html><span>
<span></span>- 줄바꿈 없이 영역 묶기
- 태그 그 자체로는 아무 의미가 없으나, 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용하려할 때 주로 사용
- 대한민국 <span>서울</span>
하이퍼링크 태그(<a>)
- 하이퍼링크로 문서를 연결하는 <a> 태그 (앵커 태그)
- 원하는 문서나 사이트로 연결
- 한 문서 내 다른 영역으로 이동 (한 페이지 안에서 지정된 영역으로 이동)
<a href="파일 경로" target="연결된 문서가 보여줄 위치(프레임 영역)">- 사이트로 이동: <a href="http://google.com">
- 다른 문서로 이동 : <a href="pre.html">
- 문서 내 다른 영역으로 이동 : <a href="#jQuery"> id가 jQuery인 영역으로 이동 </a>
- target
- 하이퍼링크의 대상인 문서를 어디에서 보여줄지 지정
- blank: 새 창에서 출력
- iFrame: 이름
hyperLink.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>하이퍼링크 : a 태그</title>
</head>
<body>
<h3>사이트로 이동</h3>
<a href="http://www.naver.com"> 네이버 사이트로 이동</a>
<hr>
<h3>다른 문서로 이동</h3>
<a href="HelloWorld.html">Hello 페이지로 이동</a>
<a href="join.html"> 회원 가입</a>
<hr>
<h3>문서 내 다른 영역으로 이동</h3>
<a href="#JavaScript">id가 JavaScript인 영역으로 이동</a><br>
<a href="#jQuery">id가 jQuery인 영역으로 이동</a><br>
<a href="#css">id가 css인 영역으로 이동</a><br>
<hr>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="JavaScript">자바스크립트</h3>
<p>웹 페이지를 향상시키고 동적인 화면을 구현하기 위해 사용되는 스크립트 언어</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="jQuery">jQuery</h3>
<p>자바스크립트 작업을 쉽고 빠르게 처리할 수 있도록 도와주는 자바스크립트 라이브러리</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h3 id="css">css</h3>
<p>Cascading Style Sheet : 속성을 이용해 웹 디자인 요소를 제어하는 기능 제공</p>
</body>
</html>'Front > HTML' 카테고리의 다른 글
| HTML - 문서 삽입 태그, 오디오/비디오 태그 (0) | 2021.12.05 |
|---|---|
| HTML - 이미지 태그 (0) | 2021.12.05 |
| HTML - 테이블 태그 (0) | 2021.12.05 |
| HTML - 목록 태그 (0) | 2021.12.05 |
| HTML이란? / 기본 태그 종류 (0) | 2021.12.05 |
