학습한 내용

저번 실습수업에서도 만들었던 카카오 친구 리스트, 네이버 메인화면, 네이버 뉴스 부분의 틀을 만들고 거기에 CSS를 적용해서 정렬을 했습니다.

카카오 친구 리스트

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<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="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>
		<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>
</body>
</html>

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 {
	float: left;

	width: 100px;
	background-color: yellow;
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;
}

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

네이버 메인화면 리빙

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<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="https://via.placeholder.com/170x114">
			</a>

			<a href="#" class="info-link">
				<div class="living-info">
					<span>리빙</span>
					<h3>세 아이와 사는 집, 현무암 돌담을 두른 제주 전원주택</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 Nice to meet you Nice to meet you Nice to meet you Nice to meet you Nice to meet you</p>

					<div class="date-wrap">
						<span class="source">나무신문</span>
						<span class="date">어제</span>	
					</div>
				</div>

			</a>
		</li>
	</ul>
</body>
</html>

.living-lists {
	width: 750px;
	background-color: mintcream;
}

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

네이버 뉴스 기사

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<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>
		<div class="title-wrap">
		<h3>버려지는 폐수에서 이산화탄소 없애고 '마그네슘' 뽑아쓴다</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>

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

학습한 내용 중 어려웠던 점 또는 해결못한 것들

상하좌우 모든 곳에 공백을 적용하는 것과 정렬할 때 flex를 입력하는 값을 아직까지 어떤 것을 사용해야 하는지가 기억이 나지 않아서 어려웠습니다.

해결방법 작성

강사님께서 알려주신 flexbox.help 사이트를 통해서 제가 적용하고 싶은 옵션을 선택하면 flex 값들을 쉽게 입력할 수 있었습니다.

학습 소감

정렬하는 것과 디자인을 같이 적용하니 제법 홈페이지 다운 모양을 갖출 수 있게 되었습니다. 하지만 실습을 해봐도 역시 아직까지 전체적으로 강사님께서 알려주신 것을 따라하는 정도의 레벨이었습니다. 좀 더 익숙해 져서 스스로 작업을 할 수 있는 단계가 되면 네이버 메인 페이지를 만들고 아이콘들을 제가 좋아하는 디자인으로 바꿔보고 싶습니다.

Author And Source

이 문제에 관하여(개발일지(2021-07-06)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seobeomgyu/개발일지2021-07-06

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

개발일지(2021-07-06)