학습한 내용
코드
index(menu)
<!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>kakao
<!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>
<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>
</ul>
</body>
</html>naver
<!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>
<ul class="living-lists">
<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 youNice to meet youNice to meet youNice to meet youNice to meet youNice to meet you</p>
<div class="data-wrap">
<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
html, body{
margin: 0;
padding: 0;
}
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: solid 1px red;*/
border-top: solid 1px red;
border-bottom: solid 1px red;
border-left: solid 1px red;
/*text-align: center;*/
/*line-height: 50px;*/
/*padding-top: 15px;*/
/*padding-bottom: 15px;*/
}
.menu li:last-child {
border-right: solid 1px red;
}
.menu li a {
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
.menu li a:hover {
color: blueviolet;
}
.kakao-lists li img, .kakao-lists li .kakao-info{
vertical-align: middle;
}
.kakao-lists li{
margin-bottom: 20px;
}
.kakao-lists li a{
display: block;
padding-left: 25px;
}
.kakao-lists li img {
border-radius: 20px;
margin-right: 10px;
}
.kakao-lists li .kakao-info {
display: inline-block;
}
.kakao-lists li .kakao-info h3{
margin: 0;
font-size: 18px;
}
.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;
}학습내용 중 어려웠던 점
네이버나 카카오 사이트를 보고 배웠던 부분들을 적용하여 만들어보려고 하니 막상 어떻게 해야하지 하며 생각이 잘 안났다. 강사님의 설명이 없으면 아직 제대로 구현도 못하겠다는 생각이 들었다.
해결방법
몇번 더 반복하여 익히고, 스스로도 할 수 있도록 연습해야겠다.
학습소감
막상 홈페이지를 만들어보려고 하니 배웠던 부분들을 적용하는 과정에서 그 명령어?가 생각이 안난다. 많이 해보고 감을 익혀야될 것 같다. 그래도 재미있다.
hello