1. position 속성
position 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
inherit: 부모 태그의 속성값을 상속받습니다.
1-1. static
position 을 아무것도 지정하지 않으면 사용되는 기본 값입니다. position 속성을 static 으로 지정하면 위치가 지정된 것이 아니라 그냥 HTML 문서에 따라 위치가 정해졌다고 보면 됩니다. 기본 값이기 때문에 보통의 경우 잘 쓰이지 않는 값입니다.
div.static { position: static; }1-2. relative
position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있습니다. 이 말을 다른 말로 하면 position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음을 이야기 하는 것입니다.
div.relative {
position: relative;
left: 100px;
top: -100px;
}1-3. absolute
position 을 absolute 로 지정하는 것은 fixed 와 비슷하지만 다릅니다. 무슨 말인고 하니 fixed 는 사용자의 브라우저를 기준으로 위치를 고정시키는 것이지만, absolute 는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다.
위치가 지정된 부모요소라는 것은 결국 position 속성이 static 이 아닌 다른 값으로 지정 되어야 함을 의미합니다.
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}위 예제의 경우 parent 라는 클래스의 자식 요소인 child 클래스 요소는 parent 와 같은 위치에 같은 크기로 표시 됩니다. 두 div 요소를 겹쳐 놓은 것과 마찬가지입니다.
만약 parent 클래스의 요소의 position 을 fixed 로 지정했다면 child 클래스 요소도 parent 와 마찬가지로 화면을 스크롤해도 항상 같은 위치에서 사용자에게 보여질 것입니다.
1-4. fixed
position 을 fixed 로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있습니다. 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등이 이 속성을 이용하는 것입니다.
이를 위해서는 top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있습니다.
예를 들어 스크롤을 내려도 하단에 항상 고정되어 있는 하단바를 만들기 위해서는 아래와 같이 position 속성을 사용할 수 있습니다.
div.footer-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 32px;
}2. display 속성
display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.
none: 보이지 않음
block: 블록 박스
inline: 인라인 박스
inline-block: block과 inline의 중간 형태
- block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
- inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
2-1. block
기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.
width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.
2-2. inline
block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
2-3. inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
3. float 속성
float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
inherit: 부모 요소에서 상속
left: 왼쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름.
right: 오른쪽에 부유하는 블록 박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름. 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
none: 요소를 부유시키지 않음
left와 right를 통해 부유속성을 지정시 display는 무시됩니다. (none은 제외)
또한 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라집니다.
3-1. 사용법
.content > img{ float: left }3-2. 레이아웃에서의 float
float 속성은 원래 이미지와 텍스트 배치 용도로 등장했지만, 요즘에는 레이아웃용으로 많이 사용하고 있습니다.
<div> 태그를 float 속성 및 width, height 속성 등을 이용하여 레이아웃을 배치하는 방식입니다.
예제
<html>
<head>
<style>
.ex-layout{ height: 310px }
.menu{
width: 300px;
height: 40px;
border: 2px solid #09c;
background-color: #d7f5ff;
}
.main .left-menu{
float: left;
width: 50px;
height: 254px;
border: 2px solid red;
background-color: #ffe7d5;
}
.main .content{
float: left;
width: 250px;
height: 250px;
}
.main .content .article{
height: 200px;
border: 2px solid blue;
background-color: #e2e9ff;
}
.main .content .comment{
height: 50px;
border: 2px solid purple;
background-color: #ffddff;
}
</style>
</head>
<body>
<div class="ex-layout">
<div class="menu">global menu</div>
<div class="main">
<div class="left-menu">left menu</div>
<div class="content">
<div class="article">article</div>
<div class="comment">comment</div>
</div>
</div>
</div>
</body>
</html>출력 결과
3-3. clear
float는 오른쪽, 왼쪽으로 객체를 띄워서 정렬하는 속성이라고 했습니다.
사진에다가 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 돌러싼 형태가 됩니다.
사진 주위로 글자가 따라 붙지 않게 하려면 어떻게 해야 할까요?
바로 clear 속성을 사용하면 됩니다!
clear는 '취소하다'라는 뜻으로 left는 float:left값을 취소하고 right는 float:right값을 취소합니다.
clear: none 는 기초값으로 clear를 설정하지 않은 것과 같습니다
clear: left - 왼쪽을 취소
clear: right - 오른쪽을 취소
clear: both - 오른쪽 왼쪽을 취소
참고링크
