1. 학습내용
어제에 이어 오늘도 레이아웃을 만드는 걸 했다.
새롭게 배운 것들이 있어 그것만 정리해 보았다.
.lists li img,
.lists li .info{
vertical-align: middle;
}vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정한다.
대부분 이미지와 텍스트를 같은 요소에서 중간으로 배치하기 위해 많이 사용하고 있다.
텍스트 요소에는 line-height 를 주고 img 태그에 vertical-align: top 주고 쓰면 웬만한 경우에서는 원하는 결과를 낸다.
출처: https://mygumi.tistory.com/368 [마이구미의 HelloWorld]
flex는 부모공간에 display를 주고 flex를 주면 가로정렬을 기본으로 다양한 정렬을 할 수 있게 해준다.
아래 사이트에 원하는 배열을 예시로 코드를 가져올 수도 있다.
관련 사이트: https://flexbox.help/
text-indent는 문단을 들여쓰거나, 내어쓸 때 사용한다.
값이 양수면 들여쓰고, 음수면 내어쓰는데, 이때 화면을 벗어나기도 한다.
출처: https://www.codingfactory.net/10459
2. 어려웠던 점 및 해결방안
메뉴 태그에 마우스 호버 액션을 취했을때 버튼이 살짝 커지는 듯한 현상이 있었는데,
위에 선이 새로 생기기 때문에 그런 문제가 있어서 box-sizing:border-box를 해도 움직이는 듯한 동작이 없어지질 않았다.
그래서 동영상을 다시보니, 그냥 호버하지 않았을때 해당 메뉴의 리스트에 border-top을 추가해 주니까 해결이 되는 것을 알 수 있었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="menu">
<ul>
<li><a href="index.html">소개</a></li>
<li><a href="list.html">친구리스트</a></li>
<li><a href="news.html">뉴스</a></li>
</ul>
</nav>
</body>
</html>
<style>
.menu li{
/* display: inline-block; */ /*메뉴사이 공백 생김*/
float: left;
width: 150px;
/* height: 50px; */
text-align: center;
/* background-color: blue; */
/* line-height: 50px; */
padding: 15px 0;
border-top: 1px solid yellowgreen; /*hover했을때 추가되는 선의 굵기와 같은 px값을 줌*/
/* border-top: 1px solid red;
border-right: 1px solid red;
border-bottom: 1px solid red; */
}
.menu li:hover{
background-color: rgba(255, 255, 255, 0.3);
border-top: 1px solid red;
}
</style>3. 학습소감
레이아웃을 만들어보면서, 실제 배운것들을 많이 활용할 수 있었다. 새롭게 나오는 것들도 있었지만 어렵지 않게 알고 적용해 볼수 있었다.
