1_글자태그
<hn> : 제목을 입력할 때 사용하는 태그
<h3><hn> : 제목을 입력할 때 사용하는 태그</h3>
<h1>h1 태그입니다.</h1>
<h2>h2 태그입니다.</h2>
<h3>h3 태그입니다.</h3>
<h4>h4 태그입니다.</h4>
<h5>h5 태그입니다.</h5>
<h6>h6 태그입니다.</h6>
<hr> : 줄 바꾸면서 수평선 넣는 태그
<br> : 줄 바꿈 태그
<p> : 단락을 구문하는 태그
문단을 나누는 태그
문단 영역을 나누는 태그로는 p태그와 pre태그가 있다.
p태그는 문단 영역을 나누는 태그 이지만 한 개의 공백만 표시하며
줄 바꿈 입력을 별도의 태그로 지정해주어야 한다.
<pre> pre 태그는 여러 칸 띄우기
혹은 줄 바꿈 등을 포함하여
입력한 내용 그대로 표현하는 태그이다. </pre>
<strong> : 글자를 굵게 표시하는 태그
*** 웹 접근성 ***
b는 단순한 스타일만 변경한다면
strong은 실제로 중요한 내용이라는 의미를 담고 있어
스크린 리더를 사용하는 경우 음성에서도 강조가 됨
em(emphasized) 역시 강조를 의미하여
스크린 리더를 사용하는 경우 차이가 있음
<i> : 글자를 기울이는 태그
<em> : 글자를 기울이는 태그
<blockquote> : 인용문구를 나타내는 태그
<blockquote cite="https://www.naver.com">
- cite 속성 : 인용된 사이트 주소를 작성
직접 표시되지는 않지만 검색 엔진에는 노출됨
</blockquote>
<q> : 인용문구를 나타내는 태그
<mark> : 형광펜 효과를 나타내는 태그
<u> : 글자에 밑줄을 긋는 태그
<small> : 글자를 작게 표시하는 태그
<sub> : 기본 글자에 아래 첨자를 나타내는 태그
<sup> : 위 첨자를 나타내는 태그
<s> : 글자에 취소선을 넣는 태그
<abbr> : 마우스 오버 시 툴팁 형태로 출력하는 태그
<abbr title="Internet of Things">IoT</abbr>란
각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술이다.
<cite> : 참고한 웹문서를 이텔릭체로 나타내는 태그
<p>
참고사이트 : <cite>https://www.naver.com</cite>
</p>
2_목록관련태그
<ul> : 순서 없는 목록 태그
<li> : 리스트 요소 등록
- html5
- css3
- javaScript
<ol> : 순서 있는 목록 태그
순서 있는 목록 태그의 숫자는 속성을 이용하여 변경할 수 있음
기본 값은 숫자로 되어 있으며, 1부터 시작함
영문 소문자로 표기 : type 속성의 속성 값을 소문자 "a"로 설정
영문 대문자로 표기 : type 속성의 속성 값을 대문자 "A"로 설정
로마 숫자 소문자로 표기 : type 속성의 속성 값을 소문자 "i"로 설정
로마 숫자 대문자로 표기 : type 속성의 속성 값을 대문자 "I"로 설정
시작 값 변경하기 : 시작 번호를 5부터 시작
<ol TYPE="1" start="5">
<li>html5</li>
<li>css3</li>
<li>javaScript</li>
</ol>
역순으로 항목 표기하기
: reversed 속성을 이용하여 역순으로 항목 번호를 표시할 수 있음
<ol TYPE="1" reversed="reversed">
<li>html5</li>
<li>css3</li>
<li>javaScript</li>
</ol>
<dl> : 정의 목록 태그
<dt> : 목록의 제목을 적는 태그
<dd> : 목록에 대한 설명을 적는 태그
'백엔드 과정 > html css' 카테고리의 다른 글
[CSS] CSS Diner 게임 (0) | 2022.02.09 |
---|---|
[HTML5] 문서 형식 선언 <!DOCTYPE html> (0) | 2022.02.08 |
[HTML5] HTML 개요 (0) | 2022.02.08 |