1. 블록과 인라인
- 블록타입의 요소 // 무조건 한줄기준의 설정
<p style="border: 3px solid red">
HTML.........
</p>
// <p>, <div>, <h>, <ul>, <ol>, <form> 요소는 display 속성값이 블록(block)인 대표적인 요소.
=> <div>
// html요소들을 하나로 묶는 대표적인 블록(block)요소.
<div style="background-color:green; color:white">
take a nap
</div>
- 인라인 타입의 요소 // 지정한 단어기준의 스타일 설정
<span style="background-color:skyblue; color:white">
seung il </span>
또는
<span style="border:3px solid red"> seung il </span> // 빨간상자
// <span>, <a>, <img>요소는 display 속성값이 인라인.
2. iframe 요소
- <iframe src="ulala3.jpg" width="400" height="400"></iframe>
- 테두리 설정
<iframe src="ulala3.jpg" style="width:100; height:300; border: 3px dashed maroon">
</iframe>
// 테두리를 없애고 싶다면 border를 none으로 설정.
=> iframe 요소의 페이지 변경은 http://tcpschool.com/html/html_space_framesIframes 참고!
3. 레이아웃
- 특정 공간에 여러 구성 요소를 효과적으로 배치하는 작업.
(1) div 요소를 이용한 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Layouts</title>
<style>
#header {
background-color:lightgrey;
height:100px;
}
#nav {
background-color:#339999;
color:white;
width:200px;
height:300px;
float:left;
}
#section {
width:200px;
text-align:left;
float:left;
padding:10px;
}
#footer {
background-color:#FFCC00;
height:100px;
clear:both;
}
#header, #nav, #section, #footer { text-align:center; }
#header, #footer { line-height:100px; }
#nav, #section { line-height:240px; }
</style>
</head>
<body>
<h1>div 요소를 이용한 레이아웃</h1>
<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>
</body>
</html>
(2) HTML5 레이아웃
(3) table 요소를 이용한 레이아웃
'언어 > HTML_CSS' 카테고리의 다른 글
| HTML 확장 (0) | 2018.11.06 |
|---|---|
| HTML 입력 양식 (3) | 2018.11.06 |
| HTML 기본요소 (1) | 2018.11.04 |
| HTML 텍스트 요소- 인용구, 문자셋 (0) | 2018.11.02 |
| HTML 텍스트 요소- 제목, 단락, 서식 (0) | 2018.11.02 |