[대구AI스쿨] 개발일지 16일차 210719

김선아·2021년 7월 19일
CSShtml대구AI스쿨웹프로그래밍
0

대구AI스쿨 개발일지

목록 보기
16/46

학습내용

1. 웹개발에 필요한 크롬 확장 프로그램

https://wpastra.com/chrome-developer-extensions/

  1. Wappalyzer
    어떤 웹 사이트에 들어가서 이 웹사이트가 어떤 기술 스택으로 만들어졌는지 확인할 수 있다.
    → chrome 웹스토어에서 설치하면 된다.

  1. CSS Viewer

웹사이트에 적용된 css코드들을 간편하게 확인할 수 있다.

  1. WhatFont

어떤 폰트를 사용하고 있는지 알려주는 프로그램

  1. Lorem Ipsum Generator

임의의 문장을 만들 때 사용되는 확장프로그램

  1. Colorzilla

어떤 색상을 사용했는지 확인할 수 있음.
마우스 커서가 있는 곳의 색상 정보를 알려줌

2. 네이버 홈페이지 (1)

기본적인 html을 작성해 준다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>네이버</title>

	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

</body>
</html>

기본적인 css를 작성해 준다.
css↓

/* Default */

* {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
    	/* 테두리를 포함한 크기를 설정할 수 있다. 개발일지 25일자 참고 */
}

ol, ul, li {
	list-style: none;
}

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

img{
	vertical-align: middle;
}

.clearfix {
	clear: both;
}

1) 상단영역

<header id="main-header">
	<div class="search_area">
		

		<!-- div태그 안에 input(검색창)과 button을 함께 넣는다 -->
		<div class="search_wrap">
			<!-- <form></form> -->  
			<!-- 원래 검색창이라면 form태그를 사용하여 정보를 처리하여 넘겨주어야 한다. 지금은 디자인 구조만 확인할 거라서 form태그는 사용하지 않는다. -->
			<input type="text">
			<button type="button"></button>		
			<!-- form태그를 사용한다면 버튼의 타입은 button이 아니라 submit으로 작성해야한다. -->		
		</div>

	</div>

	<div id="navbar">
		<div class="container">
			
			<ul>
				<li><a href="#">메일</a></li>
				<li><a href="#">카페</a></li>
				<li><a href="#">블로그</a></li>
				<li><a href="#">지식인</a></li>
				<li><a href="#">쇼핑</a></li>
			</ul>
		</div>
	</div>

</header>

css↓

/* 상단 검색창 */

#main-header {
	position: relative;
	background-color: #ffffff;
}

#main-header .search_area {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;
}

#main-header .search_wrap {
	display: flex;        /* inline-block요소였던 input과 button태그를 flex로 변경 */
	flex-wrap: wrap;      /* flex안에서 줄바꿈 */ 
	justify-content: space-between;    /* 오브젝트들 끼리 일정한 간격 */
	align-items: center;    /* flex안에서 y축으로 중앙정렬 */
	/* 개발일지 6일차 참고 */


	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
	/* border를 제외한 영역은 578x48 px이다. */

}

#main-header .search_wrap input {
	width : calc(100% - 48px);      /* 가로영역 100%(578px)에서 48px만큼 뺀 영역을 표시 */
	height: 100%;
	/*background-color: yellow;*/
	padding: 13px 15px;  /* 상하, 좌우 */

	font-size: 22px;
	border: none;    /* button태그의 border: none;처럼 초기화 작업으로 진행해도 된다. */
}


#main-header .seach_wrap input:focus {  /* input박스 안에 마우스를 클릭했을 때, 포커싱되는 것을 설정하는 가상 선택자 */
	outline: none;    /* input박스를 클릭했을 때, 테두리 라인이 생기지 않는다. */
}
/* css 디폴트 설정값에서 input과 textarea에서 outline을 none으로 설정해 둔다. */


#main-header .search_wrap button {
	width: 48px;
	height: 100%;    /* 정사각형이 되도록 width와 height값을 조절 */
	background-color: #19ce60;
	/* 이대로만 작성하면 버튼에 검은색 테두리가 생긴다. button태그에는 기본적으로 border가 적용되기 때문 */
	/* 위의 css 디폴트 설정값에서 border: none;을 추가해 준다. */
}




/* 상단 네비게이션 바 */


#main-header #navbar {
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}

#main-header #navbar ul {
	padding: 11px 0;
}

#main-header #navbar ul li {
	display: inline-block;    /* 하나의 x축으로 정렬하기 위해서 속성변경 */
	margin-right: 5px;    /* inline-block은 기본 마진값이 있기 때문에, margin-right를 적용해도 딱 5px이 적용되지 않는다. 정확한 값을 넣고 싶다면, 검색창을 만들때 처럼 flex를 사용하면 된다. */
}

#main-header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}
  • 디폴트 설정값에 추가해야할 css
button {
	border: none;
}

input, textarea {
	outline: none;
}
  • 검색창의 input과 button태그가 나란히 정렬되는 과정
    input과 button태그는 둘 다 inline-block요소 이므로(기본 마진과 패딩이 적용되어 있음), display: flex;로 변경하여 나열시켜 준다. 개발일지 6일차 참고



2) 네이버 왼쪽

<main role="main" class="container">
	<div id="main-left">
		
		<div id="banner-wrap"></div>

		<div id="news-wrap">
			
			<div class="news-header">
				<h2>뉴스스탠드</h2>
				<div class="news-btn-wrap">
					<button class="setting_1"></button>	
					<button class="setting_2"></button>
					<button class="setting_3"></button>
					<!-- button태그를 사용할 때, type을 정해주지 않으면 기본적으로 type="button"으로 설정된다. -->
				</div>
			</div>
		
			<ul class="news-lists">
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
				<li class="news-list">
					<img src="https://via.placeholder.com/45x20">
				</li>
			</ul>

		</div>		


		<div id="blog_wrap">
			<div class="blog_header">
				<div class="left_header">
					<h3>오늘 읽을만한 글</h3>
					<span>주제별 분류된 다양한 글 모음</span>				
				</div>	
				<div class="right_header">
					<span class="count"><strong>1,853 개의 글</strong></span>
					<!-- strong태그는 글자를 강조하기 위해 사용한다. -->
					<span>관심주제 설정</span>
				</div>				
			</div>

			<nav class="blog_nav">
				<ul>
					<li><a href="#">엔터1</a></li>
					<li><a href="#">엔터2</a></li>
					<li><a href="#">엔터3</a></li>
					<li><a href="#">엔터4</a></li>
					<li><a href="#">엔터5</a></li>
					<li><a href="#">엔터6</a></li>
					<li><a href="#">엔터7</a></li>
					<li><a href="#">엔터8</a></li>
				</ul>
			</nav>

			<div class="blog_list_wrap">
				<ul>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/170x114">

							<div class="blog_list_info">
								<span>경제M</span>
								<h4>"한국 주식은 끝났다"</h4>
								<p>요즘 부자들의 새로운 투자처는?국내 최고의 이코노미스트 홍춘욱 박사가 들려주는‘현실’ 경제수업과 최고의 투자법『돈의 역사는 되풀이된다』 돈의 역사는 되풀이된다 저자 홍춘욱 출판 포르체 발매 2021.06.16.</p>

								<div class="date_wrap">
									<span>책식주의</span>
									<span>4일 전</span>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/170x114">

							<div class="blog_list_info">
								<span>경제M</span>
								<h4>"한국 주식은 끝났다"</h4>
								<p>요즘 부자들의 새로운 투자처는?국내 최고의 이코노미스트 홍춘욱 박사가 들려주는‘현실’ 경제수업과 최고의 투자법『돈의 역사는 되풀이된다』 돈의 역사는 되풀이된다 저자 홍춘욱 출판 포르체 발매 2021.06.16.</p>

								<div class="date_wrap">
									<span>책식주의</span>
									<span>4일 전</span>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/170x114">

							<div class="blog_list_info">
								<span>경제M</span>
								<h4>"한국 주식은 끝났다"</h4>
								<p>요즘 부자들의 새로운 투자처는?국내 최고의 이코노미스트 홍춘욱 박사가 들려주는‘현실’ 경제수업과 최고의 투자법『돈의 역사는 되풀이된다』 돈의 역사는 되풀이된다 저자 홍춘욱 출판 포르체 발매 2021.06.16.</p>

								<div class="date_wrap">
									<span>책식주의</span>
									<span>4일 전</span>
								</div>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/170x114">

							<div class="blog_list_info">
								<span>경제M</span>
								<h4>"한국 주식은 끝났다"</h4>
								<p>요즘 부자들의 새로운 투자처는?국내 최고의 이코노미스트 홍춘욱 박사가 들려주는‘현실’ 경제수업과 최고의 투자법『돈의 역사는 되풀이된다』 돈의 역사는 되풀이된다 저자 홍춘욱 출판 포르체 발매 2021.06.16.</p>

								<div class="date_wrap">
									<span>책식주의</span>
									<span>4일 전</span>
								</div>
							</div>
						</a>
					</li>
				</ul>
			</div>

			<div class="blog_media_wrap">
				<ul>
					<li>
						<img src="https://via.placeholder.com/232x130">
						<div class="blog_media_info">
							<h4>Title</h4>
							<span>신사임당</span>								
						</div>
					</li>
					<li>
						<img src="https://via.placeholder.com/232x130">
						<div class="blog_media_info">
							<h4>Title</h4>
							<span>신사임당</span>								
						</div>
					</li>
					<li>
						<img src="https://via.placeholder.com/232x130">
						<div class="blog_media_info">
							<h4>Title</h4>
							<span>신사임당</span>								
						</div>
					</li>
				</ul>					
			</div>

			
		</div>

	</div>

	<div id="main-right">
		
	</div>
</main>

css↓

/* 네이버 왼쪽 */

main {
	overflow: hidden;
	/* 자식의 높이값이 부모에게 영향을 줄 수 있도록 설정 */
	/* 자식 : main-left, main-right */
	/* 부모 : main */
    	padding: 20px
}

main #main-left {
	float: left;
	width: 750px;
	/*height: 2000px;*/     /* main-left 작업을 완료하고 나서 주석처리 */
	/*background-color: yellow;*/    /* main-left 작업을 완료하고 나서 주석처리 */
}

main #main-right {
	float: right;
	width: 350px;
	height: 2000px;
	background-color: pink;
}
/* css디폴트 설정에서 container(main의 class명) width: 1130px; 으로 설정 해 두었다. */


main #banner-wrap {
	width: 750px;
	height: 135px;
	background-color: #000000;

	margin-bottom: 12px;
}

main #news-wrap .news-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 22px 0 16px 0;
}

main #news-wrap .news-header h2 {
	font-size: 14px;
	font-weight: 700;
}

main #news-wrap .news-header .news-btn-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	width: 60px;
}

main #news-wrap .news-header .news-btn-wrap button {
	width: 15px;
	height: 15px;
	background-color: blue;
}

main #news-wrap .news-lists {
	overflow: hidden;    	
	/* 자식의 높이값이 부모의 높이값에 영향을 주도록 만든다. */
	/* 태그이름을 잘못 설정해서, overflow: hidden;이 설정되어 있지 않았음. 그래서 블로그랩이 news-lists영역이 되어버려서 한참을 헤맸음... */
	border: solid 1px #dae1e6;
}

main #news-wrap .news-lists .news-list {
	position: relative;
	float: left;
	width: 16.66%;
	height: 65px;
	background-color: #ffffff;

	border-bottom: solid 1px #e4e8eb;
	border-right: solid 1px #e4e8eb;

	text-align: center;
}

/*
main #news-wrap .news-lists .news-list:nth-child(6),
main #news-wrap .news-lists .news-list:nth-child(12),
main #news-wrap .news-lists .news-list:nth-child(18),
main #news-wrap .news-lists .news-list:nth-child(24) {
	border-right: none;
}
*/

main #news-wrap .news-lists .news-list:nth-child(6n) {    /* 6번째 마다 오는 li태그에는 border-right를 없앤다. 위의 코드와 동일 */
	border-right: none;
}

main #news-wrap .news-lists .news-list:nth-child(19),
main #news-wrap .news-lists .news-list:nth-child(20),
main #news-wrap .news-lists .news-list:nth-child(21),
main #news-wrap .news-lists .news-list:nth-child(22),
main #news-wrap .news-lists .news-list:nth-child(23),
main #news-wrap .news-lists .news-list:nth-child(24) {
	border-bottom: none;
}

main #news-wrap .news-lists .news-list img {
	position: relative;

	top: 50%;
	transform: translateY(-50%);   
	/* top, transform 코드 셋트로 꼭 알아두기. y축 중앙정렬  */
}



/* 블로그랩 */

main #blog_wrap {
	padding-top: 35px ;
}

main #blog_wrap .blog_header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding-bottom: 17px;
}

main #blog_wrap .blog_header .left-header {
	display: flex;
	flex-wrap: wrap;
	/*justify-content: flex-start;*/ /* 디폴트값이므로 주석처리한다. */
	align-items: center;
}

main #blog_wrap .blog_header .left-header h3 {
	font-size: 14px;
	margin-right: 8px;
}

main #blog_wrap .blog_header .left-header span {
	font-size: 12px;
	color: gray;
}

main #blog_wrap .blog_header .right-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

main #blog_wrap .blog_header .right-header span {
	font-size: 12px;
	color: grey;
}

main #blog_wrap .blog_header .right-header span strong {
	color: black;
}

main #blog_wrap .blog_nav ul {
	overflow: hidden;   /* 자식의 높이값이 부모의 높이값에 영향을 준다. */
	border: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li {
	float: left;
	width: 12.5%;
	height: 49px;
	border-right: solid 1px #eae1e6;
}

main #blog_wrap .blog_nav ul li:last-child {
	border-right: none;
}

main #blog_wrap .blog_nav ul li a {
	display: block;
	width: 100%;
	height: 100%;

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

main #blog_wrap .blog_list_wrap {
	padding-top: 18px;
	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_list_wrap li {
	margin-bottom: 18px;
}

main #blog_wrap .blog_list_wrap li a {0
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

main #blog_wrap .blog_list_wrap li img {
	width: 170px;
	height: 114px;
	margin-right: 21px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info {
	width: 559px;
	padding-right: 17px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {    
	font-size: 12px;
	color: #35ae5e;
}
/* blog_list_info 안에 있는 모든 span에 적용됨 */
/* blog_list_info 안에 있는 date_wrap 안의 span에도 적용됨 */
/* 뒤에서 date_wrap span을 따로 설정하여 캐스캐이딩한다 */

main #blog_wrap .blog_list_wrap li .blog_list_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info p {
	font-size: 13px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info .date-wrap span {  /* 캐스캐이딩 */
	/*font-size: 12px;*/   /* blog_list-info span에서 설정된 것이 그대로 상속된다. */
	color: #505050;
}

main #blog_wrap .blog_media_wrap ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: solid 1px #dae1e6;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info {
	padding-top: 12px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info h4 {
	padding-top: 13px;
}

main #blog_wrap .blog_media_wrap ul .blog_media_info span {
	padding-top: 12px;
}

  • 상단 검색창과 배너, 뉴스랩

  • 블로그랩

  • 미디어랩

3. 새로 배운 css코드

1) calc

calc를 사용하여 공간의 크기를 계산할 수 있다. %와 px을 사용할 수 있으므로 편리하다.

2) focus 가상선택자

마우스를 클릭했을 때의 css설정을 위한 가상선택자

어려웠던 점과 해결 방안

1) 블로그 랩의 overflow: hidden;

블로그 랩을 설정할 때,

blog_wrap에서 flex를 설정하니 블로그랩의 글자가 저렇게 표시되어서 원인을 찾느라 시간이 매우 많이 걸렸다.

원인은 news-lists의 overflow: hidden;이 태그오타로 인해서 설정이 되지 않아서 였다.

1시간 반 동안 원인을 몰랐었는데, 내가 만든 페이지에서 검사를 눌러서 보니, 뉴스리스트 부분의 높이값이 0이고, 블로그랩이 뉴스리스트를 만든 ul태그로 적용되어 있었다.
왜인지 몰라서 한참 코드를 다시 들여다 보다가, news-lists의 높이값이 지정되지 않은 게 이상해서 다시 보니 태그 이름 오타로, overflow: hidden;이 적용되지 않았던 것.
그래서 자식태그(news-list)들의 높이값이 부모태그에 적용되지 않았던 것이었다.

overflow에 대해서 배우긴 했어도, 막상 오류가 생기니 어디에서 부터 찾아야 할 지 난감했는데 그래도 스스로 해결할 수 있어서 다행이었다.

2) 검색버튼 공백없이 맞추기

검색바에 넣어둔 버튼이 border와 공백이 생겨서 이것저것 맞춰보다가, 실제 네이버에서는 어떻게 맞추어 놓았나 확인해 보았다.

네이버에서는, border를 포함한 높이값(56px)에 맞춰 넓이, 높이를 동일하게 맞추었고, absolute를 사용하여 레이어 겹침을 이용하여 공백없이 맞추어 둔 것을 확인하였다.
top: 0; right: 0; bottom: 0;이라고 설정되어 있었으나, 똑같이 적용하니 내가 만든 페이지에서는 여전히 미세한 공백이 확인되어서 약간 수정하여 적용하였다.
(position: absolute;는 부모태그가 3차원일때는 부모공간에서 움직인다. 여기에서는 부모태그가 position: relative;로 설정되어 있었음)

학습소감

요즘 배운것을 토대로 실습을 하고 있는데, 아직도 헷갈리는 부분이 많이 있다.
특히 clearfix를 사용하는 방법에 대해서 좀 알아봐야 할 것 같다.
처음에 cleafix에 대해서 배울땐, html에서 float를 닫을때 사용한다고 배운 것 같은데, 오늘 실습에서는 css디폴스 설정을 할 때 사용되었다.
질문을 올리거나 찾아볼 필요가 있을 것 같다!

profile
김선아
이전 포스트

[대구AI스쿨] 개발일지 15일차 210716

다음 포스트

[대구AI스쿨] 개발일지 17일차 210720

0개의 댓글