웹페이지를 제작할 때 메뉴(웹페이지를 사용하는 바업)와 내용(웹페이지가 담고있는 정보)들의 적절한 배치를 통해, 누구나 쉽게 웹페이지를 파악하고 효율적으로 사용할 수 있도록 하는 것이 필수적이다. 이것을 우리는 웹페이지의 Lay-out이라고 부른다. Lay-out을 위한 각종 HTML요소와 CSS요소들을 알아보도록 한다.
1️⃣ Lay-out을 구성을 위한 HTML요소
: Lay-out을 위한 화면 구성을 생각할 때, 페이지를 어떻게 나누어서 어떤 정보들을 담을지 그려보게 된다. 페이지를 구성하는 부분 부분들도 각자의 HTML요소(Tag 이름표)가 있다. 이 요소를 사용하여 웹페이지를 구성하는 것은 가장 보편적이고 기본적인 웹페이지를 제작하는 가장 기본적인 조건이 된다. (이것은 경쟁력을 갖춘 웹페이지를 만들기위한 Semantic Web과도 긴밀하게 연결된다.)
✅ header
- 웹페이지의 가장 상단 부분을 구성.
- Navigation-bar(tag: nav)와 함께 구성 경우가 많음.
a tag를 통한 링크를 가지며, 링크들은 ul, li tag를 통한 목록으로 나열. - position값 fixed 값을 통한 상단부 위치 고정
✅ section
- 웹페이지의 main 부분의 콘텐츠 영역
- 정보전달을 위한 image, 영상 등이 포함
✅ aside
- 웹페이지의 부가정보영역
- a tag를 통한 링크를 가짐.
✅ footer
- 콘텐츠 영역 다음에 배치
- 페이지의 하단부에 고정되지만 position값은 fixed가 아닌 absolute를 부여하여 스크롤을 통한 웹 하단부에 위치
2️⃣ block, inline, inline-block
: 웹페이지를 구성하면 각 element들에 다른 element들과 어떻게 어울릴지 지정하는 요소들이다. element가 위치하는 줄(line)에서 단독으로 존재할지, 다른 element와 더불어 존재할지 여부가 기준이 된다.
✅ block
- element가 위치하는 줄에서 다른 element를 밀어내고 단독으로 존재시킨다.
- 위치하는 줄의 처음부터 끝까지 차지한다. (이미지나 콘텐츠가 줄에 꽉차지 않더라도)
- 단, width를 설정하여 width 너비 만큼 줄을 차지할 수도 있다.
- width를 설정할 경우 margin auto값을 통해 가로 중앙에 배치가 가능하다.
- semantic tag(lay-out tag 포함), div 등이 block요소에 해당된다.
✅ inline
- element가 위치하는 줄에서 다른 element와 함께 존재한다.(밀어내지않고 잘 어울린다.)
- span, a tag 등이 inline요소에 해당된다.
✅ inline-block
- block element에 inline 요소를 부여한다.
- inline element와 비슷하나 너비와 높이 지정이 가능하다.
- block 성질을 잃지 않아 element가 한줄에 들어가지 않는 경우 남은 공간이 존재해도 다음 줄로 넘어간다.
3️⃣ Float
: image주위에 text로 감싸기 위해 주는 요소
-
clear: right / left / both 값을 사용하여 float이 사용된 주변의 요소와 겹치지 않게 한다.
-
overflow: float이 적용된 이미지가 그 이미지를 담고있는 element보다 커 image의 일부분이 벗어날 경우 해결할 수 있는 방법
💁♂️Lay-out을 위한 CSS 기본값 세팅 Tip
-
Reset CSS 코드 사용: 웹페이지를 구현하는 브라우저에는 페이지에 대한 기본 default 값들이 존재한다. Reset CSS는 이러한 default 값들을 없애 정말 순수한 백지상태에서 페이지 Lay-out을 가능하게 한다.
✔️ 사용법: Reset CSS 홈페이지의 CSS코드를 사용한다.
https://meyerweb.com/eric/tools/css/reset/ -
box-sizing = border-box 사용: element 크기 및 위치를 조정할 때 padding, border 값으로 인해 element의 크기가 원래 설정한 크기와 다를 경우가 있다. 이러한 영향을 받지 않으며 element 자체에 지정하는 크기가 변하지 않도록 CSS에 설정해준다.
✔️ 사용법: HTML을 구성하는 전체 element가 box-sizing 속성을 가지도록 *(css전체선택자로) 지정해준다.
출처
