책보고 무작정 따라하는 웹 사이트 설계 - 2편

책보고 무작정 따라하는 웹 사이트 설계 - 2편 -

지난 시간에 이어 오늘은 웹 사이트의

기본적인 레이아웃에 대하여 공부해 보겠습니다.

지난 시간에 HTML의 구조 중 <head>를 했었지요,

오늘 얘기 할 내용은

HTML 구조 중 <body>에 해당하는 내용이 되겠습니다.

(5) 레이아웃

웹 페이지를 구성하는 구조로 크게 세 가지로 나누어 볼 수 있다고 합니다.

먼저, 머리<header>, 몸<main>, 다리<footer> 이 세 가지로 나누어지는데,

몸의 경우, <section>으로 좀 더 세분화된 구조를 가질 수 있는 것 같습니다.

웹 페이지의 구조

보통

머리에는 회사의 이름과 로고, 메뉴바, 몸에는 회사에 대한 소개들과 제품이나 서비스에 대한 설명들

그리고 다리에는 저작권이나 사업자등록 및 주소 등에 대한 정보가 나뉘어 있음을

일반적인 웹 사이트를 들어가 보면 쉽게 접할 수 있습니다.

예시 티스토리

자, 이제 각각의 구역을 정의하는 태그에 대해서 보시겠습니다.

<header>, <nav>, <aside>, <article>, <footer>, <section>, <main> 등으로

다양하게 구역을 정의하는 태그들이 존재합니다.

① 머리부분

<body> 태그 안에서 <header> 태그를 정의해 줍니다.

그리고 회사 이름이나 주요 내용 등은 <h1>~<h6> 태그 등으로 헤드라인을 잡아주고,

<img> 태그로 회사로고나 브랜드 로고 등을 달아줄 수 있습니다.

그리고

메뉴바 같은 리스트형에 페이지 이동에 대한 버튼을 설정할 수 있는데

이때, 어제 배운 <ul>, <ol>, <li> 태그로 리스트를 만들어 주고,

<nav> 태그를 이용하여 버튼의 기능도 추가해 줄 수 있다고 합니다.

그런데!!!

<li> 태그를 이용하여 리스트를 구성하면,

세로로 나란히 목록이 만들어집니다.

<nav> 태그 사용

가로로 만들어 주고 싶을때는 요소?를 바꾸어야 한다고 합니다.

HTML에는 두 가지 요소로 크게 구분하면

block요소와 inline요소가 있다고 합니다.

block요소는 말 그대로 블럭 덩어리로

해당 태그가 끝나면 줄바꿈을 시전한다고 합니다.

inline요소는 이것도 말그대로 일직선으로 이어지는 구조라고 합니다.

그래서

block요소인 태그를 inline요소로 변환을 시켜줘야 한다고 하는데,

이때 사용하는 것이 display 속성 이라고 합니다.

display 속성은 크게 2가지로 나뉜다고 합니다.

display-outside,

display-inside

여기서

display-outside에 block요소와 inline요소가 연관대어 있다고 합니다.

그래서 어떻게 사용하느냐?

(갑자기 style은 또 뭐지..;;)

위 태그를 <head></head> 안에 넣어주면 된다고 합니다.

근데 이러면 li가 모두 inline이 되지 않나??

아무튼

위와 같이 됨을 확인 할 수 있습니다.

② 몸 부분

<main> 이나 <section> 태그를 선언해줍니다.

<main> 태그는 1번 밖에 선언이 되지 않는다고 합니다.

<main>과 <section>이 같은 기능이면 굳이 왜 따로 있는지는

알아봐야겠습니다.

<main> 태그의 단점 중에 익스플로러에서 지원이 안된다고 합니다.

그래서 이때는

<body>

<main role="main">

...

</main>

</body>

해주면 된다고 합니다.

한번만 선언할 수 있으니 이 구조는 필수겠네요.

<section> 태그는 말그대로 구역을 나타내고,

<aside> 태그는 본문 이외의 내용을 나타내고,

사이트바에서 많이 사용한다고 합니다.

<article> 태그는 본문을 나타내는 영역이라고 합니다.

구역 태그별 구역 표시 블록

이런 느낌이지 않을까 합니다.

이 부분은 특별히 정해진 표준은 없다고 하니

다양하게 시도해보면서 공부해야 겠습니다.

주의사항으로 <section> 태그와 <article> 태그는 <h2>~<h6> 태그중 하나를 꼭

함께 사용해야 한다고 합니다.

w3표준 검사에서 경고가 나온다고 하네요.

<div> 태그는 임의의 공간에 작은 구역을 만들때 사용한다고 합니다.

유지보수시 시간을 단축할 수 있는 용도로 사용할 수 있다고 합니다.

예를 들어, 여러 이미지의 위치를 이동 시킬 때

하나의 구역으로 묶어 이동한다거나하는 방법으로 <aside> 처럼

쓰기도 하는듯 합니다. 스킨편집에서 div 검색시 무수히 많이 나옵니다.

마지막으로

<footer> 태그는 웹 사이트 최하단의 구역으로 보통 사업자등록 정보나 주서, 연락처 등을

많이 적어주는 것을 볼 수 있습니다.

오늘은 여기까지, 3편에서 만나용~

☞ 책보고 무작정 따라하는 웹 사이트 설계 - 3편 -

☞ 책보고 무작정 따라하는 웹 사이트 설계 - 1편 -

저작자표시 비영리 변경금지

'강화도라이프 > 블로그 & 웹 사이트' 카테고리의 다른 글

[메모] 티스토리(TISTORY) 최적화 - 1편 - (0)	2019.09.19
책보고 무작정 따라하는 웹 사이트 설계 - 3편 - (0)	2019.09.02
책보고 무작정 따라하는 웹 사이트 설계 - 1편 - (0)	2019.08.25
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 3편 - (2)	2019.08.19
티스토리 블로그 스킨 꾸미기 - 사이드바(sidebar) 2편 - (0)	2019.08.18

책보고 무작정 따라하는 웹 사이트 설계 - 2편 -