인프런 커뮤니티 질문&답변

밀꾸님의 프로필 이미지
밀꾸

작성한 질문수

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

3. 가로 100% 와이어프레임(B1~B4) - 보더를 사용해서 HTML+CSS 구조만들기

제 느낌대로 레이아웃을 짜봤는데 이렇게 해도 되는건가요 ?

작성

·

94

·

수정됨

2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="/레이아웃css/02_레이아웃가로100.css" />
  </head>
  <body>
    <div class="container">
      <div class="header-container">
        <header>
          <div class="header-logo"></div>
          <div class="navi"></div>
        </header>
      </div>
      <div class="slide-container">
        <div class="slide">
          <div></div>
        </div>
      </div>
      <div class="items-container">
        <div class="items">
          <div class="item1"></div>
          <div class="item2"></div>
          <div class="item3"></div>
        </div>
      </div>
      <div class="footer-container">
        <footer>
          <div class="footer-logo"></div>
          <div class="footer-box">
            <div class="footer-navi"></div>
            <div class="copyright"></div>
          </div>
        </footer>
      </div>
    </div>
  </body>
</html>
--------------------------------------------
.container {
}
.header-container {
  border: 1px solid red;
}
header {
  margin: auto;
  border: 1px solid black;
  height: 100px;
  width: 1200px;
}
header > div {
  border: 1px solid black;
  height: 100px;
  box-sizing: border-box;
}
.header-logo {
  width: 200px;
  float: left;
}
.navi {
  width: 1000px;
  float: right;
}
.slide-container {
}
.slide {
  border: 1px solid black;
  margin: auto;
  width: 1200px;
  height: 300px;
}
.items-container {
  overflow: hidden;
}
.items {
  border: 1px solid black;
  width: 1200px;
  margin: auto;
}
.items > div {
  border: 1px solid black;
  width: 400px;
  height: 200px;
  float: left;
  box-sizing: border-box;
}
.footer-container {
  border: 1px solid red;
}
footer {
  overflow: hidden;
  border: 1px solid black;
  width: 1200px;
  margin: auto;
}
footer > div {
  border: 1px solid black;
  height: 100px;
  box-sizing: border-box;
}
.footer-logo {
  width: 200px;
  float: left;
}
.footer-box {
  width: 1000px;
  float: right;
}
.footer-box > div {
  height: 50px;
  border: 1px solid black;
}
이런식으로 짜도 상관없는건지 물어보고싶습니당.

답변 2

0

css 클래스네임과 html 계층구조를 강의와 다르게 하셔서 연습하셔도 됩니다.

하지만 이런 경우에 질문하시면 제가 모든 것을 다시 하나씩 확인해야 하기 때문에 질문에 답변 드릴 때 좀 힘듭니다.

시험을 준비하는거니까 가급적이면 css 클래스네임과 html 계층구조를 영상과 똑같이 하셨으면 합니다.

밀꾸님의 프로필 이미지
밀꾸
질문자

아하 답변 감사합니다. 이런식으로 레이아웃을 잡아도 상관없는지 div를 여러개 써도 상관없는지에 대해 여쭙고 싶었습니다.

상관없어요. 하지만 나중에 안되실 때 질문하시면 css 클래스네임과 html 계층구조 달라서 답변 드리기 곤란해져서 그렇습니다.

0

밀꾸님의 프로필 이미지
밀꾸
질문자

아 item-container에 오버플로우 히든이 아니라 items에다가 했습니다.

밀꾸님의 프로필 이미지
밀꾸

작성한 질문수

질문하기