HTML 기본 테그
html은 컨덴츠를 구별하고 화면출력을 위하여 다양한 테그가 존재합니다.
HTML 테그란 무엇인가에 대해서 학습니다. 또한, 다양한 테그의 종류에 대해서 알아 봅니다.
글자출력
웹 페이지에서 텍스트를 출력하기 위한 테그들 입니다. 페이지에서 가장 많은 사용 비중을 가지고 있습니다.
문단 구분
글자형태
HTML5는 글자 형태 태그를 사용해 웹 페이지의 글자에 형태와 의미를 부여합니다.
-
b : 굵은 글자 태그
-
i : 기울어진 글자 태그
-
small : 작은 글자 태그
-
sub : 아래에 달라 붙는 글자 태그
-
sup : 위에달라붙는글자태그
-
ins : 밑줄글자태그
-
del : 가운데 줄이 그어진 글자 대그
- blockquote
- pre
- mark
- time
- strong, em
- q
- span
- 기타
글꼴 테그
- i : 이텔릭
- em: 텍스트를 이텔릭체로 강조할때 사용
i vs em
표시결과는 같으나 사용 용도에 따라 차이가 발생합니다. 또한, 용도에 맞게 사용하게되면 웹접근성에 대해서 큰 기여를 하게 됩니다. 웹접근성은 스크린리더(screen reader)를 이용하여 출력할때 테그에 거센 억양으로 낼 수 있도록 강조하듯이 읽어 주게 됩니다.
- b : 텍스트를 진하게 표시할때 사용
- strong: 텍스트를 진하게 강조할때 사용
b vs strong
표시결과는 같으나 사용 용도에 따라 차이가 발생합니다. 또한, 용도에 맞게 사용하게되면 웹접근성에 대해서 큰 기여를 하게 됩니다.
Ruby 문자
아시아 문화권을 위한 글자 출력을 도와주는 테그 입니다.
- ruby : 루비 문자선언태그
- rt : 위에 위치하는 작은 문자 태고
- rp : ruby 태그를 지원할 경우 출력되지 않는 태그
하이퍼링크
하이퍼텍스트는 시용자의 선택에 따라 특정한 정보와 관련된 부분으로 이동할 수 있게 조직화된 문서를 의미합
니다. 앵커 태그는 서로 다른 웹 페이지 사이를 이동하거나 웹 페이지 내부에서 특정한 위치로 이동할 때 사용 합니다.
목록테그
웹 페이지에 빼놓지 않고 등장하는 요소가 있다면 바로 메뉴입니다.
일반적으로 페이지를 이동할때 사용되는 메뉴를 내비게이션 메뉴라고 부릅니다.
네비게이션을 만들때 목록 태그를 많이 사용합니다.
목록테그는 테그간에 상하 관계를 가지게 됩니다. 또한, 이를 작성하는 순서를 지켜야 합니다.
- ul : 순서가 있는 목록을 표현할때 사용합니다.
- ol : 순서가 없는 목록을 표현합니다.
- li : 목록의 항목으로 사용됩니다. ul 테그 및 ol 테그의 하위 요소입니다.
ol 태그는 정렬된 목록을 의미하고, ul 태그는 정렬되지 않은목록을 의마합니다.
마지막으로 li 태그는 목록요소를 의미합니다.
데이터를 표형태로 출력을 합니다. 테이블 태그는 HTML 페이지에서 표를 만들 때 사용하는 태그입니다.
HTML 기본 테그
- 제목테그 : h1~6
- 단락테그 : p
- 줄바꾸기 : br
- 진하게 : b
- 이텔릭체 : i
- 링크 : a