[대구AI스쿨] 개발일지 7일차 210706

김선아·2021년 7월 6일

대구AI스쿨 개발일지

목록 보기

7/46

학습내용

1. 실습

1) 메뉴버튼 만들기

<nav class="menu">
	<ul>
		<li>
			<a href="#">메뉴버튼</a>

		</li>
		<li>
			<a href="#">카카오</a>
		</li>
		<li>
			<a href="#">네이버</a>
		</li>
	</ul>
</nav>

css↓

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

ul {
	list-style: none;    /*list태그에 기본값 점리스트를 없앰*/
}

a {
	color: #000000;     /*원래 지정되는 색은 파란색이다. 검정으로 변경*/
	text-decoration: none;     /*원래 지정되는 밑줄 삭제*/
}

.menu ul {
	background-color: pink;     /*이것만 입력하면 자식태그의 높이가 적용되지 않는다.*/
	overflow: hidden;     /*자식태그의 높이가 적용된다.*/
}

.menu li {
	/*display: inline-block;*/  /*x축 정렬이 되지만 기본 마진값이 설정되어 있음*/ 
	float:  left;   /*x축 정렬. 마진값 없음*/

	widows: 100px;
	/*height: 50px;*/  /*높이값을 지워도 나타나는 높이는 글자의 높이이다.*/
	background-color: yellow;

	/*border: solid 1px red;*/  /*이렇게 지정하면 border가 겹쳐지는 부분은 2px로 나타난다*/
	border-top: solid 1px red;
	border-bottom: solid 1px red;
	border-left: solid 1px red;      /*마지막 '다음'글자의 오른쪽은 border가 없음. 아래에 따로 작성*/

	/*text-align: center;*/    /*x축에서의 중앙 정렬*/
	/*line-height: 50px;*/     /*y축 중양정렬 1*/

	/*padding-top: 15px;*/     /*y축 중앙정렬 2*/ /*높이값을 지우고 적용해야한다.*/
	/*padding-bottom: 15px;*/
}

.menu li:last-child {
	border-right: solid 1px red;     /*마지막 칸 오른쪽 border값을 따로 지정해 주어야한다.*/
}

.menu li a {
	display: block;   /*이 설정만 해도 버튼위에 마우스를 올리면 손가락모양으로 변함*/
	text-align: center;

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

.menu li a:hover {
	color: blue;   /*마우스를 올리면 글자색상이 파란색으로 변함*/
}

2) 메뉴버튼을 클릭했을때 이동되는 페이지

원본html파일(index.html)을 전체복사해서 새로운 html 파일을 만든다.
같은 폴더에 저장하고 파일명을 'kakao.html'로 지정한다.

index.html파일에도, kakao.html에도 메뉴버튼과 카카오라고 적힌 a태그의 href주소를 다음과 같이 입력한다.

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

저장 후 웹페이지를 실행시켜서 카카오를 눌러보면 탭 창과 주소창의 주소가 바뀌어 있는 것을 확인할 수 있다.

3) 카카오톡 친구목록

2)에서 생성한 kakao.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>

css↓

/*카카오톡 친구목록 파트*/


.kakao-lists li {
	margin-bottom: 20px;     /*li 태그간에 공백을 지정*/
}

.kakao-lists li a {
	display: block;     
	padding-left: 20px;     /*a태그와 img사이에 패딩값이 적용됨*/
}
/*친구목록이 있는 영역에 마우스를 올리기만 해도 a태그가 동작하도록*/
/*위에서 메뉴부분을 핑크색으로 만들었던 것과 동일*/


.kakao-lists li img,
.kakao-lists li .kakao-info {
	vertical-align: middle;     
}
/*기본으로 적용된 마진값때문에 완전 중앙정렬로 보이진 않음*/
/*아래에서 h3의 마진값을 0으로 만들어준다.*/


.kakao-lists li img {
	border-radius: 20px;
	margin-right: 10px;     /*이미지를 기준으로 마진값을 넣어준다. 글자와 이미지의 간격*/
}


.kakao-lists li .kakao-info {
	display: inline-block;     /*원래 div태그는 block 이다. 가로로 정렬 불가*/
}


/*h3의 마진값을 0으로 만들어서 위의 vertical-align: middle;이 잘 적용될 수 있도록 한다.*/
.kakao-lists li .kakao-info h3 {
	margin: 0;
	font-size: 18px;
}

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

4) 네이버 메뉴버튼

새 html파일을 naver.html로 이름을 지정하고, 원본인 index.html파일을 복사에서 그대로 붙여넣기 한다.

그리고 index.html, kakao.html, naver.html 세 파일 모두, 네이버 li태그의 href 경로를 바꿔준다.

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

구성할 페이지

<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>Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! Have a good day! </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;
}

/*폰트 크기 및 색상등은 지난 시간에 배웠으므로 생략*/
/*오늘은 웹사이트의 배열을 자유롭게 할 수 있는지를 실습*/

5) 뉴스페이지 상단

naver.html파일에 그대로 작성한다.

<div class="title-wrap">
	<h3>임대차법 9개월, 서울 전세 줄고 월세 늘었다</h3>

	<div class="btn-wrap">   <!-- 버튼 전체를 감싸는 div태그 --> 
		<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: 20px 20px 20px 15px;   /*버튼 5개 모두 적용되는 패딩값*/
}

.title-wrap he {
	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;
} 
/*btn-left와 btn-right 두 요소들 간의 배치*/
/*참고 사이트 https://flexbox.help/를 이용하면 쉽게 할 수 있다.*/

어려웠던 점과 해결방안

flex에 대해서 이론으로만 배웠을땐 어느정도 이해했다고 생각했는데, 참고 사이트 https://flexbox.help/에서 막상 클릭을 해보려고 하니 뭘 선택해야할지 잘 모르겠어서 당황하였다.
개발일지를 올리고 나면 좀 더 봐야겠다고 생각했다.

학습소감

5일차, 6일차에 했던 내용을 토대로 실습을 하는 시간이었다.
오늘 실습을 하기 전까지는 어느 정도 개념을 숙지하고 있다고 생각했었는데, 아니었던 것 같다. 그동안 실습때는 아는 것을 확인하는 정도로 빠르게 이해하고 넘어갔다면 오늘 실습은 중간중간 기억이 안나는 개념도 있었고 헷갈리는 부분도 더러 있었다.

확실히 알게되도록 추천 학습사이트를 보고 추가 공부를 해봐야 할 것 같다.