HTML에서 영역을 정의하는 다양한 태그들이 있습니다. 이 태그들은 웹 페이지의 레이아웃을 구성하고, 콘텐츠를 배치하는 데 사용됩니다. 이번 포스트에서는 대표적인 영역 관련 태그인 div, span, 그리고 iframe 태그에 대해 알아보겠습니다.
기본 HTML 구조
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>영역관련태그</title> <style> div { width: 200px; height: 200px; border: 1px solid black; } span { width: 200px; height: 200px; border: 1px solid black; } </style> </head> <body>
블록 요소와 인라인 요소
HTML 태그는 블록 요소와 인라인 요소로 나뉩니다. 이 요소들은 페이지에서 어떻게 영역을 차지하고 표시되는지에 따라 구분됩니다.
블록 요소
한 줄 단위로 영역을 차지하며, 줄바꿈이 자동으로 적용됩니다.
(예: p, div, h1-h6 등)
인라인 요소
콘텐츠 영역만 차지하며, 줄바꿈이 적용되지 않고, 다른 요소와 같은 줄에 위치합니다.
(예: span, a, img 등)
div 태그와 span 태그의 차이점
줄바꿈 적용
<h2>div 태그와 span 태그의 차이점 1: 줄바꿈 적용</h2> <h3>div 태그</h3> <p>div 태그는 블록 요소로, 한 줄 단위로 영역을 차지합니다. 이미 존재하는 태그 다음 줄에 영역이 잡힙니다.</p> <div style="background: red;">첫 번째 영역</div> <div style="background: orange;">두 번째 영역</div> <div style="background: yellow;">세 번째 영역</div> <h3>span 태그</h3> <p>span 태그는 인라인 요소로, 콘텐츠 영역만 차지합니다. 줄바꿈이 발생하지 않고 같은 줄에 다른 요소가 함께 표시됩니다.</p> <span style="background: red;">첫 번째 영역</span> <span style="background: orange;">두 번째 영역</span> <span style="background: yellow;">세 번째 영역</span>
div태그는 블록 요소로, 각 요소가 화면에 한 줄을 차지하며 자동으로 줄바꿈이 적용됩니다.span태그는 인라인 요소로, 줄바꿈 없이 요소가 이어서 표시됩니다.
영역 지정 방식
<h2>div 태그와 span 태그의 차이점 2: 영역 지정 방식</h2> <h3>div 태그: 사각형 박스로 영역을 지정</h3> <div style="height: auto;"> 이 텍스트는 `div` 태그 안에 위치하며, 전체 문장이 하나의 사각형 박스로 감싸져 있습니다. </div> <h3>span 태그: 문장 단위로 영역을 지정</h3> <span> 이 텍스트는 `span` 태그 안에 위치하며, 문장 단위로 영역이 지정됩니다. 블록 요소와 다르게 줄바꿈이 발생하지 않습니다. </span>
div태그는 문단이나 큰 영역을 감싸는 데 사용되며, 블록 전체를 사각형 박스로 표시합니다.span태그는 문장 내에서 특정 부분만을 감싸는 데 사용되며, 특정 텍스트에 스타일을 적용할 때 유용합니다.
iframe 태그
<h1>iframe</h1> <p>`iframe` 태그는 웹 문서 안에 다른 웹페이지를 삽입할 때 사용됩니다. 이 태그는 인라인 요소입니다.</p> <iframe src="./04_이미지및멀티미디어태그.html" width="600" height="800"></iframe> <iframe width="992" height="558" src="https://www.youtube.com/embed/DQIgW0wYaxc" title="YouTube Video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
iframe태그는 웹 페이지 안에 다른 웹 페이지를 삽입하는 데 사용됩니다.src속성에 삽입할 페이지의 URL을 지정하며,width와height속성으로 크기를 조정할 수 있습니다.iframe은 웹 페이지에 유튜브 동영상, 다른 웹 페이지 등을 삽입할 때 많이 사용됩니다.
초보부터 시작하는 개발자 생활