position, inline, block, float

thwwjddld·2022년 5월 11일
0

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 라는 단어는 원래 ‘뜨다’ 라는 의미이며, 원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다.

0개의 댓글