[UI/UX]coding 기초(4) - HTML- Inline태그

Dohee·2024년 11월 25일
post-thumbnail

Inline태그
inline 태그들은 가로로 출력되고, 줄의 성격을 가지고 있기 때문에 넓이 높이를 적용할 수 없고 여러개 출력시 태그 사이에 공백 1칸을 포함한다는 특징이 있다.

1. < b>, < strong> : 글자의 모양을 굵게 지정하는 태그 ★

글자의 모양을 강조할 때 굵게 표시하는 태그이다.
b태그는 글자를 단순하게 꾸미는 용도로 사용하고, strong태그는 시각장애인에게 화면 낭독기를 통해 중요한 내용을 전달하는 태그로 두 태그의 모양은 같지만 사용하는 용도가 다르다.

2.< i>, < em> : 글자의 모양을 이탤릭체로 기울여 표현하는 태그

em태그는 강조된 부분이나, 저자의 생각 등을 강조할때 사용하고, i테그는 기술용어, 외국어, 등장인물의 생각 등 주위와 구분해야하는 내용을 강조할 경우 사용한다.하지만 실제로 마크업작업을 할 때에는 크게 용도별로 구분하여 사용하지 않는다.

3. < q> : 인용 내용을 표시
짧은 인용 내용을 표시할때 사용하는 태그로 출력하면 내용의 시작과 끝에 ""(큰 따옴표)가 함께 출련된다. 하지만 잘 사용하지 않는 태그이다.

4. < mark> : 형광펜 효과
검색어 등의 내용 중 일부를 강조하고 싶은 경우 사용되던 태그이다.
하지만 오히려 가독성이 떨어지고 자폐장애를 앓고 있는 사람들에게 발작을 일으킬 수 있는 위험이 있어 지금은 잘 쓰이지 않는다.

5. < span> : 줄 바꿈없이 글자 영역을 묶어 꾸밀때 사용하는 태그 ★★★★★

span태그는 css속성을 적용하기 이전에는 디자인적으로 본문 글자와 전혀 다른 모습은 볼 수 없다.하지만 span으로 묶인 부분을 css를 처리하면 글자를 다양하게 꾸밀 수 있고 햄버거 버튼 등 클릭하면 모양이 바뀌는 아이콘 처리를 할 수도 있고, 작은 배경요소를 코드로 처리할때도 많이 사용된다.

6. < ruby> : 동아시아의 글자를 표현하는 태그
ruby태그는 주로 동아시아 국가들의 주석(발음)을 함께 표기하기 위해 사용하는 태그다.
한자를 < ruby>태그로 묶어준 후 표기할 발음은 < rp>와 < rt>태그를 사용해 표현한다.
특히 < rp>태그는 후리가나가 지원되지 않는 환경에서 표기할 텍스트를 지정하고 < rt>태그는 후리가나가 지원되는 경우 사용한다.
*후리가나 또는 요미가나 : 일본어 표기에서 어떤 단어나 글자(보통 한자)의 읽는 법을 주위에 작게 표기해 놓은 것을 말한다.

7. < addr title = "타이틀"> : 약자를 표시하며, title 속성을 함께 사용할 수 있다.

8. < cite> : 웹 문서나 포스트에서 참고 내용을 표시할때 사용한다. 저작물의 출처, 주석등을 작게 표시할때 사용한다.

9. < code> : 컴퓨터 인식을 위한 소스 코드를 넣을 때 사용하는 태그

10. < sup>,< sub> : < sup> :윗 첨자를 표시할때 사용하고 < sub> 아래 첨자를 표시할때 사용한다.

11. < s> : 취소선

12. < u> : 오류 표시

13. < ins> : 밑줄 표시

14.< del> : 취소선. 문서에서 삭제된 텍스트나 내용을 표시한다.

0개의 댓글