kaki1013
4. HTML 공간 분할 본문
# 블록과 인라인
1. HTML 요소의 타입
display 속성 : 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정(HTML의 모든 요소가 가짐)
대부분의 HTML 요소는 이러한 display 속성값으로 블록(block)과 인라인(inline)의 두 가지 값 중 하나를 가짐
2. 블록(block) 타입의 요소
언제나 새로운 라인(line)에서 시작 & 해당 라인의 모든 너비를 차지
<p style="border: 3px solid red">
p요소는 display 속성값이 블록인 요소입니다.
</p>참고 : <p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소
3. <div>요소
<div>요소 : 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소
→ 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
4. 인라인(inline) 타입의 요소
새로운 라인(line)에서 시작X & 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
<p>
<span style="background-color:grey; color:orange">span태그</span>는 display 속성값이 인라인인 요소입니다.
</p>참고 : <span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소
5. <span>요소
<span>요소 : 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소
→ 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>
# iframe 요소
iframe : inline frame의 약자
→ 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지 삽입 가능
→ frame 요소와는 달리 종료 태그가 존재
문법
<iframe src="삽입할페이지주소"></iframe>
명시된 크기로 삽입되는 창의 크기가 고정
<iframe src="/css/intro" style="width:100%; height:300px">
</iframe>
1. iframe 요소의 테두리 변경
기본적으로 검정색 테두리(border)를 가짐
→ style 속성에서 border 속성을 이용하면 변경 가능
<iframe src="/css/intro" style="width:100%; height:300px; border: 3px dashed maroon">
</iframe>→ 테두리X : style 속성에서 border 속성값을 none으로 설정
<iframe src="/css/intro" style="width:100%; height:300px; border:none">
</iframe>
2. iframe 요소의 페이지 변경하기
<a>태그를 이용하면 iframe 요소의 최초 페이지를 중간에 변경 가능
<a>태그의 target 속성과 iframe 요소의 name 속성을 연결 → <a>태그를 통해 iframe 요소의 페이지를 변경 가능
<iframe src="/css/intro" name="frame_target" style="width:100%; height:400px;"></iframe>
<p>
<a href="/php/intro" target="frame_target">PHP 수업 확인하러 가기 =></a>
</p>
3. 프레임셋(frameset)
프레임셋(frameset) : 하나의 브라우저 창에 둘 이상의 페이지를 표시
→ iframe 요소와는 달리 하나 이상의 페이지를 동시에 가질 수 있음
→ noresize 속성을 명시하지 않으면, 사용자가 마음대로 페이지의 크기를 조절 가능
프레임셋에서 각각의 페이지는 frame 요소로 표현됨
→ frame 요소는 iframe 요소와는 달리 종료 태그 X
noframes 요소 : 해당 브라우저가 frame 요소를 지원하지 않을 때 보여지는 문자열을 저장
참고 : frameset, frame, noframes 요소는 더는 HTML5 표준 권고안에서 지원 X
→ 하나의 브라우저 창에 여러 페이지를 표현하고 싶을 때는 iframe 요소나 CSS를 이용하여 표현해야 함
4. 수직 프레임셋
하나의 브라우저 창을 세로 방향으로 분리하여 표현
<frameset cols="25%,*,25%">
<frame name="left" src="/html/intro"/>
<frame name="center" src="/css/intro"/>
<frame name="right" src="/php/intro"/>
<noframes>
<body> 이 브라우저는 frame태그를 지원하지 않습니다! </body>
</noframes>
</frameset>
5. 수평 프레임셋
하나의 브라우저 창을 가로 방향으로 분리하여 표현
<frameset rows="20%,60%,20%">
<frame name="top" src="/html/intro" noresize="noresize" />
<frame name="center" src="/css/intro" noresize="noresize" />
<frame name="bottom" src="/php/intro" noresize="noresize" />
<noframes>
<body>
이 브라우저는 frame태그를 지원하지 않습니다!
</body>
</noframes>
</frameset>위의 예제는 사용자가 창의 크기를 조절 불가 (frame 요소에 noresize 속성을 명시함)
# HTML 레이아웃(Layout)
레이아웃(layout) : 특정 공간에 여러 구성 요소를 보기 좋게 효과적으로 배치하는 작업
→ 웹 사이트의 외관을 결정짓는 매우 중요한 요소
1. div 요소를 이용한 레이아웃
div 요소 : CSS 스타일을 손쉽게 적용 가능 → 레이아웃 작성에 자주 사용됨
<div id="header"><h2>Header 영역</h2></div>
<div id="nav"><h2>Nav 영역</h2></div>
<div id="section"><p>Section 영역</p></div>
<div id="footer"><h2>Footer 영역</h2></div>
2. HTML5 레이아웃
의미(semantic) 요소 : HTML5에서 웹 페이지의 레이아웃만을 위해 제공하는 별도의 새로운 요소들
<header><h2>Header 영역</h2></header>
<nav><h2>Nav 영역</h2></nav>
<section><p>Section 영역</p></section>
<footer><h2>Footer 영역</h2></footer>
| 의미 요소 | 설명 |
| <header> | HTML 문서나 섹션(section) 부분에 대한 헤더(header)를 정의함. |
| <nav> | HTML 문서의 탐색 링크를 정의함. |
| <section> | HTML 문서에서 섹션(section) 부분을 정의함. |
| <article> | HTML 문서에서 독립적인 하나의 글(article) 부분을 정의함. |
| <aside> | HTML 문서에서 페이지 부분 이외의 콘텐츠(content)를 정의함. |
| <footer> | HTML 문서나 섹션(section) 부분에 대한 푸터(footer)를 정의함. |
3. table 요소를 이용한 레이아웃
오래전에 사용하던 방식 (현재는 거의 사용X)
→ table 요소는 레이아웃을 만들기 위해 설계된 요소X
→ 테이블로 작성된 레이아웃은 수정이 매우 힘듦
→ 되도록이면 table 요소로 레이아웃 작성X
<table width="100%" style="text-align:center; border:none">
<tr>
<td colspan="2" style="background-color:lightgrey"><h2>Header 영역</h2></td>
</tr>
<tr>
<td style="background-color:#339999; color:white; width:20%"><h2>Nav 영역</h2></td>
<td style="height:200px; text-align:left"><p>Section 영역</p></td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFCC00"><h2>Footer 영역</h2></td>
</tr>
</table>'버그바운티 스터디 > HTML' 카테고리의 다른 글
| 6. HTML 확장 (0) | 2023.07.06 |
|---|---|
| 5. HTML 입력 양식 (0) | 2023.07.06 |
| 3. HTML 기본 요소 (0) | 2023.07.05 |
| 2. HTML 텍스트 요소 (0) | 2023.07.05 |
| 1. HTML 시작 (0) | 2023.07.03 |
