오늘의 강의 내용

종합 실습

1.네이버 메뉴

실습 예제는 상단의 메뉴 버튼이다.

<!-- html언어 -->
<nav class="menu">
	<ul>
		<li>
			<a href="index.html">메뉴 버튼</a>
		</li>   //href에 파일명을 넣으면 원하는 파일을 가져올수있다
		<li>
			<a href="kakao.html">카카오</a>
		</li>
		<li>
			<a href="#">다음</a>
		</li>
	</ul>
</nav>

<!-- css언어 -->
html, body {
	margin: 0;
	padding: 0;
}  // html, body 디폴트 값으로 주어지는 공백 삭제

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-top: solid 1px red;    //메뉴 테두리 설정
	border-bottom: solid 1px red;
	border-left: solid 1px red;

	/*border: solid 1px red;*/

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

.menu li:last-child {
	border-right: solid 1px red; //메뉴 테두리 설정
}  // 마지막 li영역



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

	padding-top: 15px;
	padding-bottom: 15px;
} 메뉴 안의 텍스트 중앙정렬

.menu li a:hover {
	color: blue;
}  // 빈공간에 커서를 올려놓아도 커서변환과 색변환

• 버튼안에 text를 위,아래 중앙정렬을 할려고할때 버튼의 높이값이 있는경우 글자간 위,아래 속성에 영향을 끼치는 line-height 사용

• 버튼안에 text를 위,아래 중앙정렬을 할려고할때 버튼의 높이값이 없는경우 padding을 이용하여 글자를 기준으로 위,아래 공백을 똑같이 주어 중앙정렬

• href에 html문서 파일을 속성값으로 작성할수도 있어, 멀티페이지를 만들때 유용하게 사용할수 있다.

2.카카오톡 친구 리스트

실습 예제 인 카카오톡 친구 리스트 모습이다.

<!-- html언어 -->
<ul class="kakao-lists">
	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

	<li>
		<a href="#">
			<img src="https://via.placeholder.com/50x50">

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

<!-- css언어 -->
.kakao-lists li {
	margin-bottom: 20px;  //아래를 기준으로 공백추가
}

.kakao-lists li a {
	display: block;      //block속성을 inline 속성으로 변환
	padding-left: 25px;  //왼쪽면을 기준으로 자기가 주체가 되어공백추가
}

.kakao-lists li img,  //img태그는 기본적으로 inline-block의 성격을 가지고 있다.
.kakao-lists li .kakao-info {
	vertical-align: middle;  //X축 중앙정렬
}

.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.네이버 리빙 섹션

실습 예제 인 네이버 리빙 센션 모습이다.

<!-- 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 Nice to meet you
				</p>

				<div class="date-wrap">
					<span class="source">집꾸미기</span>
					<span class="date">2주일전</span>
				</div>
			</div>
		</a>
	</li>
</ul>

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

4.네이버 뉴스 상단

실습 예제 인 네이버 뉴스 상단 모습이다.

<!-- 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;  //같은축으로 뻗어지게
}

• 웹사이트의 레이아웃을 자유롭게 정렬시킬수 있는지를 주요포인트 로 두었다.

• flex속성 사용시 https://flexbox.help/ 사이트를 이용하여 간단하고 빠르게 적용시킬수 있다.

• 추가적으로 레이아웃에 관하여 디테일 하게 공부를 하고싶다면
  https://ko.learnlayout.com/ 레이아웃에 관련된 개념들만 소개하고 있는 사이트로 공부를 하는데 큰 도움이 될것이다.

강의를 마치고 난뒤 소감

오늘도 레이아웃의 위치를 자율롭게 설정하는것에 중점적으로
강의를 진행되었는데, 이게 속성의 이름은 다른데 사용함에 따라
같은 결과값을 나타내는 경우가 있어 중간 중간 헷갈리는 부분들이 있었다. 그래도 마지막 예제를 할때쯤에는 "아 이 속성을 사용 하시겠구나" 정도로 약간의 추측은 가능해졌다. 물론 아직은 매우매우 많이 부족한 상태이고 아마 훈련일지를 마칠때 까지 쓰지 싶은데 반복과 연습만이 살길인거 같다.