7月6日(レイアウト)

学習内容

メニュー

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

html, body {
	margin: 0;
	padding: 0;
}
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
a {
	color: #000000;
	text-decoration: none;
}

.menu ul {
	overflow: hidden; (li가 3차원이기 때문에 ul에 높이 영향을 주지 않으므로 overflow사용)
	background: gray;
}

.menu li{
	(display: inline-block;  x축 정렬하면서 크기 유지, but 공백이 생겨서 안됨)
	float: left;

	width: 100px;
	height: 50px;
	background: yellowgreen;
	border-top: solid 1px red ;
	border-bottom: solid 1px red;
	border-left: solid 1px red;
				-->border 전체적으로 주면 겹치는 border가 있기 때문, 오른쪽은 별도로 값을 준다

	/*border: solid 1px red;*/

	/*text-align: center;*/
	/*line-height: 50px; (height값이 있으면 line-height와 동일한 값을 준다,y축 중앙정렬)*/

	/*padding-top: 15px;*/
	/*padding-bottom: 15px; (height값이 없을 때 padding top, bottom 속성값을 주어서 y축 중앙정렬)*/
}

.menu li:last-child {
	border-right: solid 1px red;
}
			-->border의 오른쪽값, 가상선택자 이용
.menu li a {
	display: block;
	text-align: center;

	padding-top: 15px;
	padding-bottom: 15px;
}
		--> a태그 안에서 중앙 정렬하는 방법
.menu li a:hover {
	color: blue;
}

KakaoTalk友達リスト

<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>다정한 사람</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>한성은</h3>
					<span>헤헷</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>소연이</h3>
					<span>24/7</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="https://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>지혜</h3>
					<span>Do the Next things</span>
				</div>
			</a>
		</li>
	</ul>

.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;
}
			--> img는 inline-block성질
            
.kakao-lists li img {
	border-radius: 20px;
	margin-right: 10px;
}

.kakao-lists li .kakao-info {
	display: inline-block;
}
			-->  kakao-info는 inline-block으로 변경

.kakao-lists li .kakao-info h3 {
	font-size: 18px;
	margin: 0;

}
			--> 이름 부분과 인삿말 공백을 줄이기 위해
            
.kakao-lists li .kakao-info h3 span {
	font-size: 14px;
	color: #c8c8c8;
}

NAVER

<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 </p>
					<div class="date-wrap">
						<span class="source">나무신문</span>
						<span class="date">어제</span>
					</div>
				</div>
			</a>
		</li>
	</ul>

.living-lists {
	width: 750px;
	background: orange;
}
		--> 구역을 정하기 위해 width값을 지정
        
.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;
}

		--> a의 구역을 512px로 지정해줌

ネットニュース

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


			--> https://flexbox.help/ 참고해서 css copy & paste

難点

解決策

学習の心得.