Hyemi Lee

Hyemi Lee

주니어 개발자의 삽질과 기록

WEB, boostcourse, FE, css layout-1

  • display (block, inline, inline-block)
  • position (static, absolute, relative, fixed)

  • float (left, right)

    1. 블록으로 쌓이는 엘리먼트(display:block)

    display속성이 block이거나 inline-block인 경우 그 엘리먼트는 벽돌을 쌓는것처럼 위에서 아래로 채워진다

div_css

2. 옆으로 흐르는 엘리먼트(display:inline)

우측으로, 그리고 아래쪽으로 빈자리를 차지하며 흐른다 ※(注記)liline속성의 엘리먼트는 높이와 넓이를 지정해도 반영되지 않는다 inline_css

3. 좀 다르게 배치시키기(position 속성)

  • position속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월하다
    1. position 속성으로 특별한 배치를 할 수 있습니다. position 속성은 기본 static입니다. 그냥 순서대로 배치됩니다.

  1. absolute는 기준점에 따라서 특별한 위치에 위치합니다. top / left / right / bottom 으로 설정합니다. 기준점을 상위엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점입니다.

  2. relative는 원래 자신이 위치해야 할 곳을 기준으로 이동합니다. top / left / right / bottom로 설정합니다.

  3. fixed는 viewport(전체화면) 좌측, 맨 위를 기준으로 동작합니다.

position_css

4. 엘리먼트가 배치되는 방식 (float:left)

  • float 속성으로 원래 flow에서 벗어날 수 있고 둥둥 떠다닐 수 있다
  • 일반적인 배치에 따라서 배치된 상태에서 float는 벗어난 형태로 특별히 배치됩니다.
  • 따라서 뒤에 block엘리먼트가 float 된 엘리먼트를 의식하지 못하고 중첩돼서 배치됩니다.
  • 이런 특이성 때문에 웹사이트의 전체 레이아웃 배치에서 유용하게 활용됩니다. code float_css

Reference

Share on

Twitter Facebook LinkedIn

You may also enjoy

Redis Stream

2021年04月28日

Stream Stream은 로그 데이터를 처리하게위해 5.0에서 새로 도입된 데이터 타입입니다. 대량의 데이터가 연속적으로 발생할때 처리하기 위해 등장했습니다. 기존 데이터를 수정하지 않고 오직 추가로 발생합니다. 이런 종류의 데이터를 stream or log데이터...

Study, Object, chapter2&3 presentation

2021年04月20日

chapter03. 역할, 책임, 협력 객체지향 설계란, 올바른 객체에게 올바른 책임을 할당하면서 낮은 결합도와 높은 응집도를 가진 구조를 창조하는 활동이다.

Spring, chatting 프로그램 만들기, Reactive란?

2020年06月16日

Reactive 막힘없이 흘러다니는 data(event)를 통해 사용자에게 자연스러운 응답을 주고 규모 탄력적으로 리소스를 사용하며 실패에 있어서 유연하게 대처한다 모든 지점에서 블럭 되지 않게 하자 oop와 같은 패러다임 모든 것을 비동기적인 data의 strea...