본문 바로가기

웹 개발/HTML

#1 기본 사항 / 자주 쓰는 태그

1. 태그는 소문자로 

  ex) <img src="abc.jpg">

2. 여는 태그와 닫는 태그를 정확히 입력

  - <img>나 <br> 태그처럼 닫는 태그가 없는 태그도 있음 (단일 태그)

3. 적당하게 들여쓰기

4. 태그는 속성과 함께 사용

  - <태그 속성="속성 값" 속성="속성 값">

5. 인코딩 방식은 utf-8로 한다.

  : 한글, 영문뿐만 아니라 모든 언어를 표시할 수 있는 언어세트

6. 웹 문서에서 특수 문자 및 특수 기호 사용하기

<특수 기호>

화면에 표시되는 모습 특수 기호
& &amp;
(공백 한 칸) &nbsp;
< &lt;
> &gt;
" &quot;
| &#124;
( &#40;
) &#41;
, &#44;
- &#45;
` &acute;

  - 따옴표나 꺾쇠 괄호를 화면에 그대로 사용해야 할 때

  - 공백 처리 여러 번 해야할 때 (스페이스 아무리 눌러도 한 칸만 표시됨,,)

 

<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 속성 이용하여 주소 지정

 

⑦ 주석 : <!-- 주석 --> 또는 /*와 */ 사이