1. position 속성
cssd의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다.
position: static
일단 모든 태그들은 처음에 position:static상태입니다. (기본적으로 static이라 따로 써주지 않아도 됩니다. static상태에서는 top, bottom, left, right와 같은 속성이 적용되지 않습니다.
position: relative
position: relative; 자체로는 큰 의미가 없습니다. top, bottom, left, right와 같은 속성이 있어야 원래 위치에서 이동할 수 있습니다.
top, right, bottom, left는 position이라는 속성이 있을 때만 적용되는 속성입니다.
position: absolute
absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중 position이 relative, fixed, absolute가 없다면 가장 위의 태그인(body)가 기준이 됩니다.
position: fixed
fixed는 말 그대로 고정되었다는 뜻입니다. absolute는 static, relative, absolute를 가진 부모가 필요했지만 fixed는 필요없습니다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다. top, bottom, left, right으로 브라우저에서 위치를 조정할 수 있습니다.
2. block vs inline vs inline-block
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다.
반대로, inline요소는 말 그대로 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다.
display: inline;
대표적으로 span이라는 태그의 성질로 content/text 크기 만큼만 자리를 점유합니다. inline요소라면 한 줄에 여러 요소가 올 수 있습니다.
단, 안 되는 속성이 있습니다.
- width/height 불가
- margin/padding-top/bottom 적용 불가
- line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향))
블록 요소의 예
div, p, h1 ~ h6,table, section, article, aside, ul, ol
인라인 요소의 예
inline, a, img
inline-block
inline-block은 block과 inline요소의 혼합입니다. 성질 자체는 inline과 비슷합니다. 동일 라인에 여러 태그를 붙일 때 쓸 수 있습니다. 다만, inline요소의 단점들을 커버하는 것이 inline-block입니다.
- width/height 적용가능
- margin/padding-top/bottom적용 가능
- line-heigth 적용 가능
- inline-block끼릴 공백이 생기게 되는데.. 이때는 상위 div에 {font-size: 0;}을 적용하면 해결이 됩니다.
- inline-block끼리 높이가 안 맞을시 상위 공백이 생기는데, 이떄는 {vertical-align:""}값으로 top 등을 맞추면 됩니다.
inline-block만 쓰는게 최고이지 않을까?
디테일한 보정이 필요할 땐 display:inline-block이 낫다. 반대로 빠르게 특정 부분 스타일 등 간단한 것들은 그냥 inline으로 쓰면 편하다.
3. float
float라는 단어는 '뜨다'라는 의미입니다. 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. 이는 최근에는 우리는 항상 최근 기술의 코드만 보는 것이 아니므로 알아둘 필요가 있습니다.
속성 값
- none- 띄우지 않음(기본값)
- left- 왼쪽에 띄움
- right- 오른쪽에 띄움
- inital- 기본값으로 설정함
- inherit - 부모 요소로부터 상속함
float의 문제점
float 속성을 가진 요소는 부모가 높이를 인지할 수 없어서 부모를 벗어나게 됩니다. 그래서 float를 다루기 어렵거나 귀찮은 요소 중 하나라고 생각하는 개발자가 많이 있습니다.
해결 방법
- 부모 태그 안에 아무태그나 넣고 clear속성을 적용합니다.
- 주로 많이 사용하는 방법인데 부모 요소에 overflow:hidden; 을 주는 것입니다.
- 부모 요소에 float를 시킵니다. 그러면 자식의 float 높이를 인지하여 그 만큼 높이를 차지하게 됩니다. 그러나 이것도 문제가 있습니다. float가 되어버려 block 성질을 잃어 버립니다. 이러면 width 100% 추가하거나 해야합니다.
