HTML 인라인(inline) 태그: <strong><b><em><i><q><mark><span>
0. 인라인(inline) 태그란?
- '인라인태그.html' 파일을 새로 만들었습니다.
- '<p>블록태그</p>'는 블록 태그입니다. 웹브라우저에서 한 줄 전체를 다 차지합니다.
- '<span>인라인태그</span>'는 인라인 태그입니다. 웹브라우저 텍스트가 있는 만큼만 공간을 차지합니다.
1-1. 인라인 태그 vs 블록 태그
- '인라인태그.html' 웹 브라우저 화면에서 우클릭해봅니다.
- '검사(N)'를 클릭합니다.
- '화살표 모양 버튼'을 클릭하면 웹 브라우저 화면에서 개체를 선택할 수 있게 됩니다.
- '블록태그'라고 써있는 부분에 마우스를 올려봅니다. 블록 태그로 감싸져 있기 때문에, 웹 브라우저 한 줄 전체를 차지하고 있는 것을 색깔로 보여줍니다.
- '인라인태그'라고 써있는 부분에 마우스를 올려봅니다. 인라인 태그로 감싸져 있기 때문에, 텍스트가 있는 만큼만 공간을 차지하고 있는 것을 색깔로 보여줍니다.
1-2. 인라인 태그 vs 블록 태그
- 블록 태그인 p 태그 옆에 '옆에 글씨를 쓰면?'을 작성해봅시다.
- p 태그는 웹 브라우저 창 한 줄 전체를 차지하기 때문에, 아래줄에 '옆에 글씨를 쓰면'이 표시됩니다.
- 인라인 태그인 span 태그 옆에 '옆에 글씨를 쓰면?'을 작성해봅시다.
- span 태그는 웹 브라우 창에 텍스트가 있는 만큼만 공간을 차지하기 때문에, 바로 옆에 '옆에 글씨를 쓰면'이 표시됩니다.
2. <strong> 태그 vs <b> 태그 - 굵게 표시하기
- <strong> 태그와 <b> 태그 모두 텍스트를 굵게 표시합니다.
- 웹 브라우저 상에서 볼 때는 차이를 느낄 수 없습니다.
- 그러나, <strong> 태그는 중요한 내용을 강조하기 위해 사용합니다.
- 반면, <b> 태그는 문서의 키워드를 단순히 굵게 표시하기 위해 사용합니다.
3. <em> 태그 vs <i> 태그 - 이탤릭체로 표시하기
- <em> 태그와 <i> 태그 모두 텍스트를 비스듬히 이탤릭체로 표시합니다.
- 웹 브라우저 상에서 볼 때는 차이를 느낄 수 없습니다.
- 그러나, <em> 태그는 중요한 내용을 강조하기 위해 사용합니다.
- 반면, <i> 태그는 단순히 텍스를 이탤릭체로 표시하기 위해 사용합니다.
4. <q> 태그 - 인용 내용 표시하기
- q는 인용문을 뜻하는 quote의 줄임말입니다.
- q 태그로 묶여 있는 부분은 ""따옴표로 묶여 표시됩니다.
5. <mark> 태그 - 형광펜 효과 내기
- mark 태그는 형광펜으로 그어 놓은 듯한 표과를 냅니다.
6. <span> 태그 - 줄바꿈 없이 영역 묶기
- <span> 태그는 태그 자체로는 웹 브라우저 상에 어떠한 효과도 줄 수 없습니다.
- 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 주는 역할을 합니다.
- 그러나, 그 묶어준 텍스트에 속성을 추가하면 여러 가지 효과를 줄 수 있습니다.
- 위 이미지에서는 글자색을 파란색으로 바꾸는 속성을 추가하여, 일부 텍스트('텍스트를')를 파란색으로 바꾸었습니다.
'홈페이지 만들기 > 1단계. HTML' 카테고리의 다른 글
| HTML 표(table) 태그: <table> <tr> <td> <th> <caption> <figcaption> <thead> <tbody> <tfoot> (0) | 2020.10.09 |
|---|---|
| HTML 목록(list) 태그: <ul> <ol> <li> <dl> <dt> <dd> (0) | 2020.10.07 |
| HTML 기본 구조2 (0) | 2020.09.26 |
| 2020 비주얼 스튜디오 코드 사용 방법 및 HTML 기본 구조1 (0) | 2020.09.25 |
| 2020 비주얼 스튜디오 코드 설치(한글판) (0) | 2020.09.22 |
댓글