문서에 들어간 여러가지 요소는 별도 위치 지정이 없을 시에는 위에서 아래로 나열된다. CSS에서는 position과 float 속성을 통해서 위치를 직접 적용하고 레이아웃을 구성할 수 있다. position은 문서 내 요소의 위치를 직접 지정할 수 있고 float는 다른 요소의 좌/우에 배치되도록 할 수 있다.
1. 원하는 위치에 배치하기 (position 속성)
|
속성 |
설명 |
|
static |
기본값으로 상->하로 요소를 배치한다. |
|
relative |
원래 배치되어야 할 위치에서 지정한 값만큼 떨어진곳에 요소를 배치한다. |
|
absolute |
가장 가까운 상위 요소의 위치를 기준으로 지정한 값만큼 떨어진 곳에 요소를 배치한다. |
|
fixed |
웹 브라우저 화면 전체를 기준으로 배치한다. 스크롤을 하더라도 위치가 고정된다. |
static속성
요소들이 겹치치 않고 한 줄에 하나씩 나오게 된다.
먼저 공통적으로 들어가는 css파일이다.
|
1
2
3
4
5
6
7
8 |
body {
margin:30px;
font:1em "맑은 고딕",Cambria,Georgia,sans-serif;
}
h1,h2 {
color: blue;
} |
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>한 줄에 하나씩 내용 배치하기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
/* 본문 내 이미지 요소의 'position' 속성을 'static'으로 지정 */
img.static {
position: static;
}
</style>
</head>
<body>
<h1> 신사임당 </h1>
<img src="./imgs/position.jpg" class="static">
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만,
훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551).
사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
</body>
</html>
|
cs |
결과화면)
relative 속성
해당 요소가 배치되어야 할 곳을 기준으로 상하좌우로 지정한 값 만큼 떨어진다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>원래 위치를 기준으로 요소 배치하기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
/* 본문 내 이미지 요소의 'position' 속성을 'relative'로 지정 */
img.relative {
position: relative;
left: 300px;
top: 50px;
}
</style>
</head>
<body>
<h1> 신사임당 </h1>
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만,
훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551).
사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
<!-- 이미지의 원래 위치가 <p> 태그 다음이므로 그 자리를 기준으로 왼쪽에서 300px, 위에서 50px 떨어진 곳에 이미지를 위치 -->
<img src="./imgs/position.jpg" class="relative">
</body>
</html>
|
cs |
결과화면)
absolute 속성
가장 가까운 상위 요소기준으로 상하좌우 지정한 값만큼 떨어진 곳에 위치한다. 상위 요소가 없이 <body>태그 바로 다음에 해당 요소가 정의 된다면 화면의 좌측 상단을 기준으로 요소가 지정된다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>상위요소를 기준으로 요소 배치하기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
p { width: 600px; }
/* 본문 내 이미지 요소의 'position' 속성을 'absolute'로 지정 */
img.absolute {
position: absolute;
left: 700px;
top: 50px;
}
</style>
</head>
<body>
<!-- 회색 배경의 <div> 영역을 선언합니다. -->
<div>
<h1> 신사임당 </h1>
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만,
훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551).
사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
<!-- 이미지의 가장 가까운 상위요소가 <div> 태그이므로 <div>를 기준으로 왼쪽에서 700px, 위에서 50px 떨어진 곳에 이미지를 위치 -->
<img src="./imgs/position.jpg" class="absolute">
</div>
</body>
</html>
|
cs |
결과화면)
fixed 속성
absolute와 같지만 브라우저를 기준으로 한다.
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>문서에 요소를 완전히 고정시키기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
p,div { width: 1500px; }
div { background-color: lightgray; padding: 10px; margin-left: 220px;}
/* 본문 내 이미지 요소의 'position' 속성을 'fixed'로 지정 */
img.fixed {
position: fixed;
left: 20px;
top: 50px;
}
</style>
</head>
<body>
<!-- 회색 배경의 <div> 영역을 선언 -->
<div>
<h1> 신사임당 </h1>
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만,
훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551).
사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
<!-- 문서 전체의 좌측 상단을 기준으로 왼쪽에서 20px, 위에서 50px 떨어진 곳에 이미지를 위치시킴.
스크롤을 좌우로 움직여봐도 이미지는 고정되어 움직이지 않음 -->
<img src="./imgs/position.jpg" class="fixed">
</div>
</body>
</html>
|
cs |
결과화면)
2. float 속성
float속성은 특정 요소가 다른 요소의 좌/우에 배치되도록 지정할 수 있다.
주의할점! : position이 absolute나 fixed로 지정되어 있다면 해당 요소는 완전히 독립적인 위치를 갖는 것이므로 더 이상 문서 내에서 제어하지 않는 것으로 판단되어 float속성은 none으로 지정된다.
|
값 |
설명 |
|
left |
요소를 좌측 끝에 위치 |
|
right |
요소를 우측 끝에 위치 |
|
none |
아무것도 지정안함 |
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>문서에 요소를 완전히 고정시키기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
div { padding: 10px; }
/* 본문 내 이미지 요소의 'float' 속성을 'left'로 지정 */
img.left {
float: left;
}
</style>
</head>
<body>
<div>
<h1> 신사임당 </h1>
<!-- 이미지를 문서의 좌측 끝에 위치시킴. <p> 태그의 내용은 <img> 태그에서 줄을 바꾸지 않고 바로 이어 나옴 -->
<img src="./imgs/position.jpg" class="left">
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만,
훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551).
사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
</div>
</body>
</html>
|
cs |
결과화면) 이런식으로 이미지와 글을 한꺼번에 배치할 수 있다.
좌우배치 해제하기 (clear)
float속성이 이미 적용되어 있는 요소가 있을 때, 한 줄에 같이 배치되는 다른 요소에서 이 속성을 지우고 싶을 때 이용한다.
|
값 |
설명 |
|
left |
float:left 무효 |
|
right |
float:right 무효 |
|
both |
모든 float 무효 |
|
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 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"/>
<title>float속성 강제로 해제하기</title>
<link href="common.css" rel="stylesheet" type="text/css">
<style>
body{ background-color: #F7FFF5;}
div { padding: 10px; }
/* 본문 내 이미지 요소의 'float' 속성을 'left'로 지정 */
img.left {
float: left;
}
/* <img> 태그의 다음에 나오는 <p>에서 'float' 속성을 완전히 해제. 이로 인해 ①에서 지정한 'float' 속성도 함께 강제로 해제 되므로 이미지 다음 줄에 단락이 위치 */
p {
clear: left;
}
</style>
</head>
<body>
<div>
<h1> 신사임당 </h1>
<!-- 이미지를 단락의 왼쪽으로 배치 -->
<img src="./imgs/position.jpg" class="left">
<p>시와 그림에 능한 예술가이자 율곡 이이를 낳은 훌륭한 어머니. 48세를 일기로 작고할 때까지 그리 길지 않은 삶을 살았지만, 훌륭한 작품을 남긴 천재 화가로서, 그리고 위대한 학자이자 정치가였던 율곡 이이의 어머니로서 신사임당(申師任堂, 1504~1551). 사임당은 현모양처(賢母良妻)를 상징하는 인물로 5세기가 지난 오늘날에도 여전히 추앙받고 있다. </p>
</div>
</body>
</html>
|
cs |
결과화면)
배치방식 변경하기 (display)
* block 요소 : <div> <p> 같이 한 줄에 하나씩 배치되는 것을 말한다.
* inline 요소 : <span> 과 같이 하나 줄에 여러개씩 배치되는 것을 말한다.
우선순위는 position, float 이다. display는 포지션 속성이나 플로트 속성값에 따라서 적용안될수도 있다.
예외) display: none일때는 아예 안보이기 때문에 position float가 무효화된다고 볼 수 있다.
주요 HTML 태그별 display 속성
|
태그 |
속성 |
태그 |
속성 |
|
<a> |
inline |
<img> |
inline |
|
<blockquote> |
block |
<li> <ol> <ul> |
block |
|
<div> |
block |
<p> |
block |
|
<form> |
block |
<pre> |
block |
|
<h1> ~ <h6> |
block |
<span> |
inline |
|
<input> |
inline |
<table> |
block |
출처) HTML5 & CSS 무작정 따라하기