HTML/CSS 06 : margin 과 width 의 관계 (Feat. Weegle 검색바)

11531 단어 CSSwidthmarginhtmlCSS 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="https://kit.fontawesome.com/4e67e0ee96.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header>
      <img class="logo" src="https://user-images.githubusercontent.com/61774575/95163201-34411c00-075c-11eb-9987-d6301acb4dab.png">
    </header>
    <div class="bar">
      <input class="searchbar" type="text">
      <i class="fas fa-search"></i>
      <i class="fas fa-keyboard"></i>
      <i class="fas fa-microphone"></i>
    </div>
    <div class="button-box">
      <button>Weegle 검색</button>
      <button>I'm feeling Lucky</button>
    </div>
    <div class="translate">
    <p>Weegle 제공 서비스 : <a href="">English</a></p>
    </div>
  </body>
</html>

저 Weegle 로고가 처음에 중간에 들어가질 않아서 2시간을 헤맸다. 저 로고를 중앙에 놓기 위해선 margin: 0 auto; 를 하면 될거라고 생각했다. 하지만 결과는 달랐다. 마진을 어떻게 정해도 계속 왼쪽에 align 이 되서 한참을 고민했다. 답은 <header>의 width 였다. 

<header>
  <img ...>
</header>

html 에서 img 태그가 header 안에 들어가 있다. 이럴 경우 header 의 width 를 무조건 먼저 지정하고, img 의 width: 100%; 이런식으로 해준다. width 값이 없을 경우 아무리 margin: 0 auto; 를 해도 마진값은 절대 변하지 않는다.

쉽게 생각하면 header라는 박스의 길이를 먼저 정해서 만들고 그안에 이미지를 100% 로 채워 넣는 개념인거 같다.

SUMMARY

margin 에 auto 값을 줄 경우엔 꼭 width 값이 제대로 주어졌는지 확인하자. 결국 stackoverflow 에 "why does margin 0 auto not work?" 라고 쳐서 알아냈다... 🤯

[백준4344_파이썬(python)] - 평균은 넘겠지
interface9-vs alrias

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage