HTML(span, div, Semantic 태그)

1. HTML의 디스플레이

(1) inline
- content의 크기 만큼만 자리를 차지하는 요소들
예를 들어 텍스트(text), img, span ... 등으로 텍스트의 특징을 가지고 있습니다.

(2) block
- 라인을 모두 차지하는 요소들
예를 들어 p, h, ul, li, div ... 등으로 면의 특징을 가지고 있습니다.

 

2. span 태그

<span> 요소는 인라인(inline) 요소 중 하나로, 주로 텍스트나 다른 인라인 요소들을 그룹화하거나 스타일을 적용하기 위해 사용됩니다. <span> 요소는 자체적으로 눈에 보이는 어떤 시각적 변경도 가지지 않으며, 그 주된 역할은 스타일링이나 스크립트에서 특정 부분을 선택하거나 다루는 것입니다.

요약하면, <span> 요소는 HTML에서 특정 부분을 그룹화하고 스타일을 적용하기 위해 사용되는 인라인 요소입니다.

<p>이 문장의 일부는 <span style="color: blue; font-weight: bold;">파란색 볼드 텍스트</span>입니다.</p>

3. div 태그

<div> 태그는 HTML에서 중요한 블록(block) 레벨 요소 중 하나입니다. 이 태그는 주로 웹 페이지의 구조를 나타내고, 요소들을 그룹화하고 스타일링하기 위해 사용됩니다. 

 

naver의 HTML문서를 살펴봐도 div를 이용해서 화면 구성을 했음을 알 수 있다.

4. 시맨틱(Semantic) 태그

<div> 요소는 블록 레벨 요소로 사용되며, 주로 스타일링과 레이아웃을 위해 사용됩니다. 그러나 <div> 요소 자체는 어떤 의미나 역할을 가지고 있지 않습니다. 이에 반해 시맨틱 요소는 페이지의 콘텐츠에 관한 정보를 더 정확하게 제공하며 웹 접근성과 검색 엔진 최적화(SEO)에 도움이 됩니다. 최근의 웹 개발에서는 시맨틱(semantic) HTML 요소를 사용하여 웹 페이지의 구조를 정의하는 것이 권장됩니다.

 

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

---

***아이프레임 태그

아이프레임<iframe> 태그는 inline frame의 약자로 다른 웹 페이지나 외부 콘텐츠를 현재 페이지에 삽입하는 데 사용되는 HTML 요소입니다.   <iframe src = '삽입할 페이지의 주소 또는 문서위치' style='크기를 설정할 css코드'></iframe>

 

    <h2>아이프레임</h2>

    <p><iframe src="https://junyealim.tistory.com/"

        style="width:100%; height:600px; border: 3px dashed red;"

        name="korea"></iframe>

    </p>

    <p><a href="./2.테이블2.html">테이블 연습 페이지(현재창)</a></p>

    <p><a href="./2.테이블2.html" target="_blank">target 속성으로 새탭에서 열림

    </a></p>

    <p><a href="./2.테이블2.html" target="korea">아이프레임이 바뀜

    </a></p>  

    <p><a href="https://www.google.com/" target="korea">

        구글에서 아이프레임을 막아둠(아이프레임)</a></p>

빨간 점선 안에 아이프레임으로 불러온 페이지 표출되는 모습