페이지 레이아웃

강현구·2021년 11월 30일
0

HTML & CSS

목록 보기
7/7

inline, inlne-block, block

CSS에서 레이아웃을 제어하는 Display의 속성값이다.
대부분의 요소들은 기본값으로 inline또는 block을 갖고있다.

inline

대표 예로 span a 이 있다.
inline 타입은 단락에서 흐름을 깨지않고 정보를 구성할 수 있다.
글이라면 한 문장내에 연속적으로 나타낼 수 있는 형태이다.
margin과 padding은 좌우만 반영. 상하는 무시된다.

block

대표 예로 div p 이 있다.
block 타입은 새줄로 시작하며 페이지의 좌우를 꽉 채워쓰는 형태이다.
한 줄내에는 해당 태그를 적용한 요소만이 나타나게 된다.
기본적으로 width:100%;를 갖고있다.
width, height, margin, padding 모두 반영된다.

inline-block

요소의 배치를 inline과 유사하게 할 수 있지만, 너비나 높이를 지정할 수 있다.
(block처럼 width, height, margin, padding 등이 적용됨.)
요소들을 자연스러운 간격으로 연속적으로 배치시킬 수 있는 타입이다.

none

화면에 나타나지 않게 함. 요소가 차지한 영역까지 없앤다. 이와는 달리 visibility:hidden 속성은 영역을 남긴다.
기껏 만든 것을 없엘필요가 있나 싶지만, 유저의 움직임에 반응하여 없었던 것이 나타나는 것과 같은 요소를 만들기 위해서 들어가는 타입이다.

position - relative, absolute, fixed

relative

별도의 속성 없이는 기본값인 static과 동일하다.
(top, right, bottom, left)속성을 사용함으로써 원하는 거리만큼을 기존위치에서 이동 조정한다.
위치를 잡을 때 잡아 주는 기준이 되는 역할.

  1. 적용된 요소는 레이아웃의 변동이 없다(그자리임)
  2. 적용된 요소의 크기는 내용의 크기만큼 자동으로 인지되지 않는다.
  3. 자기자신(원래 있던자리)이 기준.
    (원래 있던 자리에서 상대위치(left, right, top, bottom)를 정한다.
    (left, right, top, bottom으로 위치를 잡으면 실체가 움직이는 것이 아니다.)
    실체가 움직이려면 margin을 이용해야 한다.

z-index
태그들이 겹칠 때 누가 더 위로 올라가는지를 결정하는 속성. 기본값은 0이다.

absolute

static이 아닌 조상을 기준으로(혹은 없다면 문서 본문) 위치를 이동시킨다.
즉, 원래 위치와 상관없이 위치를 지정할 수 있다.
relative와 동일하게 (left, right, top, bottom)로 위치를 지정한다.

fixed

페이지가 스크롤되거나 움직여도 화면상에서 같은 위치에 위치한다.
화면을 기준으로 위치를 잡기 때문에 다른 요소들의 이동과 상관없이 고정된다.

profile
한걸음씩

0개의 댓글