Dev Log #7 - 7월 6일

Juhui_0304·2021년 7월 6일
CSSTILhtml대구AI스쿨
0

Dev Log

목록 보기
7/49

오늘 학습한 내용

✅ (실습) 네이버 메뉴버튼 만들기
✅ (실습) 카카오톡 친구 리스트 만들기
✅ (실습) 네이버 리빙 섹션 만들기
✅ (실습) 네이버 뉴스페이지 상단 만들기

1. 실습_네이버 메뉴버튼 만들기

👉 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="#">메뉴 버튼</a>
			</li>
			<li>
				<a href="#">카카오</a>
			</li>
			<li>
				<a href="#">다음</a>
			</li>
		</ul>
	</nav>

</body>
</html>

👉 css

/* 초기화 작업 */

html, body {
	padding: 0;
	margin: 0;
}

ul {
	list-style: none;
}

a {
	color: #000000;
	text-decoration: none;
}

/* 메뉴 */

.menu ul {
	overflow: hidden;
	background-color: pink;
}

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

👉 결과물

  • 글자를 y축으로 중앙 정렬하는 법은 크게 두가지이다.
  1. 버튼의 높이값이 존재했을 때 글자간 위아래 간격에 영향을 미치는 line-height 속성을 사용해서 동일한 값을 넣어주면 된다. 단, 어떠한 폰트 서체에 사용하는 지에 따라서 미묘하게 달라질 수 있다.
  2. 버튼의 높이값이 없으면 글자를 기준으로 위쪽 공간과 아래쪽 공간을 똑같이 만들어 준다. padding-top, padding-bottom 속성을 사용해서 중앙 정렬한다.

  • 메뉴버튼은 불안정하다. 메뉴버튼에 올렸을 때 하이퍼 링크 영역(클릭 영역)에 안들어오고 텍스트에 올렸을 때 하이퍼 링크 영역(클릭 영역)에 들어온다.

  • 클릭의 영역을 넓히고자 한다면 a태그의 범위를 넓히겠다는 것과 같다. 이때는 a태그 display속성을 block처리 한 다음 중앙 정렬 배치를 시켜준다.

  • li간격사이의 선 겹침현상은 border-top, border-bottom, border-left와 마지막 li에 가상 선택자로 last-child를 적용하여 겹침현상을 해결한다.

2. 실습_카카오톡 친구 리스트 만들기

👉 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 ="
				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>

👉 css

/* 카카오 */

.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 {
	margin: 0;
	font-size: 19px;
}

.kakao-lists li .kakao-info span {
	font-size: 14px;
	color: #999999;
}

👉 결과물

  • 멀티페이지를 만들 때 유용하게 사용하는 법이다. a태그의 href속성값으로페이지의 링크 주소 뿐만아니라 html 문서파일을 속성값으로 전달 할 수 있다.

  • 기본적으로 img태그는 inline-block 속성값을 가지고 있고 kakao-info는 display: inline-block으로 변경을 해주었다. 그렇기 때문에 vertical-align을 사용해서 x축 중앙정렬로 맞출 수 있었다.

3. 실습_네이버 리빙 섹션 만들기

👉 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>


	<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>jtbc ‘효리네 민박’에서 한겨울 차가 올라가지 못하던 가파른 곳, 제주 애월읍 소길리. 세 자녀를 둔 40대 초반 건축주 부부가 새 집을 짓기 위해 마련한 땅이 있는 위치다.</p>

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



</body>
</html>

👉 css

/* 네이버 */

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

👉 결과물

4. 실습_네이버 뉴스페이지 상단 만들기

👉 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>


	<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>jtbc ‘효리네 민박’에서 한겨울 차가 올라가지 못하던 가파른 곳, 제주 애월읍 소길리. 세 자녀를 둔 40대 초반 건축주 부부가 새 집을 짓기 위해 마련한 땅이 있는 위치다.</p>

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

	<div class="title-wrap">
		<h3>내년 최저임금 '24% 인상 vs 동결'…노사 신경전 고조</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

/* 네이버 뉴스 상단 */

.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 레이아웃 배치를 가지고 실습해보는 시간을 가졌다. 확실히 css 레이아웃을 배워서 구조나 틀을 익히기가 편했던 것 같다. 점점 모양을 갖추는 실습 결과물을 보면서 많은 것들을 배웠음을 확인할 수 있었다. 오늘도 역시 충분한 복습을 거쳐서 그런지 어려운 점은 없었다. 오늘 수업 중 가장 기억에 남고 중요하다고 생각한 부분은 카카오 친구 리스트 실습에서 kakao-info에 display: inline-block으로 변경을 한 후 vertical-align을 사용해서 img태그와 x축 중앙정렬로 맞춘 점이다. 오늘로 css 레이아웃 학습부분은 마무리가 되었다. 처음에 css를 이해하느라 고생했던 것들이 오늘 실습을 통해서 빛을 발휘한 느낌이다🔥 내일 새로운 내용 학습이 기대가 된다😊

profile
Juhui_0304
하루하루 성장하는 것을 목표로 합니다🌟
이전 포스트

Dev Log #6 - 7월 5일

다음 포스트

Dev Log #8 - 7월 7일

0개의 댓글