문자셋 (캐릭터 셋)

• HTML 문서를 표현할 때 해당 HTML 문서가 어떠한 문자셋을 가지고 있는지 표현하는 방법
• 대한민국에서 주로 사용하는 캐릭터 셋은 UTF-8

문자셋의 종류

1. ASCII : 최초의 문자 셋. 127개의 영문자, 숫자로 이루어져 있다.
2. ANSI : 윈도우즈에서 만들어진 문자셋 총 256개 지원
3. UTF-8 : HTML5 기본 문자셋. 세상에 있는 거의 대부분의 문자를 표현할 수 있다.

텍스트 태그

1. 제목태그 / H

<h1>안녕</h1>
<h2>안녕</h2>
<h3>안녕</h3>
<h4>안녕</h4>
<h5>안녕</h5>
<h6>안녕</h6>
<!-- 글씨가 점점 작아진다 -->

• 제목 태그는 일반적으로 제목의 크기를 조정하지만 웹 페이지 제작 시 각각 태그에 기본 스타일을 적용해서 다른 글꼴들을 표현하거나 혹은 라인 별로 다른 스타일을 적용하고 싶을 때 사용하는 Front-end 개발자들도 많은 편이다.

2. 글자형태(단락 + 서식) 태그

ex) b, strong, i, em, mark, del, p, br, hr, blockquote

• 글자 태그들 중에서 자주 사용되는 태그들은 p, br, hr, pre 정도이다.
• 대부분 CSS를 통해서 바꾸는 형식으로 웹 페이지 스타일을 지정하기 때문이다.
• 특히 i 태그의 경우는 사용할 일이 거의 없기 때문에 웹 페이지의 외부 아이콘이나 외부 이미지 호출 시 사용하기도 한다.

p태그와 pre태그

• p태그 : 단락을 표현하는 태그
  ---> p태그 내에서 작성된 띄어쓰기와 줄 나누기는 오직 하나의 띄어쓰기로만 적용된다.

p태그 vs pre태그 차이

• 결론적으로 개행 적용과 미적용의 차이 (pre는 개행을 적용할 수 있다.)
• 일반적으로 HTML 내부의 컨텐츠는 enter를 이용하던 공백을 많이 주던 무조건 공백 1칸으로 인식하는 특징이 있다.
• HTML은 개행을 표현하기 위해 br 태그를 사용한다.

Entity (엔티티)

• 미리 예약되어있는 몇몇 문자들로 다른 말로 HTML예약어 라고도 부른다.

예약어 : 이미 기능이 있는 문자

-HTML에서는 크롬 등의 웹 브라우저가 평소와는 다른 의미로 해석한다.

엔티티 사용예시

&엔티티명;
&#엔티티숫자;

HTML에서 자주 사용하는 엔티티

  : 줄바꿈 없는 공백
&lt;   : 보다 작은 ( < )
&gt;   : 보다 큰 ( > )
&amp;  : and 기호
&quot; : 큰 따옴표
&apos; : 작은 따옴표
<!-- 특수문자 엔티티 -->
&reg;  : 등록상표
&cent; : 센트
&pound; : 파운드
&euro  : 유로
&copy  : 저작권 표시

List 태그

• list(목록) : 여러 요소를 일렬로 나열한 목록이나 명단
• HTML에서 리스트를 표현하는 태그는 ul, ol 태그가 있다.

ul 태그

• ul태그의 경우에는 리스트를 표현할 때 사용하기도 하지만 웹 페이지의 메뉴를 구성할 때도 사용한다.

<!-- 순서가 없는 리스트 -->
<ul">고양이과 동물
    <li>호랑이</li>
    <li>사자</li>
    <li>퓨마</li>
</ul>

<!-- 순서가 없는 리스트
     스타일을 적용시킬 수 있다.
     또 다양한 모양으로도 바꿀 수 있다.-->
<ul style="list-style-type: none;">고양이과 동물
    <li>호랑이</li>
    <li>사자</li>
    <li>퓨마</li>
</ul>

ol 태그

<!-- 2. 순서가 있는 리스트(ol) -->
<ol>개과 동물
    <li>늑대</li>
    <li>코요테</li>
    <li>오소리</li>
</ol>