200915 TIL Layout

journey·2020년 9월 15일
0

layout이란 웹사이트를 구성하는 elements를 배치할 공간을 분할하고 정렬하는 것입니다. 일반적으로 공간을 분할할 때 행을 구분한 후, 각 행 내부 요소를 분리합니다. 최근 모바일, 데스크탑 등 사용자가 접할 수 있는 디바이스가 다양해지며, 각각 화면의 크기에 따라 적절히 화면 구성을 변화시키는 반응형 웹디자인(Responsive Web Design)의 중요성이 커지며 layout에 대한 이해는 개발자에게 필수 사항이 되었습니다.

display:;

1. display: block;

항상 새로운 라인에서 시작하고 화면 크기 전체의 가로폭을 차지합니다. (width:100%;height:auto;)

2. display: inline;

새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있습니다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다. content의 너비만큼 가로폭을 차지한다.
width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없지만 상, 하 여백은 line-height로 지정할 수 있습니다.
inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
inline레벨 요소 내에 block 레벨 요소를 포함할 수 없고, inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

3. display: inline-block;

inline 레벨 요소처럼 content의 너비만큼 가로폭을 차지하며, 다른 요소와 함께 같이 한 줄에 위치합니다.
block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 지정할 수 있습니다.
상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
inline-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정됩니다.
vertical-align: top; 등 과 함께 쓰입니다.

4. display: none;

script와 같은 일부 특별한 element는 none을 기본값으로 사용하기도 합니다.
이 값은 자바스크립트에서 엘리먼트를 실제로 삭제하고 재생성하지 않고도 element를 보이고 감추는 데 흔히 사용됩니다.

display: none; VS visibility: hidden;
display: none;는 엘리먼트가 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다.
visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라고 여전히 공간을 참여합니다.

float: right|left|inherit;

float는 이미지 주위를 텍스트로 감싸기 위해 만들어진 것 입니다.

clear: right|left|both|inherit;

clear는 float의 동작 방식을 제어하는 데 중요합니다. float를 가진 엘리먼트와 겹치는 경우, 겹치게 된 엘리먼트에 clear 값을 주면 됩니다. clear를 가지게 된 엘리먼트는 좌, 우 측을 깨끗하게 치울 수 있습니다.

overflow: auto|hidden;

clearfix를 하기 위해 쓰이는 간단한 방법입니다.
overflow: hidden;을 하게 되면 컨테이너 밖에 위치하게 된 콘텐츠를 잘라내며 스크롤바가 생성되지 않습니다.

position:;

static을 default값으로 가지며, static 외의 다른 값을 가질 때, 해당 element의 위치가 지정됐다고 표현합니다.

1. position: fixed;

viewport에서 상대적으로 위치가 지정되는 데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻입니다.
top, right, bottom, left 프로퍼티를 사용해 뷰포트를 기준으로 상대적인 위치를 지정할 수 있습니다.

2. position: relative;

별도의 프로퍼티를 지정하지 않으면 static 과 동일하게 동작합니다.
음수, 양수 값을 가지는 top, right, bottom, left 프로퍼티를 통해 기본 위치와 다르게 위치가 조정됩니다. 다른 콘텐츠는 해당 엘리먼트에서 남긴 공백에 맞춰 들어가게끔 조정되지 않을 것입니다.

3. position: absolute;

뷰포트에 상대적으로 위치가 지정되는 게 아니라 가장 가까운 곳에 위치한 조상 엘리먼트에 상대적으로 위치가 지정된다는 점을 제외하면 fixed 와 비슷하게 동작합니다.
절대 위치가 지정된 엘리먼트가 기준으로 삼는 조상 엘리먼트가 없으면 document body 문서 본문을 기준으로 삼고, 페이지 스크롤에 따라 움직입니다.

profile
J for Journey

0개의 댓글