head 부분 적용이 안되는거같습니다
본문
테마에 너무 의존하게 되어서 html 빈화면에서부터 작성하는 연습을 하는중인데 head구간이 안먹혀서 고민하다 질문 남겨봅니다.
style에 head {background:000;} 을 적용해봐도 색이 안먹네요. 혹시해서 border로 head를 감싸봤더니 아예 적용이 안되더라구요..
오히려 body {background:000;}를 하면 head 부분까지 통째로 색이 먹혀버립니다.
제가 뭔가 빼먹은걸까요?
style 은
html {background:#000; background-size:cover;}
#head {width:1200px; padding:0; margin: 30px auto;}
#logo {font-family: 'Song Myung', serif;font-size:20pt;font-weight:bold; text-align:right; padding:10px; border:3px solid #000; float:left; margin:10px; }
#nav {float:right; margin:30px 15px; font-size:14pt; font-family: 'Text Me One', sans-serif; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
#nav ul li {list-style:none; float:left;padding:10px 50px; }
#nav ul li:hover {color:#f23920; border-bottom:2px solid #f23920;}
#nav ul li:last-child:after {content:none;}
head {display:block; width:1200px; padding:0; margin: 30px auto; }
body {display:block; width:1200px; padding:0; margin: 30px auto; background:#fff;}
이고 html은
<html>
<head>
<div id="head">
<a href="#"><div id="logo">테스트</div></a>
<div id="nav">
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</div>
</div>
</head>
<body>
</body>
</html>
입니다 ㅠㅠ
+) 혹시해서 head {display:block; width:1200px; padding:0; margin: 30px auto; } 에 height:300px; 를 줘봤더니 아예 위에 새로운 300픽셀짜리 하얀 바탕이 생겼는데요 ㅠㅠ body구간에 들어가있다는 소리같은데 head에 분명 감싸서 쓴거같은데.. head 코딩 위치를 못찾겠네요 못쓰는건가요...?
답변 2
<head> ~ </head> 사이의 코드들을
<body> ~ </body>사이로 옮기세요.
님은 html 구조부터 다시 확인하셔야 할 듯합니다.
모든 웹상에 보여지는 부분은 <body>~ </body>안에서 구현하는 것입니다.
헌네님 답변 너무 감사합니다. 주신 답변 보고 다시 검색해보고 무슨 뜻인지 이해했습니다 제가 잘못이해하고있었네요..!
그럼 body 안에 그 코드들을 넣었다 하더라도 head 부분에 css로 height 값을 따로 줘야하는게 맞는건가요? body에 넣고나니 그 밑에 넣을 컨텐츠들이 head부분과 겹쳐서 나와서 일단 높이값을 주는걸로 해결보긴했는데 왠지 찜찜해서요.
height 값을 명확히 주는것이 좋기는 하지만 찜찜 하시다 싶으시면 overflow:hidden; 을 주는것도 괜찮을것같네요.
