position 속성
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
position속성을 사용할 시, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있다.
relative
요소의 일반적인 문서 흐름에 따라 배치, 자기 자신을 기준으로 top,right,bottom,left의 값에 따라 원래의 위치에서 이동할 수 있다.
.relative {
position: relative;
}
.top-20 {
top: -20px; // 마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라감.
left: 30px;
}absolute
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않는다. 대신 가장 가까운 위치인 부모 요소에 대해 절대적으로 움직인다. 부모 중에 positio이 realative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직인다.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 됩니다.
.jpg)
p {
margin: 0;
background-color: yellow; // 내용의 크기만큼만 가로크기를 가짐.
}
.absolute {
position: absolute;
}
.right-0 {
right: 0;
bottom: 0;
}fixed
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃 공간도 배정하지 않는다. 단어 그래도 고정되었다는 의미이다.
inline
display 속성이 inline으로 지정된 요소는 전후 줄바꿈 없이 한줄에 다른 요소와 나란히 배치. 대표적인 inline 요소로는 <span>, <a>, <img> 태그 등이 있다.
width와 height 속성 지정 의미가 없다. content의 크기 만큼만 공간을 차지하도록 되어 있기 때문이다. 또한 margin과 padding 속성을 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다. inline 성질을 갖도록 하는 CSS property는 display 와 float 가 있다.
inline-block
display 속성이 inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치. width, height, margin, padding 속성의 상하 간격 지정이 가능하다.
대표적인 inline-block 요소로 <button>이나 <input>, <select> 태그 등이 있다.
inline-block 요소는 명시적으로 해당 요소의 스타일을 display: inline-block로 지정해줘야 한다.
block
display 속성이 block으로 지정된 요소는 전후 줄바꿈을 실행하여 다른 요소들을 다른줄로 밀어내고 한줄에 모두 차지. 대표적인 block 요소로는 <div>, <p>, <ha> 태그 등이 있다. width, heigt, margin, padding 속성 모두 반영된다.
float
단어 그대로 '띄우다'라는 뜻이다. CSS에서 정렬하기 위해 사용되는 속성으로 전체 문서를 배치할 때 사용한다. float속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나게 된다.(주의) 이를 해결하려면 float 요소 옆 채워지는 요소들에게 적용하는clear라는 속성이 필요하다.
| float 속성 | 의미 |
|---|---|
| none | 띄우지 않음 (기본값) |
| left | 왼쪽에 띄움 |
| rigtht | 오른쪽에 띄움 |
| initial | 기본값으로 설정함 |
| inherit | 부모 요소로부터 상속함 |
float 속성 사용법
- inline으로 float 사용
<img src="img.png" style="float:left;">- internal: HTML
<head>영역에<style>태그 사용
<head>
<style type="text/css">
img
{
float:left;
}
</style>
</head>- external: CSS 파일을 별도로 만들어 HTML 문서에 연결.
