과제를 연습하던 중 여러가지,,, 실패가 있었다...
앞으로도 헷갈릴 것 같아서 기록을 해보려고 한다.
으악 이거 너무 어려워 ㅠㅠ
👇 초기 모습
(HTML)
<!DOCTYPE html>
<html>
<head>
<title>코드잇</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
<div id="navbar">
<a id="logo" href="#">
<img src="images/logo.png" height="25">
</a>
</div>
<div class="hero-header">
<div class="info">
<h1><b>코딩</b>, 스펙이 아니라 <b>필수</b>입니다.</h1>
<h2>코드잇은 코딩을 통해 생각하는 법을 가르칩니다.</h2>
<a href="#">더 알아보기</a>
</div>
</div>
</body>
</html>먼저 nav바 부분 - 선생님께서 해결한 방식이다.
#navbar {
padding: 0 20px;
border-bottom: 1px solid #eee;
overflow: hidden;
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
height: 60px;
}
#logo {
font-family: serif;
float : normal;
display: inline-block;
line-height : 60px;
}
#logo img {
vertical-align : middle;
}- #logo img { vertical-align : middle } : 먼저 nav의 img에 중앙을 맞추게 해준다.
(임시로 #logo 자식요소로 x를 적어놔줬는데, x가 img의 중앙으로 옮겨졌다.) - #logo { line-height : 60px } : nav의 height와 같은 값으로 line-height을 설정해준다.
nav바 부분 - 내가 알아보고 해결한 방식.
#navbar {
padding: 0 20px;
border-bottom: 1px solid #eee;
overflow: hidden;
background-color: white;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.50);
height: 60px;
line-height : 60px;
}
#logo {
font-family: serif;
display: inline-block;
line-height: normal;
vertical-align : middle;
}- #navbar { line-height : 60px } : nav의 height와 같은 값으로 line-height를 설정해준다.
- #logo { display : inline-block } : 길이를 설정해주고 하려면 display를 inline-block으로 설정한다.
- #logo { vertical-align : middle } : 세로 길이 중앙으로 설정해준다.
-> 이렇게 했는데도 아무것도 변하지 않았다. - #logo { float : normal } : float : left였던 값을 normal로 변경해준다.
-> 알아보니 float은 block속성이 기본적으로 갖고 있는 width : 100%와 유사한 특성을 상쇄시키면서 inline 속성과 어우러지게, 혹은 다른 block들과의 정렬을 유연하게 하기 위한 방법으로 주로 쓰인다고 한다. 따라서 정렬의 방법 중 하나인 float을 해버리게 되면 더이상 float된 해당요소는 vertical-align으로 정렬을 할 수가 없게 된다고 한다.
중앙부분의 글자 조정 ! - 동일했다
.hero-header {
background-image: url("../images/hero_image.jpg");
background-size: cover;
background-position: center center;
height: 670px;
line-height : 670px;
text-align: center;
}
.hero-header .info {
display : inline-block;
vertical-align : middle;
line-height : normal;
}- .hero-header .info { display : inline-block; } : info 속성을 길이 설정할 수 있게 inline-block으로 설정해준다.
- .hero-header { line-height : 670px; }
- .hero-header .info { vertical-align : middle; }
-> 여기서 문제가 생긴다.
line-height 속성은 자식들에게 상속되기 때문에 .hero-header 자식요소에는 line-height : normal을 무조건 설정해주어야 한다! - .hero-header .info { line-height : normal; }
👇 결과
기록하고 더 나아가기를