-
태그요약 Part. 1HTML 2022. 11. 21. 16:18반응형
<html> </html>
- HTML 문서는 <html>과 </html>로 둘러싸인다. 브라우저에게 이 파일의 내용이 HTML이라고 선언한다.
<head> </head>
- 웹 페이지에 대한 정보를 저장하고 있는 곳이다.
<body> </body>
- 웹 페이지의 모든 내용이 여기에 표시된다. 브라우저 안에 표시되는 부분이다.
HTML 문서 작성시 주의사항
- 태그 이름은 대소문자를 구별하지 않는다.
- 하나의 요소 안에 다른 요소가 포함될 수 있다.
- 시작 태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급한다.
<!DOCTYPE>
- 브라우저가 올바르게 웹 페이즈를 표시할 수 있도록 돕는다.
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>- 웹 페이지의 머리기사이다.
- 폰트의 크기에 따라서 쓴다. (숫자가 작을수록 글자의 크기가 크다.)
<em></em>- "emphasized"의 약자로 텍스트를 강조할 때 사용하는 태그이다.
<img src="..(상위폴더)/파일명" height="높이 크기" width="너비의 크기"> ex) <img src="coffee.gif" height=200 width=300>- 페이지에 이미지를 삽입시킬 때 사용한다.
<p></p>- 단락을 나타내는 태그로, 단락이란 전체 글에 내용에 따라 나눌 때, 하나하나의 짧은 이야기 토막을 말한다.
- 웹 브라우저는 자동적으로 단락의 전후에 빈 줄을 추가한다.
<br>- 새로운 다락을 시작하지 않고 줄 바꿈을 원할 때 사용하는 태그이다.
- 종료 태그를 가지지 않는다.
<pre></pre>- 프로그래머가 입력한 그대로 화면에 표시하려고 할 때 사용하는 태그이다.
텍스트서식
- <b> </b> : 두꺼운(bold) 텍스트
- <strong> </strong> : 중요한 텍스트
- <i></i> : 이탤릭체(italic) 텍스트
- <em></em> : 텍스트 강조(emphasize)
- <mark></mark> : 텍스트에 마킹하기(mark)
- <small> </small> : 작은(small) 텍스트
- <del> </del> : 텍스트 삭제(delete)
- <ins> </ins> : 텍스트 삽입(insert)
- <sub> </sub> : 텍스트 아래 기입(subscript)
- <sup> </sup> : 텍스트 위 기입(superscript)
- <code> </code> : 텍스트가 코드임을 표시한다.
수평선 <hr>- 브라우저의 너비만큼 수평선을 그릴 수 있다.
특수문자
코드 표현 문자 용도 < < 꺽쇠 > > 꺽쇠 공백 ' ' (1칸 space) 공백 & & 앰퍼센드 " " 큰따옴표 리스트
ex) 번호 없는 리스트 <ul> <li> 리스트목록1 </li> <li> 리스트목록2 </li> <li> 리스트목록3 </li> </ul> 번호 있는 리스트 ex) 숫자로 번호를 나타내는 리스트 <ol> <li> 리스트목록1 </li> <li> 리스트목록2 </li> <li> 리스트목록3 </li> </ol> ex) 문자로 번호를 나타내는 리스트 <ol type="a"> <li> 리스트목록1 </li> <li> 리스트목록2 </li> <li> 리스트목록3 </li> </ol> ex)정의리스트 (항목들과 함께 항목의 설명이 표시되는 리스트) <dl> <dt> 항목의 단어 </dt> <dd> 항목의 단어를 설명하는 곳 </dd> </dl>링크
범위 예제 설명 절대 경로 href="http://www.google.com/" 다른 웹 사이트의 페이지 상대 경로 href="../doc/info.html" 웹 사이트 안에서의 다른 페이지 내부파일 href="#anchor1" 현재 페이지 안의 다른 위치 target 속성
target 설명 _blank 새로운 윈도우에서 새로운 페이지를 연다. _self 현재 윈도우에 새로운 페이지를 적재한다. _parent 부모 프레임에 새로운 페이지를 적재한다. _top 현재 윈도우에 새로운 페이지를 적재하고 모든 프레임을 취소한다. 반응형