1) 학습한 내용
오늘은 지금까지 학습한 내용으로 메뉴를 만들어 기본 레이아웃을 진행해보았다.
1. index.html
-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="menu">
<ul>
<li>
<a href="index.html">메뉴 버튼</a>
</li>
<li>
<a href="kakao.html">카카오</a>
</li>
<li>
<a href="naver.html">네이버</a>
</li>
</ul>
</nav>각각의 메뉴 파일을 만들고 그 파일이 태그의 href로 들어갈 수 있도록 지정해준다.
-css
html, body {
margin: 0;
padding: 0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
/*공백 제거 작업*/
}
a {
color: #000000;
text-decoration: none;
}
/*여기까지 초기화작업*/
.menu ul {
overflow: hidden;
/*자식의 li 태그가 부모의ul 태그에 영향을 주기 때문에,
overflow hidden 사용으로 부모의 높이값 인식*/
background-color: pink;}
.menu li{
/*display: inline-block;*/
float: left;
/*display: inline-block; 를 사용하면 x축 정렬에 공간의 크기를
유지할 수 있다. but inline 은 기본저으로 각 사이에 공백이 있다.
그래서 지금 만들고자하는 메뉴는 공백이 없기때문에 사용 x
-> float: left; 사용으로 왼쪽에서부터 정렬
*/
width: 100px;
/*height: 50px;*/
background-color: yellow;
/*border: solid 1px red;
각 박스에서 겹치는 부분이 2px로 되기때문에 더 디테일하게*/
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*text-align: center;*/
/* line-height: 50px;
height와 동일 값 넣기 but 간혹 서체에 따라 달라짐
-y축 중앙정렬*/
/* padding-top: 15px;
padding-bottom: 15px;
높이 값이 없을경우 박스안의 위아래 동일한 공백생성
으로 중앙정렬 */
}
.menu li a {
display: block;
/*박스안 글자 뿐아니라 모든 공간을 클릭할 수 있도록*/
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
color: blue;
/*마우스 올릴때 색변경*/
}
.menu li:last-child {
border-right: solid 1px red;
/*border 값을 디테일하게 지저해주다보면 한쪽만 남을경우
이렇게 따로 값을 지정해주어 완성한다.
-가상선택자*/
} 
(그림을 보면 겹치는 부분이 두배의 굵기의 border로 바뀌는게 보인다.)
2. kakao.html
-html
<ul class="kakao-lists">
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="http://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
</ul>
</body>
</html>-css
.kakao-lists li {
margin-bottom: 20px;
}
.kakao-lists li a{
display: block;
padding-left: 25px;
}
.kakao-lists li img,
.kakao-lists li .kakao-info{
vertical-align: middle;
}
.kakao-lists li img {
border-radius: 20px;
margin-right: 10px;
}
.kakao-lists li .kakao-info{
display: inline-block;
}
.kakao-lists li .kakao-info h3{
font-size: 18px;
margin: 0;
}
.kakao-lists li .kakao-info span{
font-size: 14px;
color: #c8c8c8;
}
3. naver.html
-html
<li>
<a href="#" class="image-link">
<img src="http://via.placeholder.com/170X114">
</a>
<a href="#" class="info-link">
<div class="living-info">
<span>리빙</span>
<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 살아요.</h3>
<p>Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you </p>
<div class="date-warp">
<span class="source">집꾸미기</span>
<span class="date">2주일 전</span>
</div>
</div>
</a>
</li>
</ul>
<div class="title-wrap">
<h3>임대차 9개월, 서울 전세줄고 월세늘었다.</h3>
<div class="btn-wrap">
<div class="btn-left-wrap">
<button type="button">좋아요</button>
<button type="button">댓글</button>
</div>
<div class="btn-right-wrap">
<button type="button">요약</button>
<button type="button">크기</button>
<button type="button">팩스</button>
<button type="button">공유</button>
</div>
</div>
</div>
</body>
</html>-css
h3,p {
margin: 0;
}
.living-lists {
width: 750px;
background-color: orange;
}
.living-lists .image-link,
.living-lists .info-link {
display: inline-block;
vertical-align: middle;
}
.living-lists .image-link {
margin-right: 21px;
}
.living-lists .info-link {
width: 512px;
}
.title-wrap {
border-top: solid 2px #000000;
border-bottom: solid 1px #000000;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 20px;
}
.title-wrap h3 {
margin-bottom: 20px;
}
.title-wrap .btn-wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
align-content: stretch;
}
/*flexbox.help 참고*/
/*css레이아웃을 배웁시다 https://ko.learnlayout.com/ 페이지 참고*/
2) 학습내용 중 어려웠던 점
네이버 리빙부분을 실습하는데 계속 나는 밑의 사진과 같이 h3와 p에 마진값이 디폴드값으로 들어가서 나와서 한참을 헤메었다.
그래서 마진값이 잡혀있어서 저둘의 태그의 마진값을 0으로 바꾸어도 선생님과 같이 딱 떨어져 나오지 않았다.
그래서 글자수를 줄여 선생님과같이 2줄 정도의 내용만넣으니 똑같이 되었다.
3) 해결방법
css 작성을 할때는 각브라우저 마다 기본적인 설정값이 달라 발새할 수있는 문제라고 한다.
이런 부분들을 해결하기 위해서 css 초기화를 진행해주어야한다.
하지만 CSS 비전문가가 각 브라우저 및 각 브라우저 버전에 내장된 스타일 값을 알 수 없고, 현재 트랜드를 반영할 수 없기 때문에 전문가들이 제작한 CSS 초기화 문서를 참고해야 한다.
나는 h3와 p부분이 ul에 속해서 처음 ul부분에서 초기화값을 진행해주었기 때문에 괜찮다고 생각을 했는데, 그게아니었다. 그래서 따로 h3와 p에 마진값을 설정해주었다.
아직도 이게 잘 해결 된건진모르겠지만, 선생님과는 같게 나왔다!
하지만
다시 부모와 자식관의 관계 형제관계를 좀더 살펴보고
css 초기화 에 대해서도 더 살펴봐야할것같다.
4) 학습소감
오늘은 지금까지 하면서 봉착한 문제들중 제일 해결하기가 어려웠다. 다시 지워가며 처음부터 다시해보기도하고 하나하나 값들을 없애보며 어디서 부터 잘 못되었는지도 살펴보고, 선생님과 다른게 없는지 동영상도 다섯번은 더 돌려보고 네이버 검사와 내가 한것의 차이도 살펴보았지만, 마진 값이 설정되어 있다는 것 밖에 알수가 없어서 조금 힘들었다.
그래도 멘토님이 계셔서 해결 하였지만 여전히 이게 잘 해결된건지는 잘 모르겠다. 다른 속성들이 영향을 끼치진 않았는지 좀 더 공부를 해야할 것같다.
그치만 오늘 혼자서 문제점을 해결하기위해 했던 것들로 결국은 마진값이 차이가있다는 것을 알고 마진 값을 바꾸어보니 같아지는 것을 보았고, 또 멘토님을 통해 내가 했던 해결방법이 맞았다는 것을 알 수있어서 뿌듯했다.
앞으로도 많은 문제들이 나를 괴롭힐 것 같지만 그래도 오늘 처럼 포기 하지 않고 잘 찾아보면 좋겠다 :)
