7월 6일(레이아웃)

학습내용

웹사이트 레이아웃 작업에 영향을 미치는 다양한 css

메뉴

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

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

• 오늘 알게된 새로운 정보
  : a태그 안에 링크를 문서로 걸어도 됨
  : 여백을 눌러도 클릭할 수 있는 커서로 변경할 수 있게 하는 block으로 변경 후 , 이 태그 안에 padding, align 속성을 a태그 안에 작성 후 정렬 ( a태그의 영역을 넓혀준다)
  : height값이 있을 때 > line-height - y축 중앙정렬
  : height값이 없을 때 > padding top, bottom 속성값을 주어서 y축 중앙정렬

카카오톡 친구 리스트

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

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

inline-block 일 때만 vertical-align 사용 가능

네이버

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>아이와 사는 집, 현무암 돌담을 두른 제주 전원주택</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>

css

.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로 지정해줌

네이버 뉴스

html

<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

.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

• 참고 하면 좋은 사이트
  https://ko.learnlayout.com/ (css 레이아웃)

어려운 부분

실습을 하니 정말 내가 공부를 한게 맞는가 싶었다.

display: inline-block;
vertical-align: middle;
이 부분이 특히나 이해가 안갔다. 그냥 무작정 외우기만 하면 되는걸까
그래도 저 속성을 수업에서 2번 정도 반복을 했는데 의구심 없이 그냥 받아들이게 됐다.
아직까지 block, inline-block이 헷갈린다. 오늘 그 부분말고는 다 끄덕이며 수업에 임했다.

해결방법

선생님이 추천해주신 css 레이아웃 사이트를 참고해서 연습해봐야겠다.
block, inline-block 부분 개발일지를 다시 봐야겠다.

학습소감

레이아웃 공부 정말 쉽지가 않다.
설계도면 만드는 것도 쉽지가 않은데 css까지 적용하려고 하니 골치아프다.
비대면이라 언제든 반복해서 동영상을 볼 수 있다는 장점은 있지만
궁금한 내용들을 물어볼 때 글과 사진만으로 물어볼 수 밖에 없어서
이걸 어떻게 질문을 해야하나 싶은 것들도 있다. 그러다 결국엔 까먹어 버리고 ㅠㅠ