1. position 속성 - relative, absolute, fixed
- Position
이제까지 html 코드를 작성하면, 작성한 순서대로 페이지에 그려졌습니다.
CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있습니다.
예를 들어, index.html 에서 코드의 위치는 제일 마지막인데, 페이지에서는 제일 위에 보이게 할 수 있습니다.
position: static;
position: relative;
position: absolute;
position: fixed;
static (기본값) : 위치를 지정하지 않을 때 사용한다.
relative : 위치를 계산할때 static의 원래 위치부터 계산한다.
absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정 된다.
fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정 할 수 있다.
브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.
-
relative
position: relative; 자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동 하지는 않습니다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.
top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다. -
abolute
position: absolute; 는 이름과 같이 절대적인 위치에 둘 수 있습니다.
어떤 기준으로 절대적이냐 하면, 특정 부모에 대해 절대적으로 움직이게 됩니다.
부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됩니다.
일반적으로 absolute를 쓸 경우, 기준이 될 부모에게 position: relative; 를 부여하면 됩니다. -
fixed
fixed는 말그대로 고정됐다는 뜻입니다. absolute는 relative를 가진 부모가 필요했는데, fixed는 필요없습니다. fixed는 눈에 보이는 브라우저 화면 크기만큼, 화면 내에서만 움직입니다.
2. inline, inline-block, block
-
block : div는 표준 블록 레벨 엘리먼트입니다. 블록 레벨 엘리먼트는 새 줄에서 시작해 좌우로 최대한 늘어납니다. 자주 볼 수 있는 다른 블록 레벨 엘리먼트로 p와 form이 있으며, HTML5에서 새로 추가된 엘리먼트로 header와 footer, section 등이 있습니다.
block의 특징 :
block은 height와 width 값을 지정 할 수 있다.
block은 margin과 padding을 지정 할 수 있다. -
inline : span은 표준 인라인 엘리먼트입니다. 인라인 엘리먼트는 단락 안에서 해당 단락의 흐름을 방해하지 않은 채로 텍스트를 감쌀 수 있습니다. 링크에 사용하는 a 엘리먼트는 가장 흔히 볼 수 있는 인라인 엘리먼트입니다.
inline의 특징 :
width와 height를 명시 할 수 없다.
margin은 위아래엔 적용 되지 않는다.
padding은 좌우는 공간과 시각적인 부분이 모두 적용 되지만 위아래는 시각적으로는 추가되지만 공간을 차지 하지는 않는다. -
inline-block : inline-block 은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소입니다.
inline-block의 특징 :
줄바꿈이 이루어지지 않는다.
block처럼 width와 height를 지정 할 수 있다.
만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다.
3. float
float 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.
