[HTML & CSS] HTML&CSS 레이아웃 설정하기

 우리는 책을 읽거나 웹툰을 볼 때 '좌에서 우','위에서 아래'로 보는 것이 자연스럽습니다. 이처럼 누가 가르쳐주지 않아도 자연스럽게 다양한 컨텐츠를 읽을 수 있는 이유는 우리가 이러한 환경이 익숙하기 때문입니다.

 CSS는 사용자와 애플리케이션이 상호작용 할 수 있도록 시각적 도움을 주는 역할을 수행합니다. 따라서 화면 레이아웃을 구상 할 때, '좌에서 우','위에서 아래'의 흐름으로 컨텐츠를 제작하는 것이 유저 경험 (UX: User Experience)적인 측면에서 좋습니다.

레이아웃을 설정 할 때는 기본적으로 '수직분할'과, '수평분할'을 적용하는데요,

• 수직분할: 화면을 수직으로 구분하는 것을 뜻합니다. (컨텐츠가 가로로 배치됩니다.) 
• 수평분할: 요소를 수평으로 구분하는 것을 뜻합니다. (컨텐츠가 세로로 배치됩니다.)

수직분할과 수평분할의 집합체 = 레이아웃

 

 

레이아웃 리셋

 간혹 레이아웃을 구성하는 것에 있어서 HTML의 기본값이 내가 구상한 레이아웃을 어긋나는 경우가 있는데요,

그것은 HTML의 기본스타일링을 제거하여 해결할 수 있습니다. 

 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}