레이아웃 3일차

---

시작하기 전에

강의 시청을 시작할 때 2일차에 3일차 분량까지 전부 진행했다는 걸 깨달았다.
어차피 아직 잘 이해가 가지 않으니 두 번 공부한다 생각하고 한 번 더 공부한 후 작성한다.

---

포털 사이트 레이아웃 연습

메뉴 버튼 - 카카오 - 네이버 html 을 천천히 다시 뜯어보겠다.

---

index.html

잘 보면 네이버 버튼만 파란색인데, 마우스 오버된 상태에서 파란색을 띄게 만든 것이다. 이 기능은 아래 .menu li a:hover 에서 구현되었다.

(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>
(css)
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;
}

ul 에서 전체 레이아웃을 브라우저 원점(왼쪽 최상단)에 붙이고
.menu ul 에서 버튼 레이아웃을 부모 레이아웃으로 묶었다.
이 때, 부모 레이아웃은 overflow: hidden으로 버튼 레이아웃의 높이에 영향을 받는다.
.menu li, .menu li:last-child 에서 각 버튼의 크기와 테두리를 정하고,
.menu li a 에서 각 버튼의 글자 위치와 버튼 양식(block)을 정한다.
(display: block은 li에서 직접 크기를 정할수도 있다.)

---

kakao.html

위의 index.html 의 것을 복사하고, 다음의 코드를 추가로 작성하였다.

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

5 개 모두 같은 프로필이므로 이 코드를 5 번 복사하면 된다.
이에 대한 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: 18px;
}
.kakao-lists li .kakao-info span {
	font-size: 14px;
	color: #c8c8c8;
}

가장 작은 레이아웃부터 역순으로 설계되었다.
.kakao-lists li .kakao-info span 에서 프로필의 크기와 색을 지정,
.kakao-lists li .kakao-info h3 에서 이름의 크기를 지정한다.
.kakao-lists li .kakao-info 에서 display: inline-block으로 묶인 레이어는 다른 레이어와 줄 바꿈 없이 가로로 정렬된다. 이름과 프로필은 세로로 묶여있고 img 레이어와 묶인 레이어 끼리 정렬되었다.
.kakao-lists li img 에서 이미지 테두리와 주변 여백을 정하고
img와 kakao-info 를 vertical-align: middle로 세로로 가로정렬한다.
.kakao-lists li a 에서 한사람의 프로필을 엮고 왼쪽 여백을 정한다.
.kakao-lists li 으로 프로필 마다 아래 여백을 준다.

---

naver.html

(html)
<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 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">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)
.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;
}

포스트와 뉴스 타이틀 파트로 나뉜다.
예시는 다음과 같다.

위의 kakao.html 처럼, 오른쪽 레이아웃들을 display: inline-block으로 묶어 왼쪽 사진과 가로 정렬을 한다. 그 외엔 큰 차이가 없는 것 같다.

뉴스 타이틀에서는 좌우 버튼에 대한 위치 속성을 주었는데, btn-wrap 태그 아래에 btn-left-wrap와 btn-right-wrap의 중간 부모 태그를 주어 2개의 큰 레이어로 간주, flexbox 에서

와 같이 조정해주면

와 같이 css 코드가 출력된다.

---

어려웠던 점 및 해결 방법

네이버 기사 타이틀에서 button 레이아웃들이 위치속성이 따로 정해지지 않았는데도 가로로 정렬되는 부분은 잘 이해가 가지 않았다. 코드를 따로 수정해보고 다른 참고사이트들을 뒤져보니 같은 부모 레이아웃으로 묶인 button 레이아웃들은 자동으로 가로로 정렬되는 듯 하다.

학습 소감

왠지 어제 학습이 어렵더라...싶었는데 2일짜리 학습을 한거였다. 어제는 이해하기 어려워서 대충 넘어간 부분을 오늘 다시 짚어보니 생각보다는 간단한 구조였다. 하지만 flexbox에서 만든 위치속성 태그들은 아직 완전한 이해가 어려우니 좀 더 연습 해봐야 할 듯하다.

진행한 코드 링크

오늘 진행한 자세한 코드는 내 github 링크 에 업로드 되었다.