20210706

choigyeongshin·2021년 7월 6일

학습한 내용

메뉴버튼, 카카오톡 친구 리스트, 네이버 리빙, 뉴스

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="#">다음</a>
		</li>
	</ul>
    </nav>
</body>
</html>

kakao.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="#">다음</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>
    </ul>
</body>
</html>

style.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-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;
}

.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 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;
}