1.position 속성
position = 태그를 어디 기준으로 위치시킬건지 기준 대상을 정하는 속성
- static: position의 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
- absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
- relative: 원래 있던 위치를 기준으로 좌표를 지정합니다. 정확한 위치는 left, right, top, bottom를 통해
- fixed: 무조건 브라우저 창 기준. 정확한 위치는 left, right, top, bottom를 통해 (밑으로 스크롤해도 그 위치에 고정되어 계속 보임)
- inherit: 부모 태그의 속성값을 상속받습니다.
1) position 속성은 left, right, top, bottom 속성과 함께 사용합니다!!
(단, static일 땐, 함께 사용된 left, right, top, bottom 속성이 무시됨)
2) position 속성이 기준으로 삼을 대상을 선정하는 거라면, left, right, top, bottom는 position 속성이 지정한 대상의 어디를 기준으로 삼을 것 인지 지정함.
기준 대상이 정해진 경우에는 정확한 위치 재조정.
top:양수/음수 px; = 상단기준 아래/위로 이동
bottom:양수/음수 px; = 하단기준 위/아래로 이동
left:양수/음수 px; = 오른쪽/왼쪽으로 이동
right:양수/음수 px; = 왼쪽/오른쪽으로 이동
또한 position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라지게 됩니다.
2. inline,inline-block,block
inline 속성이란?
쉽게말해 줄을 바꾸지 않고 다른요소와 함께 한 행에 위치하려는 성향입니다. 대표적인 inline속성 태그로는
a,span,em 태그가 있습니다.
->그래서 inline 속성은, 문장안에서 사용하는 태그에 주로 기본값으로 설정되어있고 특정문장이나 단어를 굵게 표시해주는 strong 태그도 inline 속성을 가지고 있습니다.
어떤 태그가 인라인 요소인지 일일이 종류를 나열하는 것보다는, CSS를 작성할 때 아래와 같은 특징을 발견해서 파악하는 것이 좋습니다.
1) 상, 하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않습니다. 인라인 요소의 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생합니다.->또한 margin과 padding의 속성은 좌우간격만 반영되고
2) 너비(width)와 높이(height) 속성이 적용되지 않습니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기큼만 공간을 차지하도록 되어 있기 때문입니다.
3) 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생합니다.
=> 이와같은 특징은, 인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문입니다.
inline-block이란?
display 속성이 inline-block으로 지정된 요소는 기본적으로 inline 요소처럼 전후 줄바꿈 없이 한줄에 다른 요소들과 나란히 배치됩니다.*하지만 inline 요소에서 불가능하던 width와 height 속성 지정 및 margin 과 padding 속성의 상하 간격 지정이 가능해집니다. (ex. button, select)
1) inline-block 요소들은 해당 요소의 스타일은 display:inline-block으로 지정해줘야합니다. 이를 활용하면 여러개의 요소들을 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.
block 이란?
display 속성이 block 으로 지정된 요소는 전후 줄바꿈이 들어가 다른 요소들을 다른줄로 밀어내고 혼자 한줄을 차지합니다. 대표적으로는 div,p,h1 등이 있습니다.
1) block 요소는 inline 과 달리 width, height, margin, padding 속성 모두 반영 가능합니다.
3. float
float이란?
이 속성은 특정요소를 떠 있게 하는 것입니다. 기본 레이아웃 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동하는 것입니다. 이 속성을 사용하지 않으면 요소들이 수직으로 출력됩니다.
=> float을 사용할 때 요소의 위치가 고정되면 안되기 때문에 position의 absolute를 사용하면 안됩니다.
1) float: left 속성/왼쪽부터 정렬, right 속성/ 오른쪽부터 정렬됨
