평소 일할 때 컴포넌트에 대해서 스타일 수정하고 적용하는 작업은 많이 하는데
빈 페이지에 처음부터 스타일을 잡고 적용시킨 건 아주 오래 전 개인 프로젝트할 때 말곤 없어서 막상 구현하려니 헷갈리고 좀 어려웠다.
간단해보이는 웹 페이지인데도 스타일을 적용하고 지우고 또 적용하고 또 지우고를 반복했다.
뭐든 처음에 구조를 탄탄하게 잡아둬야 무너지지 않는다.
다음에 또 구현할 때 헷갈려서 구글 검색을 하게 될 게 뻔하기 때문에 웹 페이지 구조를 잡는 비법(?)에 대해 미리 정리를 해보았다.
프로그래머스 "만들면서 배우는 실전 퍼블리싱" 스터디에서 강의를 들으면서 + 과제를 해나가면서 + 구글 검색으로 이루어진 내용이다.
<웹 페이지 구조 잡기>
Header, Main, Footer로 구성된 보통의 웹 사이트 구조를 예시로 구현해봤다.
요소를 가운데 정렬하는 방법
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}전체 요소를 가운데 정렬하려면 display flex를 사용하면 쉽게 정렬할 수 있다.
가장 최상위 body 태그에 display flex 설정을 해 주고 가로, 세로 (justify-content, align-items) 모두 center로 맞춰주면 된다.
그러면 화면 가운데에 맞춰지긴 하는데 요소가 페이지 상단 가운데에 있을 것이다.
이는 min-height: 100vh;를 적용해주면 해결할 수 있다.
(vh는 화면 크기를 기준으로 %높이를 설정하는 것을 의미한다. 화면 기준 꽉차게 높이를 설정하려면 100vh를 쓰면된다.)
HTML 구조 설계
body 태그 안에 다음과 같이 요소들을 추가하는 것도 좋으나
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</body>
</html>이 경우에는 요소 전체에 같은 너비를 적용할 때 불편한 점이 있다.
body {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: center;
align-items: center;
max-width: 960px;
gap: 16px;
}
header,
main,
footer {
background-color: #a5b1c2;
width: 100%;
}body 태그에 max-width: 960px을 주고 header, main, footer 모든 요소에 같은 너비를 적용하기 위해 width: 100%를 적용해야 한다. 새로운 요소가 추가되면 또 거기에 width: 100%를 추가해야하니 좀 귀찮고 유지보수가 어렵다.
이를 해결하기 위해선, 모든 요소들을 큰 박스로 감싸주면 된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="wrap">
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</div>
</body>
</html>div 태그로 전체를 한 번 감싸줬다.
"wrap"이란 아이디를 주어 감싼 태그라는 의미를 담아주었다.
body {
display: flex;
justify-content: center;
align-items: center;
}
#wrap {
display: flex;
flex-direction: column;
width: 100%;
gap: 16px;
min-height: 100vh;
max-width: 960px;
}
/* main 꽉차게 */
main {
flex: 1;
}#wrap에 width: 100%을 적용하여 모든 요소들에 한번에 적용하였다.
div 태그에 id는 wrap으로 주고 크기를 잡아주면 나중에 전체 사이즈를 변경할 때도 #wrap 내의 스타일만 변경해주면 되니 편리하다.
참고로 감싼 태그를 표시할 때 주로 wrap, wrapper 클래스/아이디 명을 사용한다.
그리고 id 값보단 class를 사용해주는 게 좋다. id는 페이지 내에 같은 이름 중복이 불가능하기 때문에 누군가와 협업할 때 서로 영향을 받을 수 있기 때문에 꼭 id를 써야하는 경우엔 이러이런 id 값을 부여했다고 공유해야 한다.
나는 혼자 만드는 중이라 내맘대로 id를 사용했다.
HTML5 태그
HTML5에서 시맨틱 태그가 새로 등장하였으며, 시맨틱하지 않은 div태그 사용보다는 시맨틱한 header, main, footer, aside 등의 태그를 사용하는 것이 좋다.
제목 요소나 로고 등 도입부에 해당하는 컨텐츠를 주로 넣는 header 영역,
마지막에 저자 정보, 연락처 등 페이지 하단에 주로 표현되는 footer 영역,
주요 콘텐츠가 들어가는 main영역으로 구조를 나눠줬다.
그 외의 시맨틱 태그로는 사이드바를 구현할 땐 aside, 독립적인 컨텐츠를 나타내는 article 요소 등이 있다.
H1 태그는 한 페이지에 한 번만
큰 글씨라고 h1 태그를 남발하면 안된다.
h1은 제목을 나타내기 때문에 한 페이지에 한 번만 사용하는 것이 좋다.
그외의 헤딩태그 (h2 ~ h6)는 여러번 사용할 수 있다.
제목이 다음 페이지와 같이 로고 이미지여도 h1 태그를 사용하는 것이 좋다.
다음 페이지의 개발자도구를 열어보면 h1 태그 내에 img 태그를 넣어준 걸 확인할 수 있다.
이렇게 웹 페이지를 구현할 때 기본적으로 알아두면 좋을 HTML/CSS에 대해 정리해 보았다.
앞으로 웹 페이지 구조에 익숙해질 수 있게 자주 만들어봐야겠다.
'개발자취 > HTML과 CSS' 카테고리의 다른 글
| [HTML 태그] label 태그와 input 태그 (0) | 2021.07.11 |
|---|