7월 6일 Velog

학습한 내용

CSS 레이아웃

1. 메뉴 버튼 실습

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

(1) 초기화

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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

• html, body : 기본적으로 내장된 margin, padding 값 초기화

• ul(list 태그) : 기본적으로 내장된 점 제거

• a 태그 : 색깔 변경(파란색->블랙), 언더바 제거

(2) li 태그 x축 정렬

① inline-block

.menu li {
	display: inline-block;

	width: 100PX;
	height: 50px;
	background-color: yellow;

	border: solid 1px red;
}

• nline-block : x축 정렬이면서 공간에 대한 크기를 유지
• inline, inline-block은 영역 사이에 기본적으로 공백을 가지고 있다.
  -> 사용하지 않음

② float

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

.menu li {
	float: left;

	width: 100PX;
	height: 50px;
	background-color: yellow;

	border: solid 1px red;
}

• float:left; : 공백 없는 x축 정렬
• li 태그에 float 지정 시 3차원 성질 가짐
  -> 자식의 높이 값이 부모의 높이 값에 적용 안됨
  -> ul(부모 태그)에 overflow:hidden; 삽입

(3) 텍스트 x축 정렬

.menu li {
	float: left;

	width: 100PX;
	height: 50px;
	background-color: yellow;

	border: solid 1px red;

	text-align: center;
}

• text-align:center; : 텍스트 x축 방향 중심으로 정렬

(4) 텍스트 y축 정렬

① 버튼의 높이 값(height: 50px;)이 존재할 때

.menu li {
	float: left;

	width: 100PX;
	height: 50px;
	background-color: yellow;

	border: solid 1px red;

	text-align: center;
	line-height: 50px;
}

• line-height: 50px; : 텍스트의 위 아래 간격을 설정, 폰트 서체에 따라 달라질 수 있음

② 버튼의 높이 값(height: 50px;)이 없을 때

.menu li {
	float: left;

	width: 100PX;
	/*height: 50px;*/
	background-color: yellow;

	border: solid 1px red;

	text-align: center;

	padding-top: 15px;
	padding-bottom: 15px;	
}

• 위의 경우보다 버튼의 높이가 살짝 커진다.

(5) a 태그의 범위 확장

.menu li {
	float: left;

	width: 100PX;
	/*height: 50px;*/
	background-color: yellow;

	border: solid 1px red;

	/*text-align: center;*/
	/*line-height: 50px;*/

	/*padding-top: 15px;*/
	/*padding-bottom: 15px;	*/
}

.menu li a {
	display: block;
	text-align: center;

	padding-top: 15px;
	padding-bottom: 15px;
}

• 클릭 영역을 텍스트에서 메뉴 버튼 전체로 확장시키기
• li 태그 : text-align, padding, line-height, height 값 주석처리
• a 태그
  • display: block; : 여백에 클릭 버튼 활성화
  • text-align: center; : 텍스트 중앙 정렬
  • padding-top: 15px; padding-bottom: 15px; : 위 아래 공백 부여
    -> a 태그의 속성이므로 클릭 영역이 된다.

(6) 영역 선택 시 색 변화 효과

.menu li a:hover {
	color: blue;
}

• .menu li a: hover : 가상선택자, 마우스를 올리면 색깔을 바꾼다.

(7) border 겹침 수정

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

• border는 한번에 상하좌우 결정
• top/bottom/left 세부적으로 border 부여
• li 태그 중 가장 마지막(가상선택자: .menu li:last-child) 에만
  border-right: solid 1px red; 부여

(8) a 태그의 속성값

			<li>
				<a href="index.html">메뉴 버튼</a>	
			</li>
			<li>
				<a href="kakao.html">카카오</a>	
			</li>
			<li>
				<a href="naver.html">네이버</a>	
			</li>

• a 태그 속성값으로 링크 주소가 아닌 html 파일명을 넣을 수 있다.

2. kakao 실습

[html]

	<ul class="kakao-list">
		<li>
			<a href="#">
				<img src="http://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>김민호</h3>
					<span>Minho Kim</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>김민호</h3>
					<span>Minho Kim</span>
				</div>
			</a>
		</li>
		<li>
			<a href="#">
				<img src="http://via.placeholder.com/50">

				<div class="kakao-info">
					<h3>김민호</h3>
					<span>Minho Kim</span>
				</div>
			</a>
		</li>
	</ul>

(1) image 라운드

.kakao-list li img{
	border-radius: 20px;
}

(2) 각 li 태그 정렬

① x축 정렬

.kakao-list li .kakao-info {
	display: inline-block;
}

• img, div : block 요소의 성격을 갖고 있기 때문에 디폴트로 y축 정렬
  -> div (class="kakao-info") 태그를 inline-block으로 변경

② x축 중앙 정렬

.kakao-list li img,
.kakao-list li .kakao-info {
	vertical-align: middle;
}

(3) 공백, 텍스트 변경

.kakao-list li img{
	border-radius: 20px;
	margin-right: 10px;
}

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

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

.kakao-list li {
	padding-top: 15px;
}

• padding 이나 margin으로 공백 생성

(5) a 태그 범위 확장

.kakao-list li img{
	border-radius: 20px;
	margin-right: 10px;
}

.kakao-list li .kakao-info {
	display: inline-block;
}

.kakao-list li img,
.kakao-list li .kakao-info {
	vertical-align: middle;
}

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

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

.kakao-list li {
	padding-top: 15px;
}

.kakao-list li a {
	display: block;
	padding-left: 25px;
	background-color: lightcyan;
}

• a 태그에 display: block; 부여
• padding 값도 클릭 영역에 포함

3. Naver 실습

(1) 정렬

[html]

	<ul class="living-lists">
		<li>
			<a href="#" class="image-link">
				<img src="http://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 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>

[css]

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

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

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


.living-lists {
	width: 750px;
	background-color: lightcyan;
}

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

.living-lists .living-info h3,
.living-lists .living-info p {
	margin: 0;
}

• 부모 태그인 ul 태그(class="living-lists")의 width가 고정되어 있기 때문에 텍스트 정보가 있는 두 번째 a 태그(class="info-link")에 width를 지정해줘야 정렬된다.
  -> ul의 width(750) > img의 width(170) + info-link의 width(512)

(2) 버튼 정렬

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

※ https://ko.learnlayout.com/ : css 레이아웃 안내

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

지금까지 배운 css 레이아웃 속성을 응용하는 시간이였는데 아직 내가 완전히 숙지하지 못한 부분들이 있어서 따라가는 데에 어려움을 겪었다.

해결 방법 작성

앞서 정리해둔 Velog를 천천히 다시 살피면서 부족한 점을 다시 숙지하였다.

학습 소감

배우는 것과 실제로 응용하는 것은 많은 차이가 있다는 것을 느꼈다. 작은 영역 하나라도 여러가지의 속성들이 영향을 준다는 것을 알게 되었다.