프론트엔드 css 정리 [part 6] | layout

Duboo·2021년 12월 6일

CSS html

CSS

목록 보기

6/9

앞서 학습한 내용으로 BEM과 flexbox를 간략하게 사용해서 layout을 만들어 봅니다.

layout 구조

최대한 간단한 구조를 만들기 위해 구성 요소는 아래와 같습니다.

header section
- header logo
- navigation
content section
- banner
- content
  - main content
  - side content
footer section
- footer logo
- footer license

0. wrap

<!-- 전체 영역 -->
<div class="wrap">
</div>

필수는 아니지만 전체 영역을 잡기 위해 사용했습니다.

1. header section

상단 전체 영역

1-1. 헤더 영역을 위한 시맨틱 태그 <header>가 있으니 사용합시다.

<!-- 전체 영역 -->
<div class="wrap">
  
  <!-- 상단 영역 -->
  <header class="header"></header>
</div>

상단 영역의 블럭

1-2. 헤더 영역에는 로고와 네비가 들어갑니다.

이때 header의 자식으로 header__inner를 넣어 상단 영역에 들어갈 로고와 네비를 감싸줍니다.
- 이유는 header는 블럭으로 사용되기 때문에 마진, 패딩 등의 값을 넣을 수 없지만 엘리먼트에는 넣을 수 있기 때문에 추후에 위치를 잡는걸 도와줍니다.
네비를 위한 시맨틱 태그 <nav>를 사용합니다.

<header class="header">
  <div class="header__inner">
    <div class="header__logo"></div>

    <nav class="nav header__nav"></nav>
  </div>  
</header>

상단 영역의 블럭안에 엘리먼트

1-3. 각각의 블럭안에 필요한 엘리먼트들을 넣어줍니다.

<div class="header__logo">
  <a href="#">Logo</a>
</div>

<nav class="nav header__nav">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="#" class="nav__link">Home</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">Work</a>
    </li>
    <li class="nav__item">
      <a href="#" class="nav__link">About us</a>
    </li>
  </ul>
</nav>

nav는 블럭요소로 사용될 수도 있고 header의 엘리먼트로 사용될 수도 있습니다.
nav__list__item같은 형식이 아닌, nav__item으로 동일한 엘리먼트로 분류합니다.

2. content section

컨텐츠 전체 영역

2-1. 컨텐츠 영역의 전체 영역을 시맨틱 태그 <main>을 이용해서 만듭니다.

<!-- 컨텐츠 영역 -->
<main class="content"></main>

컨텐츠 영역의 블럭

2-2. 컨텐츠 영역은 배너와 전체 컨텐츠를 감싸는 엘리먼트가 있습니다.

<!-- 컨텐츠 전체 영역 -->
<main class="content">
  <!-- 배너 영역 -->
  <section class="banner"></section>
  
  <!-- 컨텐츠 내용 전체 영역 -->
  <div class="content__container"></div>
</main>

컨텐츠 영역의 블럭 채우기

2-3. 먼저 컨텐츠 블럭안에 배너 블럭의 엘리먼트를 채웁니다.

<!-- 배너 영역 -->
<section class="banner">
  <img src="http://placehold.it/1" alt="banner image" class="banner__img">
</section>

배너는 보통 슬라이드 이미지를 넣거나 링크등을 넣지만 간단하게 더미 이미지 하나만 넣겠습니다.

2-4. 컨텐츠의 내용은 메인 컨텐츠와 사이드 컨텐츠로 나뉩니다.

<div class="content__container">
  <!-- 메인 컨텐츠 엘리먼트 -->
  <section class="content__main"></section>
  
  <!-- 사이드 컨텐츠 엘리먼트 -->
  <article class="content__side"></article>
</div>

메인과 사이드 각 컨텐츠에 엘리먼트 넣기

2-5. 메인 컨텐츠 블럭과 사이드 컨텐츠 블럭 각각에 필요한 요소를 넣습니다.

<div class="content__container">
  <section class="content__main">
    <h2 class="content__main-title"></h2>
    <ul class="content__main-list">
      <li class="content__main-item">
        <h3></h3>
        <p></p>
      </li>
      <li class="content__main-item">
        <h3></h3>
        <p></p>
      </li>
      <li class="content__main-item">
        <h3></h3>
        <p></p>
        </li>
    </ul>
  </section>
  
  <article class="content__side">
    <h2 class="content__side-title"></h2>
    <p></p>
  </article>
</div>

하단 전체 영역

3-1. 하단 영역을 위한 시맨틱 태그 <footer>가 있으니 사용합시다.

<!-- 전체 영역 -->
<div class="wrap">
  
  <!-- 하단 영역 -->
  <footer class="footer"></footer>
</div>

하단 영역의 요소들

2-2. 헤더 영역에는 로고와 라이센스(보통 번호, 주소 등의 정보)가 들어갑니다.

<footer class="footer">
  <div class="footer__inner">
    <div class="footer__logo"></div>
    
    <div class="footer__info"></div>
  </div>
</footer>

하단 영역의 블럭안에 엘리먼트

3-3. 각각의 블럭안에 필요한 엘리먼트들을 넣어줍니다.

<footer class="footer">
  <div class="footer__inner">
    <div class="footer__logo">
      <a href="#">Logo</a>
    </div>
    
    <div class="footer__info">
      <p>© 2021-2021</p>
    </div>
  </div>
</footer>

html 결과물

내용은 Lorem으로 대충 채워주거나 아무 싸이트에서 복붙합니다.

그러면 대충 위와 같은 페이지가 나오는데 해당 페이지를 flexbox를 이용해서 배치시켜줍니다.

먼저 간단한 reset css 먼저 적용시켜줍니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

/* 네비의 높이가 100px이며 상단에 고정되기 때문에 미리 100px만큼의 여유를 줬습니다. */
.wrap { padding-top: 100px }

header css

css는 최소한으로 작성했습니다.

먼저 상단 부분을 작업해줍니다.

.header {
  width: 100%;
  height: 100px;
  z-index: 99;
  display: flex;
  position: fixed;
  top: 0;
}

블럭의 경우 margin, padding, position등.. 과같이 외부환경에 영향을 주는 속성을 주면 안되지만 상단의 경우 재사용될 가능성이 없기 때문에 position 속성을 넣었습니다.

앞으로 나오는 다른 블럭의 경우에도 이와 동일한 이유로 외부에 영향을 줄 수 있는 속성이 들어갈 수 있습니다.

/* 상단의 모든 요소를 포함하는 이너 요소입니다. */
.header__inner {
  width: 100%; 
  padding: 0px 200px; /* 좌우 여백 */
  display: flex; 
  justify-content: space-between;
  align-items: center;
}

.header__logo > a {
  font-size: 50px;
  color: black;
}

.nav__list {
  display: flex;
}

.nav__item {
  padding-right: 30px;
}

.nav__item > a {
  color: #1b1b1b;
}

centent css

.banner__img {
  width: 100%;
  height: 300px;
}

.content__main {
  flex-basis: 60%; /* flexbox의 아이템들의 크기 조율 */
  padding-right: 100px;
}

.content__container {
  padding: 50px 200px;
  display: flex;
}

.content__main-title {
  font-size: 40px;
  padding-bottom: 15px;
}

.content__main-list {
  margin-bottom: 20px;
}

.content__main-item > h3 {
  font-size: 20px;
  color: #005282;
  padding-bottom: 5px;
}

.content__side {
  flex-basis: 40%; /* flexbox의 아이템들의 크기 조율 */
}

.footer {
  width: 100%;
  height: 50px;
  z-index: 99;
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  background-color: #1b1b1b;
}

.footer__inner {
  width: 100%;
  padding: 0px 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.footer__logo > a {
  font-size: 30px;
  color: #fff;
}