08. HTML의 디스플레이

 

1. inline - block

 

 

 

• 인라인(inline)

- content의 크기 만큼남 자리를 차지하는 요소 - 텍스트,  img, span 등 - 텍스트의 특징을 가지고 있음

 

 

• 블록(block)

- 라인을 모두 차지하는 요소 - p, h, ul, li, div 등 - 면의 특징을 가지고 있음

 

 

• span 태그

- 인라인 (inline) 특징을 가지고 있음 - 글자 단위로 영역 설정 - 웹 문서에서 특정 부분을 그룹화하거나 스타일을 적용하기 위해 사용됨 - 주로 텍스트 스타일링 또는 스크립트와 함께 특정 텍스트 또는 요소를 감싸기 위해 사용됨

 

• div 태그

- 블럭 (block) 특징을 가지고 있음 - 면 단위로 영역이 설정 - 웹 문서의 구획을 나누거나 요소를 그룹화하기 위해 사용됨 - 주로 CSS 스타일링이나 JavaScript와 함께 사용하여 웹 페이지의 레이아웃을 조정하고 웹 콘텐츠를 구조화하는 데 유용함

 

 

---

 

• 기본 디스플레이

<h2>디스플레이</h2>     1. span 태그 영역입니다.

 

 

 

• span 태그 사용하기 (줄바꿈이 되지 않음)

<h2>디스플레이</h2>     1. <span style="font-size: 30px; color: deeppink">span 태그 영역</span>입니다.

 

 

• div 사용하기 (자동으로 줄바꿈 됨)

<h2>디스플레이</h2>     <p>1. <span style="font-size: 30px; color: deeppink">span 태그 영역</span>입니다.</p>'     <div> 2. div 태그 영역입니다.</div>

 

 

• div에 스타일 적용하기

<div style="width: 300px; height: 300px; background-color: gold;">3. div 태그 영역입니다.</div>

 

---

 

2. 시멘틱(Semantic) 태그

Semanic : 의미가 있는

 

 

• 검색엔진 최적화
• 스트린 리더를 사용하여 체이지를 탐색할 때 도움
• div > div > div > div > div > ... 끝없는 div를 탐색하는 것 보다 효율적
• 개발자에세 명확하게 의미를 전달
  

 

<header>  </header>	- 페이지의 제목, 소개 - heading 태그나 로고, 검색양식 ,작성자 이름등을 포함
<nav>  </nav>	- 메뉴, 목차
<main>  </main>	- 주 컨텐츠 영역
<section>  </section>	- 구체적인 시맨택 태그가 없는 문서의 독립적인 영역 - 제목이 있는 컨텐츠에 사용하는 것이 일반적
<article>  </article>	- 자체로 의미가 있는 웹페이지 부분 - 독립적으로 배포 또는 재사용 되도록 의도된 문서 - 블로그, 게시물, 신문 기사
<footer>  </footer>	- 작성자의 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트
<aside>  </aside>	- 간접적으로 문서와 관련된 내용 또는 관련없는 사이드바