앞서 학습한 내용으로 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. footer section

하단 전체 영역

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 css

.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;
}

css 작업을 대충 마무리하면 위와 같은 화면이 나옵니다.

위 내용은 반응형 웹에 대한 정보가 아니며 정확하지 않은 정보가 포함되어 있을 수 있습니다.