7월 6일 화
학습한 내용
<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> 
<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>
<ul class="kakao-lists">
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
</ul>
<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>
<ul class="living-lists">
<li>
<a href="#" class="image-link">
<img src="https://via.placeholder.com/170x114">
</a>
<a href="#" class="info-link">
<div class="living-info">
<span>리빙</span>
<h3>퇴사 후, 36년 된 노후주택을 고쳐 짓고 살아요.</h3>
<p>안녕하세요 저는 디자인을 전공해서 서울에서 디자니어로 일하다가 퇴사후 가족 곁으로 돌아온 화연씨 입니다. 작년 여름 퇴사를 고민하던 제게 시골와서 같이 놀자고 한 아빠 마음대로 하라던 엄마 그..</p>
<div class="data-wrap"></div>
<span class="source">집꾸미기</span>
<span class="date">2주일 전</span>
</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>/메뉴버튼 동그라미 제거/
ul {
list-style: none;
margin: 0;
padding: 0;
}
/글자 검은색, 언더바 제거/
a {
color: #000000;
text-decoration: none;
}
/부모 높이값 인식 시키기?/
.menu ul {
overflow: hidden;
background-color: pink;
}
.menu li {
/display: inline-block;/
float: left;
width: 100px;
/*height: 50px;*/
background-color: yellow;
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*border: solid 1px red;*/
/*text-align: center;
line-height: 50px;
padding-top: 15px;
padding-bottom: 15px;*/}
/가상선택자/
.menu li:last-child {
border-right: solid 1px red;
}
/a태그 클릭 영역 확대/
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;}
/마우스 올리면 색상 변경/
.menu li a:hover {
color: blue;
}
.kakao-lists li a {
display: block;
padding-left: 25px;
}
.kakao-lists li {
margin-bottom: 20px;
}
.kakao-lists li img,
.kakao-lists li.kakao-info {
vertical-align: middle;
}
.kakao-lists li a 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;
}
.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;
}
학습한 내용 중 어려웠던 점 또는 해결못한 것들
네이버 페이지를 작성 할 때 이미지 홀더 부분이 카카오 페이지의 이미지 홀더와 동일하게
라운딩이 들어갔다. 카카오 페이지에 적용된 css가 네이버 페이지에도 동일 적용되고 있었는데
강사님과 똑같이 코드를 입력한 것 같았는데 결과가 달라서 5분 정도 문제를 찾았단 것 같다.
해결방법 작성
역시나 휴면에러였다. ul 클래스 부분을 카카오에서 그대로 퍼온 그대로 입력되어있었다.
클래스를 바꿔줌으로 문제가 해결되었다.
학습 소감
어제 배운 내용은 복잡한 면이 있어서 오늘 실습이 어려울 것 같았는데 생각보다는 괜찮았다.
어제는 많은 비교적 많은 내용을 한 번에 다루었고 오늘은 그중에서 필요한 기능만 가져와서
전날 보다는 수월했다. 하지만 생각해내는 구조로 설계하기 위해서는 앞전에 배운 내용을 잘
익혀 두어야 할 것 같다.
