[HTML] 텍스트 태그 / 목록 태그

[ 이전 글 ]에 이어서 < 태그 >들

---

🔶 텍스트 태그

[ 텍스트 굵게 만들어 주는 태그 ]

 

<strong> </strong> 태그 - 굵게 표시, 중요한 내용이라서 강조할 때 사용

<b> </b> 태그- 그냥 굵게 표시

➡️ 화면으로 볼 때 차이는 없음

 

[ 이텔릭체로 만들어주는 태그 ]

 

<em> </em> 태그- 이텔릭체로 표시, 특정 부분 강조

<i> </i> 태그 - 그냥 이텔릭체 표시

➡️ 화면으로 볼 때 차이는 없음

 

[ <q> 태그 - 인용 내용 표시 ]

 

- 줄바꿈 없이 다른 내용과 한줄에 인용 내용 표시 

- 인용 내용 앞뒤에 따옴표(" ") 추가됨

- cite = "url" (출처)를 넣어줘야함 ex) <q cite= "https://mingtory.tistory.com">

 

화면에서 볼 때

코드로 볼 때

 

[<mark> 태그 - 형광펜 효과 ]

- 태그로 묶은 부분의 배경색이 노랑으로 표시됨

 

[ 영역 묶기 태그 ]

 

<span> </span> 태그 - 줄 안에서 (인라인) 묶기

<div> </div> 태그 - 줄바꿈 처리 후 (블록) 단락으로 묶어서 나타난다

 

화면에서 볼 때

코드로 볼 때

 

[ 동아시아 글자에 주석 표시하는 태그 ] 

<ruby> </ruby> 태그

- 동아시아 일부 지역의 언어에서 일본의 히라가나와 같이 해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려줄 때 사용

- 발음이나 설명이 필요한 한 개 이상의 문자로 구성

 

<rt> </rt> 태그

- 문자의 발음이나 설명

- <ruby> 태그 안에 있어야 함

 

화면에서 볼 때

코드로 볼 때

---

🔷 목록 태그

<ul>, <li> - 순서없는 목록

    - 각 학목 앞에 불릿이 붙여짐

 

<ol>, <li> - 순서가 있는 목록 

    - type 속성 : 불릿 앞의 마커의 종류 조정 ➡️ 1 , a, A, i, I 

    - start 속성 : 마커의 시작값을 명시함 ➡️ 숫자로 쓰면 됨

    - reserved 속성 : 순서를 내림차순으로 명시함 

❗️ </li> 태그를 생략해도 다음에 오는 <li> 태그를 만나면 자동으로 </li> 태그가 있는 것처럼 인식함 

화면으로 볼 때

초록색 박스는 순서 ❌     빨간색 박스는 순서 ⭕️ // 코드로 볼 때

 

[ <dl>,<dt>,<dd> - 설명 목록 ]

- <dl> 안에 <dt>태그안에 있는 단어를 <dd>태그 안에서 설명해줌

 

화면에서 볼 때

코드로 볼 때