HTML - 블록과 인라인
HTML 요소는 기본적으로 블록(block) 과 인라인(inline) 디스플레이 값을 갖습니다.
- 블록 요소(Block-level Elements) : 블록 요소는 항상 새로운 줄에서 시작하며, 브라우저는 요소 전후에 일정한 공간(여백)을 자동으로 추가합니다. 블록 요소는 가능한 가로 폭 전체를 차지하며, 보통 문단(<p>)이나 구역을 정의하는 (<div>) 요소가 블록 요소에 해당합니다. HTML에서 사용되는 다른 블록 요소들로는 <h1> 부터 <h6>, <ul>, <ol>, <li>, <table> 등이 있습니다. 아래는 블록 요소의 예시입니다.
<p>This is a paragraph.</p>
<div>This is a division or section.</div>
- 인라인 요소(Inline Elements) : 인라인 요소는 새로운 줄에서 시작하지 않으며, 필요한 만큼의 가로 폭만 차지합니다. 인라인 요소는 텍스트 내에서 일부를 표시하거나 강조하는 용도로 사용됩니다. 주로 사용되는 인라인 요소는 <span>이 일반적이며, 텍스트의 일부를 스타일링하거나 클래스 또는 아이디를 적용할 때 사용할 수 있습니다. 아래는 인라인 요소의 예시 입니다.
<p>This is a <span>span</span> element inside a paragraph.</p>
- 인라인-블록 요소(Inline-block) : 인라인-블록 요소는 인라인 요소와 비슷하게 한 줄에 표시되지만, 블록 요소처럼 가로 폭을 설정할 수 있습니다. 인라인-블록 요소는 일부 텍스트나 요소의 일부를 스타일링하면서도 가로 폭을 지정해야 할 때 유용합니다.아래는 인라인-블록 요소의 예시 입니다.
<span style="display: inline-block; width: 100px; height: 50px; background-color: red;"></span>
추가적으로 HTML 요소의 디스플레이(display) 값을 변경할때 display 속성을 사용할 수 있습니다. 이 또한 추후 CSS 에서 다루겠습니다.
HTML - iframe 요소
iframe 요소는 현재 페이지에 다른 HTML 페이지를 포함시키는 중첩된 브라우징 컨텍스트를 나타냅니다. 각 중첩된 브라우징 컨텍스트는 고유한 문서를 가지고 URL 탐색을 허용합니다. 즉, 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다고 보면 됩니다.
frame 태그의 기본 구문은 다음과 같습니다.
<iframe src="url" title="description"></iframe>- src 속성은 포함할 페이지의 URL을 정의합니다.
- title 속성은 screen reader에서 iframe의 내용을 읽어주기 위해 사용됩니다.
iframe의 크기를 지정하기 위해 height 와 width 속성을 사용할 수 있습니다. 높이와 너비는 기본적으로 픽셀 단위로 지정할 수 있습니다.
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>또는 style 속성을 추가하고 CSS의 height 와 width 속성을 사용할 수 있습니다.
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>기본적으로 iframe에는 테두리가 있습니다. 테두리를 제거하려면 style 속성을 추가하고 CSS의 border 속성을 사용하면 제거할 수 있습니다.
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>
CSS를 사용하면 iframe의 테두리 크기. 스타일 및 색상을 변경할 수 도 있습니다.
<iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>iframe은 링크의 대상 프레임으로 사용될 수 있습니다. 링크의 target 속성은 iframe의 name 속성을 참조해야 합니다.
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p>
<ahref=" 링크"target="ifram_a">링크이름</a>
</p>프레임셋(frameset)
<frameset>은 HTML 문서에서 프레임셋을 정의하는 데 사용되는 태그입니다. <frameset> 요소는 하나 이상의 <frame> 요소를 포함 수 있고 이를 사용하여 프레임셋의 행 및 열 수 와 해당 픽셀 간격 등을 지정할 수 있습니다.
- <frameset>은 HTML5에서는 지원하지 않습니다. HTML5에서는 iframe 과 css를 이용해야 합니다.
<frameset> 태그는 다음과 같은 속성을 가지고 있습니다.\
- cols : 웹 브라우저에서 세로 프레임을 생성하는 데 사용됩니다. 프레임 셋 태그 내의 열 수 와 크기를 정의합니다.
- rows : 웹 브라우저에서 가로 프레임을 생성하는 데 사용됩니다. 프레임셋 태그 내의 행 수와 크기를 정의합니다.
- border : 각 프레임의 테두리 너비를 픽셀로 정의합니다. 테두리가 없을 경우 0으로 사용합니다.
- frameborder : 프레임 간에 세 개의 차원 테두리를 표시할지 여부를 지정하는 속성으로 0은 테두리 없음 1은 테두리가 있음을 나타냅니다.
- framespacing : 프레임셋 내의 프레임 간 간격을 픽셀로 지정합니다.
다음은 간단한 사용 예시 입니다.
<!DOCTYPE html>
<html>
<head>
<title>프레임셋 예시</title>
</head>
<frameset cols="20%, 80%">
<frameset rows="100, 200">
<frame src="contents_of_frame1.html">
<frame src="contents_of_frame2.gif">
</frameset>
<frame src="contents_of_frame3.html">
<noframes>
<body>
현재 브라우저에서 프레임을 지원하지 않습니다.
</body>
</noframes>
</frameset>
</html>
위와 같이 코드를 작성하면 프레임 셋은 총 3개의 프레임을 가지고 있고 화면에 frame을 표시할 수 없다면 <noframes> 태그의 내용이 표시됩니다.
다시 한 번 강조하지만 <frameset> 의 사용은 더 이상 권장되지 않습니다. 이런 태그가 있다 라는 정도만 알고 넘어가면 될 것 같습니다.
'웹 > HTML' 카테고리의 다른 글
| HTML - form 요소 (0) | 2023.06.21 |
|---|---|
| HTML - 레이아웃(Layout) (0) | 2023.06.20 |
| HTML - 테이블(table) (0) | 2023.06.20 |
| HTML - 리스트(List) (0) | 2023.06.20 |
| HTML - 이미지(Image / <img>) (0) | 2023.06.20 |
