1. 태그는 소문자로
ex) <img src="abc.jpg">
2. 여는 태그와 닫는 태그를 정확히 입력
- <img>나 <br> 태그처럼 닫는 태그가 없는 태그도 있음 (단일 태그)
3. 적당하게 들여쓰기
4. 태그는 속성과 함께 사용
- <태그 속성="속성 값" 속성="속성 값">
5. 인코딩 방식은 utf-8로 한다.
: 한글, 영문뿐만 아니라 모든 언어를 표시할 수 있는 언어세트
6. 웹 문서에서 특수 문자 및 특수 기호 사용하기
<특수 기호>
화면에 표시되는 모습 | 특수 기호 |
& | & |
(공백 한 칸) | |
< | < |
> | > |
" | " |
| | | |
( | ( |
) | ) |
, | , |
- | - |
` | ´ |
- 따옴표나 꺾쇠 괄호를 화면에 그대로 사용해야 할 때
- 공백 처리 여러 번 해야할 때 (스페이스 아무리 눌러도 한 칸만 표시됨,,)
<HTML 기본 구조>
- <html> : 시작 태그
- <head> : 브라우저 정보 제공
① <title> : 문서 제목
② <meta> : 문자 인코딩 및 문서 키워드, 요약 정보
- <body> : 실제 브라우저에 표시될 내용 입력
<자주 쓰는 기본 태그>
① <hn> : 제목 텍스트. 제목 표시
<hn> 제목 </hn>
- 일반 텍스트보다 크기가 크고 진하게 표시
- 제목 크기에 따라 <h1>~<h6> : h1>h2>h3>h4>h5>h6
- <p> 태그와 비슷하지만 <p>는 일반 텍스트, <hn>은 제목 텍스트
② <p> : 텍스트 단락 생성
<p> 텍스트 </p>
- 줄 바꿈이 없는 텍스트 단락은 화면 너비를 넘어갈 경우 자동으로 아래 줄로 넘겨 표시
③ <br> : 줄 바꾸기
- 닫는 태그 x
④ <b> : 텍스트를 진하게 표시
<b> 텍스트 </b>
⑤ <i> : 텍스트를 이탤릭체로 표시
<i> 텍스트 </i>
⑥ <a> : 웹 문서나 외부 사이트 연결
<a href="http://www.~.com"> 바로가기</a>
- 링크로 사용할 텍스트나 이미지를 <a> 태그와 </a> 태그로 감싸줌
- href 속성 이용하여 주소 지정
⑦ 주석 : <!-- 주석 --> 또는 /*와 */ 사이