210706 개발일지

JANE Jeong·2021년 7월 6일
CSShtml대구AI스쿨레이아웃실습웹프로그래밍
0

대구 AI 스쿨

목록 보기
7/51
post-thumbnail

📌 학습한 내용

CSS 레이아웃 실습

(1) 네이버 홈 화면 '오늘 읽을만한 글' 탭

<!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>
html, body {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
}

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:  blue;
}

  • text-align: center; : x축 중앙 정렬

<.menu li를 y축으로 중앙 정렬 하는 법>

  1. 버튼의 높이값이 존재할 때, line-height (글자간 위아래 간격에 영향을 미치는 속성) 이용. -> 높이값과 동일한 값 적용, 폰트에 따라 달라질 수 있음.
  2. 버튼의 높이값이 없을 때, padding-top, padding-bottom 속성이용.

(2) 카카오톡 친구 리스트

<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>
html, body {
	margin: 0;
	padding: 0;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;  /*<ul>도 기본적으로 margin과 padding을 갖고 있음*/
}

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

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

(3) 네이버 리빙 탭

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

				<div class="date-wrap">
					<span class="source">집꾸미기</span>
					<span class="date">2주일 전</span>
				</div>
			</a>
		</li>
	</ul>
h3 {
	margin: 1px;
}
p {
	margin: 1px;
} 

.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) 네이버 뉴스 상단 탭

<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>
.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: stretch;
	align-content: center;
}

📌 학습내용 중 어려웠던 점

  1. .menu li a의 속성에 display: block;을 줬을 때 li부분이 모두 클릭 가능한 상태가 된 것은 <a>가 block 요소로 바뀌면서 width: 100px값을 가질 수 있게 되어서 그런것인가?
  2. 실습에서 padding과 margin을 넣을때 구분하는 법

📌 해결방법

<li>크기가 <a>크기를 인식해서 커졌다 라고 이해하면 될 것 같다고 강사님께서 답변해주셨다. 또한 다시 한 번 정리하자면, padding은 안쪽 여백으로 콘텐츠와 보더안의 공간을 설정하는 역할이며 margin은 바깥여백으로 요소와 요소사이의 공간을 설정할 때 사용한다.
참고 사이트 :
CSS레이아웃 : https://ko.learnlayout.com/

📌 학습소감

오늘까지 css레이아웃을 실습을 통해 복습하는 시간을 가졌다. 하지만 여전히 정렬에 있어서 헷갈리는 부분이 있다. float, flex, vertical-align 등 정렬에 있어서 활용할 수 있는 범위가 다양해서 이것 저것 개인적으로 시도해보고 있지만 그럴 수록 속성값도 다양해져 재미있으면서도 어렵다😂

profile
JANE Jeong
늘 새로운 배움을 추구하는 개린이 🌱
이전 포스트

210705 개발일지

다음 포스트

210707 개발일지

0개의 댓글