position
CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.
좌표를 지정 해주기 위해서는 left, right, top, bottom 속성과 함께 사용한다.
position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 된다.
1. static:
: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없다.
2. absolute:
: 절대 좌표와 함께 위치를 지정해 줄 수 있다.
ex)
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: absolute;
top: 20px;
left: 20px;
background: blue;
}
3. relative:
: 원래 있던 위치를 기준으로 좌표를 지정한다.
ex)
.box {
display: inline-block;
width: 100px;
height: 100px;
background: red;
color: white;
}
#two {
position: relative;
top: 20px;
left: 20px;
background: blue;
}
4. fixed:
: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정한
다.
5. inherit:
: 부모 태그의 속성값을 상속받는다.
float
float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정한다.
float : none; float: left; float: right;
clear
clear:left는 float:left 속성을, clear:right는 float:right 속성을, clear:both는 float의 left, right속성을 전부 해제해 float의 영향을 받지 않게 된다.
clear : none;
clear : both;
display
display 속성은 요소를 어떻게 보여줄지를 결정합니다.
주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.
none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태
1. none
요소를 렌더링하지 않도록 설정한다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.
2. block
div태그,p태그,h태그,li태그 등이 이에 해당된다.
기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락이다.
width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링된다.
3. inline
span태그,b태그,i태그,a태그 등이 이에 해당된다.
block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시된다.
4. inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다.
