반응형
<최종 화면>
홈페이지를 만들때, 4개 구역으로 구분해서 틀을 잡고 작업을 한다. 우선 배치에 대한 float 간단한 예제를 해보자.
배경색과 크기를 준다.
하지만 우리가 최종화면처럼 배치가 저절로 되지 않는다.
float 속성을 줘서, 옆으로 배치해보자.
<float의 주의점> - float를 주면 보여주는 위치와 요소가 자리 잡는 위치를 잘 생각해야한다. 아래 사진처럼
그러면 파란 네모도 빨간 네모와 간은 선상 옆에 놓기 위해
파란 네모도 float 속성을 준다.
옆으로 배치 되지만.. 맨 아래 네모가 빨간색 네모 뒤로 올라가버렸다...
float로 띄운 경우 그 영향을 받지 않으려면 clear 속성을 사용하자.
(float와 clear는 한 쌍으로 사용한다고 보면 된다.)
<복붙용 코드>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#header{
background-color: burlywood;
width: 100%;
height: 50px;
}
#nav{
background-color: crimson;
width: 30%;
height: 100px;
float: left;
}
#content{
background-color: darkblue;
width: 70%;
height: 100px;
float: left;
}
#footer{
background-color: cornflowerblue;
width: 100%;
height: 50px;
clear: both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>
</html>
|
반응형
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+ CSS' 카테고리의 다른 글
| HTML+CSS (기초) opacity, visibility 속성 이용하기( 투명도, 화면 표시) (0) | 2019.12.09 |
|---|---|
| HTML+CSS (기초) display 속성 이용하기 ( float와 같은 배치, 편리) (0) | 2019.12.09 |
| HTML+CSS (기초) overflow 속성 사용 ( 테두리 넘친 내용에게 적용) (0) | 2019.12.09 |
| HTML+CSS (기초) min, max 속성 사이즈 조절 (0) | 2019.12.09 |
| HTML+CSS (기초) index 속성 이용하기. (0) | 2019.12.09 |
댓글