• 카테고리

    질문 & 답변

  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

가르쳐 주신 내용을 응용해서 작업 중 문의 드립니다.

20.02.13 17:29 작성 조회수 169

1

선생님 강의 잘 듣고 있습니다.

강의 내용과 올려주신 소스를 참고해서 화면을 구성하고 있는데 어려움이 있어서 문의 드립니다.

전체 화면을 구성해보는게 처음이라 이해가 안가는 부분이 많이 있습니다.

바쁘시겠지만 가능하시다면 설명 부탁드리겠습니다!!!

파일 첨부가 안돼서 작업한 내용을 css, html 로 구분해서 작성했습니다.

*질문

1. #snb (좌측메뉴) 오른쪽에 border-right가 화면 끝까지 보여지도록 하려면 어떻게 하나요?

2. #content 하위의 h2의 경우 margin을 주려고 하니 시작점이 브라우저 끝인것 같습니다. #content에서 시작해야 할것 같은데 어디서 잘못한걸까요?

3. 2번과 비슷한데 #content 및 내부 DIV 들의 float, position을 문제 없이 적용한건지 알려주실 수 있나요?

----------------------------------CSS------------------------------------------------------

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
/*11-web폴더의 website.css를 참고하였습니다.
초기화 부분은 내용이 길어 제거하고 글 올립니다.
*/

/* reset */
body {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
}
.blind {
  display: block;
  position: absolute;
  left: 0;
  top: -9999em;
  overflow: hidden;
}
.skip a {
  position: absolute;
  left: 0;
  top: -9999em;
  z-index: 9999;
  display: block;
  width: 100%;
  background-color: navy;
  color: #efefef;
  text-decoration: none;
  text-align: center;
  line-height: 2;
}
.skip a:focus {
  top: 0;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
hr {
  display: none;
}

/* style */
#wrap {
  margin: 0 auto;
}

#header {
  position: fixed;
  top: 0;
  z-index: 30;
  width: 100%;
  background-color: #000;
}
#header .logo {
  float: left;
}
#header .logo a {
  display: block;
  padding: 0 20px;
  background-color: #4d6c8b;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 50px;
}
#header .logo a:hover {
  background-color: #ccc;
  color: #000;
}
#header .logo a i {
  margin-right: 10px;
}

#header .nav {
  float: right;
}

#header .btn_nav {
  width: 50px;
  height: 50px;
  border: 0;
  background-image: none;
  background-color: #333;
  color: #eee;
  font-size: 16px;
  line-height: 50px;
  cursor: pointer;
  float: right;
}
#header .btn_nav:hover {
  background-color: #ccc;
  color: #000;
}
#header .userifo {
  display: block;
  color: #eee;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  line-height: 50px;
  float: left;
  margin-right: 10px;
}

#header .lnb {
  position: absolute;
  top: 50px;
  left: -100%;
  width: 100%;
  cursor: pointer;
}
#header .lnb li a {
  display: block;
  padding-left: 20px;
  border-bottom: 1px solid #333;
  background-color: #222;
  color: #ccc;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
#header .lnb li a:hover {
  background-color: #ddd;
  color: #000;
}

#container {
  position: relative;
  width: 100%;
  top: 50px;
}
#snb {
  float: left;
  border-right: 1px solid #555;
  width: 200px;
  min-height: 600px;
  top: 10px;
}

#snav li a {
  display: block;
  padding-left: 20px;
  border-bottom: 1px solid rgb(39, 32, 32);
  font-size: 15px;
  color: white;
  background-color: #333;
  line-height: 40px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

#snav li .active {
  background-color: #06b3a1;
  color: white;
}

#snav li a:hover:not(.active) {
  background-color: #06b3a1;
  color: white;
  font-weight: bold;
}

#content {
  position: relative;
}
#content h2 {
  display: block;
  margin-left: 20px;
  line-height: 40px;
}

#content .box-top {
  display: flex;
}
#content .box1 {
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}
#content .box2 {
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}

#content .box-middle {
  display: flex;
}

#content .box3 {
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}

#content .box4 {
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}

#content .box5 {
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}

#content h3 {
  display: block;
  margin-left: 20px;
  line-height: 30px;
}

#content table {
  border: 1px solid #555;
  width: 100%;
}

----------------------------------HTML------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page</title>
    <link rel="stylesheet" href="css/fontawesome-all.min.css" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/website.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="header" class="clearfix">
        <h1 class="logo">
          <a href="#"><i class="fas fa-home"></i> Logo</a>
        </h1>
        <div class="nav" class="clearfix">
          <h2 class="userifo">홍길동</h2>
          <button type="button" class="btn_nav">
            <i class="fas fa-bars"></i> <span class="blind">My menu</span>
          </button>
          <ul class="lnb">
            <li><a href="#">내정보</a></li>
            <li><a href="#">로그아웃</a></li>
          </ul>
        </div>
      </div>
      <div id="container">
        <div id="snb">
          <ul id="snav" class="snb-nav">
            <li><a class="active" href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
          </ul>
        </div>

        <div id="content">
          <h2>타이틀1</h2>
          <div class="box-top clearfix">
            <div class="box1">
              <h3>타이틀2</h3>
              <table>
                <tr>
                  <th>col 1</th>
                  <th>col 2</th>
                  <th>col 3</th>
                </tr>
                <tbody>
                  <tr>
                    <td>
                      컬럼1......
                    </td>
                    <td>
                      컬럼2......
                    </td>
                    <td>
                      컬럼3......
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="box2">BOX 2</div>
          </div>
          <div class="box-middle">
            <div class="box3">BOX 3</div>
            <div class="box4">BOX 4</div>
            <div class="box5">BOX 5</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
course-thumbnail

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

답변 4

·

답변을 작성해보세요.

1

Sun.ahn님의 프로필

Sun.ahn

질문자

2020.02.14

선생님. 알려주신 코드로 해보니 잘됩니다.^^

이해가 안가는 부분이 좀 있지만 강의 다시 한번 보면서 공부해 보겠습니다.

감사합니다.

1

Dongho Lee님의 프로필

Dongho Lee

지식공유자

2020.02.14

- 2번 질문에서 #content 를 float 지정하지 않았기 때문에 끝에서 부터 계산하는 것이 맞습니다. margin-left: 210px 은 맞게 작성되었습니다. 하지만 #content 를 float 지정하는 것이 좋을 것입니다. float 지정할 경우에는 margin-left: 10px 처럼 지정하시면 됩니다.

- 플롯을 지정하고 크기를 1/3씩 지정한 다음 감싼 영역에는 :after 부분에 플롯을 해지해야 합니다.

제가 #container 와 #snb, #content 부분의 css 를 조금 손 봤습니다. 도움이 되길 바랍니다 ^^

---------------------------------------------

#container {padding-top: 50px}
#container:after {content: ''; display: block; clear: both}
#snb {float: left; border-right: 1px solid #555; width: 200px; height: calc(100vh - 50px); box-sizing: border-box}
#content {float: left; width: calc(100% - 200px)}
#content h2 {margin-left: 20px; line-height: 40px}
#content .box-top:after {content: ''; display: block; clear: both}
#content .box1, #content .box2 {float: left; width: 50%; height: 300px; border: #555 2px solid; box-sizing: border-box}
#content .box-middle:after {content: ''; display: block; clear: both}
#content .box3, #content .box4, #content .box5 {float: left; width: 33.3333%; height: 300px; border: #555 2px solid; box-sizing: border-box}

1

Dongho Lee님의 프로필

Dongho Lee

지식공유자

2020.02.13

1. #snb 영역에는 height 가 100%(에서 header의 50px을 제외하고)지정되어야 합니다.  실습에서 이렇게 꽉 채워지는 부분은 다루지 않았는데, 표현하면 height: calc(100% - 50px) 처럼 쓸 수 있습니다. 단, %의 단위는 상위의 크기를 상속받아 그 비례를 표현하므로 현재는 지정해도 적용되지 않을 것입니다. 이럴때 화면의 높이를 계산하는 vh 단위를 쓰면 쉽게 해결됩니다. height: calc(100vh - 50px)

2. header 가 position: fixed 지정되어 있어서 container 에서 position 지정하고 top: 50px 지정하셨는데, 이렇게 하면 됩니다. fixed 지정하면 그 뒤의 요소에서는 fixed 지정한 요소만큼을 강제로 띄어줘야 하니까요.

3. 사실  snb 를 float 지정하셨으면 content 도 float 지정하시는게 맞지 않을 까 싶어요. 그리고, content 내부에는 float 이나 position이 지정되지 않았습니다. 옆으로 펼쳐진 내용은 box-top, box-middle 에서 display: flex 를 지정했기 때문에 해결된 것이고 플롯이나 포지션은 제대로 지정되지 않았습니다. flex 를 지정하지 말고 float을 적용해 보셔야 될 것 같아요! ^^

0

Sun.ahn님의 프로필

Sun.ahn

질문자

2020.02.14

선생님 답변 감사드립니다.^^

응용해서 해보려니 어려웠는데 많은 도움이 되었습니다.

 선생님 답변 중 2번, 3번 에 대해  다시 문의 드립니다.

2번. 아래 html 의 '타이틀1'을 오른쪽으로 10px 정도 이동 시키려고 magin-left:210px 를 지정한게 맞는건가요?

(원하는대로 보여지긴 하는데 잘한 건지 모르겠습니다.ㅜㅜ)

제가 생각했던것은 #content Box 안에 h2 이기 때문에 magin-left:10px 주면 되지 않을까 생각했었습니다.

-html

      <div id="container">
        <div id="snb">
          <ul id="snav" class="snb-nav">
            <li><a class="active" href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
            <li><a href="#">메뉴3</a></li>
          </ul>
        </div>

        <div id="content">
          <h2>타이틀1</h2>

-css

#content h2 {
  display: block;
  margin-left: 210px;
  line-height: 40px;
}

3번 답변 처럼 저도 float 처리 하려고 했는데 위치가 조절이 안됩니다. 

아래 처럼 했는데 어떻게 해야 잘 적용될지 다시 문의 드립니다.

(원본 질문에서 아래 CSS 만 수정하였습니다.)

-수정한 css


#content .box1 {
  float: left;
  width: 50%;
  height: 300px;
  border: #555 2px solid;
}
#content .box2 {
  float: right;
  width: 30%;
  height: 300px;
  border: #555 2px solid;
}

#content .box3 {
  float: left;
  width: 30%;
  height: 300px;
  border: #555 2px solid;
}

#content .box4 {
  float: left;
  width: 30%;
  height: 300px;
  border: #555 2px solid;
}

#content .box5 {
  float: right;
  width: auto;
  height: 300px;
  border: #555 2px solid;
}

이 글과 비슷한 Q&A