21.07.06
화수목은 아무생각없이 할거하는날인거같어,.,.,
월요일은 힘들고 금요일은 주말생각하느라 먼가 안대 나만 그른가
코로나 빨리 끝나라아아아
project1 html문서-index, naver, kakao
index.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>
</body>
</html>kakao.html
<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>
<li>
<a href="#">
<img src="https://via.placeholder.com/50">
<div class="kakao-info">
<h3>김민호</h3>
<span>Minho Kim</span>
</div>
</a>
</li>
</ul>naver.html
<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>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="data-wrap">
<span class="source">집꾸미기</span>
<span class="data">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>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:hover {
color: blue;
}
.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;
}
.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;
}
html, body{
margin: 0;
padding: 0;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}브라우저저와 태그에 있는 기본 마진값과 패딩값 삭제
a{
color: #000000;
text-decoration: none;
}
text-decoration: 글씨에 밑줄이나 윗줄 중간줄 넣을때 사용.menu ul{
overflow: hidden;
background-color: pink;
}
overflow: hidden; : overflow 속성은 요소의 박스에 내용이 더 길 때 어떻게 보일지 선택하는 속성
hidden은 내용이 넘치면 잘라주는 속성.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:last-child : .menu li의 마지막 부분에 볼더값 추가
.menu li a{
display: block;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;}
.menu li:hover {
color: blue;
}
.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;
}
vertical-align: 수직정렬(x)지정
.kakao-lists li img{
border-radius: 20px;
margin-right: 10px;
}
border-radius: 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다
.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;
}
