#웹 프로그래밍 16

Jeongmin Heo·2021년 7월 19일
대구AI스쿨
0

웹 프로그래밍

목록 보기
16/50

naver 카피캣 실습

💻 학습내용

⭐️ 개발자에게 필요한 크롬 확장프로그램

와플라이저 : 개발 기술들을 확인 할 수 있다
css viewer : 특정 사이트의 특정영역의 css를 확인할 때 유용하다
whatfont: 폰트 알아내기
Lorem Ipsum Generator (Default Text) : 임의의 문장을 만들어 텍스트 부분 채우기
ColorZilla : 무슨 색을 사용했는지 알아내기

⭐️ css 디폴트 값

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ol, ul {
	list-style: none;
}

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

img{
	vertical-align: middle;
}

button{
	border: none;
}

input, textarea{
	outline: none;
}

html

<header id="main_header">
		<div class="search_area">
			<div class="search_wrap">
				<input type="text">
				<button type="button"></button>
			</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{
	position: relative;
	height: 160px;
	background-color: #ffffff;

	border-bottom: 1px solid #e4e8eb;

	display: flex;
	
	justify-content: center;
	align-items: center;
	
}


#main_header .search_wrap{

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	align-content: stretch;

	position: relative;
	width: 582px;
	height: 52px;
	border: solid 2px #19ce60;
}
#main_header .search_wrap input{
	width: calc(100% - 52px);
	height: 100%;
	padding: 13px;

	font-size: 22px;
	border: none;

}

#main_header .search_wrap input:focus {
	outline: none;
}


#main_header .search_wrap button{
	width: 52px;
	height: 100%;
	background-color: #19ce60;
}

/*nav 부분 */

#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;
	margin-right: 5px;
}

#main_header #navbar ul li a {
	color: #03c75a;
	font-size: 15px;
	font-weight: 700;
}


⬆️ 인라인 요소를 연달아 기입 할 경우 미세한 공백이 생길 수 밖에 없다

52px인 초록색이 공백으로 남겨진(하얀부분) 곳으로 채워져야 하지만 인라인 요소들끼리의 미세한 공백으로 인하여 채워지지 않았다.
이럴 때 flex를 사용하면 공백이 사라짐

공백을 메꾸 면서 네이버처럼 하나의 선상으로 배치하기 위해서 calc를 사용
▶︎ calc : calculator 약자
width: calc(100% - 52px); =>100% 안에서 52px 만큼 뺀 값을 width 값으로 설정하겠다는 의미

input:focus (가성선택자)
: 입력칸을 클릭하게 되면 포커싱이 된 영역을 가르치는 거고 테투리(outline)을 none 해주면 됨

html

<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="setting1"></button>
						<button class="setting2"></button>
						<button class="setting3"></button>
					</div>
				</div>
				<ul class="news_lists">
					<li class="news_list">
						<img src="https://via.placeholder.co
						m/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.co
						m/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.co
						m/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.co
						m/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>

css

main {
	overflow: hidden;
	padding-top: 20px;
}

main #main_left{
	float: left;
	width: 750px;
	/*height: 2000px;*/
	/*background-color: yellow;*/
}

main #main_right{
	float: right;
	width: 350px;
	height: 2000px;
	background-color: blue;
}
/*광고 배너 부분*/
main #banner_wrap{
	width: 750px;
	height: 135px;
	background-color: black;
	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 button{
	width: 15px;
	height: 15px;
	background-color: blue;
}

main #news_wrap .news_lists{
	overflow: hidden;
	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(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%);
}

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){
border-right:none;
}
간단하게 작성 가능

blog_meida

html

<div id="blog_wrap">
				<div class="blog_header">
					<div class="left_header">
						<h3>오늘 읽을만한 글</h3>
						<span>주제별 분류된 다양한 글 모음</span>
					</div>

					<div class="right_header">
						<span><strong>1,854</strong>개의 글</span>
						<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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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 class="blog_list_wrap">
				 	<ul>
				 		<li>
				 			<a href="#">
				 				<img src="https://via.placeholder.com/170x114">
				 				<div class="blog_list_info">
				 					<span>경제M</span>
				 					<h4>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>Title</h4>
				 					<p>
				 					Big dreams and big thrills
									Flying high 터무니없는 상상해봐
									네 눈앞에 달려들고 있는 별
									낚아 채 불을 태워 봐
									시작이라는 걸 넌 믿을 수 있겠니?
									이제야 사랑을 알 것 같아
									Ready or not 가는 거야 나를 믿어
									Soldiers knocking doors down yelling out
									전쟁 전쟁 같던 시간들은
									모두 뒤로 보내 가슴이 소리치네
									달려가 날아 봐
									If you're rocking with me oh oh
									Here we go here we go satellite radio
									내 미래에 전해 줘
									온 세상과 저 광야 위로
									후회 없이 사랑했다고 말하게
				 					</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>

css

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

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 h3{
	font-size: 14px;
	margin-right: 8px;
}

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

}

main #blog_wrap .blog_header .left_header{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}


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 .count strong{
	color: #000000;
}

main #blog_wrap .blog_nav ul {
	overflow: hidden;
	border: solid 1px #dae1e6;
}

main #blog_wrap .blog_nav ul li {
	width: 12.5%;
	height: 49px;
	float: left;

	border-right: solid 1px #dae1e6;
}

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{
	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: 47px;
}

main #blog_wrap .blog_list_wrap li .blog_list_info span {
	font-size: 12px;
	color: #35ae5e;
}

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{
	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_meia_wrap ul .blog_media_info {
	padding-top: 12px;
}

main #blog_wrap .blog_meia_wrap ul .blog_media_info h4 {
	font-size: 13px;
}

main #blog_wrap .blog_meia_wrap ul .blog_media_info span {
	font-size: 12px;
}

y축 정렬
-> 우리가 만든 공간의 높이값이 존재하는 경우 라인헤이트로 높이값 수치와 동일한 값을 넣게 되면 y축 중앙정렬 효과를 갖게 됨

완성본

📝 마무리

div로 공간을 나누는데 한번에 이렇게 많은 공간을 나누는게 처음이랑
left 공간으로 들어가야 할 내용을 div="main_left" 공간 바깥에다가 작성하여 right 공간으로 배치되서 당황스러웠다.
다행히 제대로 div 공간을 찾아서 수정을 해주었다.
수정을 하면서 div로 칸을 나눌 때 탭키로 열 바꿈을 제대로 해주어야지
헷갈리지 않고 부모 태그와 자식 태그 사이의 관계성을 더욱 쉽게 파악 할 수 있다는 것을 알았다.

또 아직까지 box-shadow가 적용이 왜 안되는지 원인을 찾지 못하였다.
일지를 작성하고 다시 한번 코드들을 제대로 확인하면서 원인을 찾아봐야겠다.
비록 선생님을 따라서 하나하나 작성했지만 그래도 우리가 자주 쓰는 네이버 화면 비슷한걸 만들어내서 뿌듯한 하루였다.

profile
Jeongmin Heo
이전 포스트

#웹프로그래밍 #15

다음 포스트

웹 프로그래밍#17

0개의 댓글