html & css
position 속성 - static, relative, absolute, fixed
01/ static(기본위치)
- 기본위치
02/ relative(상대위치)
- 기본위치를 기준으로 좌표 프로퍼티(top, bottom, left, right)를 사용하여 위치를 이동시킨다.
03/ absolute(절대위치)
- 부모요소 또는 가장 가까이 있는 조상요소(static제외)를
기준으로 좌표 프로퍼티(top, bottom, left, right)만큼 이동한다.
즉, 나머지 프로퍼티가 선언되어 있는 부모 또는 조상 요소를 기준으로 위치가 결정되는 것이다.
04/ fixed(고정위치)
- 부모 요소와 관계없이 브라우저의 viewport를 기준으로 좌표프로퍼티를 사용하여 위치를 이동시킨다.
스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치한다.
inline, inline-block, block 에 대해서
- inline 요소는 block의 요소와 성질이 반대이다.
말 그대로 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻이다.
inline 성질을 갖도록 하는 CSS property는 display와 float이 있다.
-><span>,<a>,<img>태그 - span은 오른쪽 정렬을 부여해도 오른쪽 정렬이 되지 않는다 (inline element)
display: inline-block; 으로 하면 가능(block element의 특징을 가져옴) - 대부분의 HTML element(요소)는 block 요소이다.
block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻이다.
-><header>,<footer>,<p>,<li>,<table>,<div>,<h1>태그
float에 대해서
CSS를 사용하여 layout을 구성할 때에 자주 사용되는 핵심 기술은 float이다. float 속성에는 left, right, none 가운데 하나를 값으로 줄 수 있다.
