2021년 7월 20일 17일차

170359 단어 실습네이버카피캣네이버카피캣네이버

학습한 내용

html

네이버 
<link rel="stylesheet" type="text/css" href="css/style.css">
<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><a href="#">카페</a>
				<li><a href="#">블로그</a>
				<li><a href="#">지식인</a>
				<li><a href="#">쇼핑</a>	
				</li>
			</ul>

		</div>
	</div>
</header>

<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>
				</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>Title</h4>
								<p>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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>토스가 유니콘을 넘어 데카콘(기업가치 100억 달러)을 눈앞에 두고 있다. 토스는 지난 2018년 기업가치 10억달러(	1.2조원)로 국내 핀테크 최초 유니콘 기업이 된 지 3년 만에 이러한 성과를 얻게 됐다. 특히 지난해 투자 유치 이후 불과 10개월 만에 기업 가치가 3배 가까이 높아지며 폭발적인 성장세를 보이고 있다.</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 id="account">
			<p>네이버를 더 안전하고 편안하게 이용하세요.</p>
			<a href="#">로그인</a>
			<div class="account_sub">
				<div class="left">
					<span>아이디</span>
					<span>비밀번호 찾기</span>
				</div>
				<span>회원가입</span>
			</div>
		</div>

		<div id="banner"></div>

		<div id="shop_wrap">
			<div class="shop_title">
				<h3><a href="#">트렌드 쇼핑</a></h3>
				<div class="right">
					<h4><a href="#"></a>상품</h4>
					<h4><a href="#"></a>쇼핑몰</h4>
					<h4><a href="#"></a>MEN</h4>
				</div>
			</div>
			<div class="shop_content">
				<ul class="commerce_lists">
					<li><a href="#">G마켓</a></li>
					<li><a href="#">옥션</a></li>
					<li><a href="#">11번가</a></li>
					<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>
					<li><a href="#">롯데i몰</a></li>
					<li><a href="#">GS샵</a></li>
					<li><a href="#">CJ온스타일</a></li>
					<li><a href="#">쿠팡</a></li>

				</ul>
				<div class="shop_goods">
					<ul class="product_lists">
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="https://via.placeholder.com/107x146">
							<div class="product_info">
								<h3>퀄리티가 중요한</h3>
								<span>당신을 위한 룩</span>
							</div>
						</a>
					</li>

				</ul>
				</div>
				
			</div>
		</div>
	</div>
</main>


<footer id="main_footer">
	<div class="container">
		
		<ul class="news_lists">
			<li>
				<img src="https://via.placeholder.com/160x86">
				<div class="news_info">
					<span>부스트캠프 2021</span>
					<h3>온라인 설명회 신청하기</h3>
					<p>SW 개발자를 위한 교육<br>
					지원꿀팁과 생생한 후기들!</p>
				</div>
			</li>
			<li>
				<img src="https://via.placeholder.com/160x86">
				<div class="news_info">
					<span>부스트캠프 2021</span>
					<h3>온라인 설명회 신청하기</h3>
					<p>SW 개발자를 위한 교육<br>
					지원꿀팁과 생생한 후기들!</p>
				</div>
			</li>
			<li>
				<img src="https://via.placeholder.com/160x86">
				<div class="news_info">
					<span>부스트캠프 2021</span>
					<h3>온라인 설명회 신청하기</h3>
					<p>SW 개발자를 위한 교육<br>
					지원꿀팁과 생생한 후기들!</p>
				</div>
			</li>
		</ul>

		<ul class="corp_lists">
			<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>
			<li><a href="#">제휴제안</a></li>
		</ul>
	</div>
</footer>

css

  • {
    margin: 0;
    padding: 0;

    box-sizing: border-box;

    }

ol, ul {
list-style: none;
}
/ol : 앞에 숫자가 붙음
ul : 앞에 점이 붙음
-> 이것들을 주지 않겠다./

a {
text-decoration: none;
color: #000000;
}
/글자의 밑줄을 주지 않고, 파란색이 기본적으로 나오지만 검은색으로 나오게 한다./

img {
vertical-align: middle;
}
/이미지 하단에 있는 공백을 제거해 주겠다./

button {
border: none;
}
/버튼 주위 테두리를 없애겠다./

input, textarea {
outline: none;
}

.clearfix {
clear: both;
}

.container {
width: 1130px;
margin: 0 auto;
}
/너비 1130px, 중앙정렬/

#main_header {
position: relative;
background-color: #ffffff;
}

#main_header .search_area {
display: flex;
justify-content: center;
align-items: center;
/http://flexbox.help//
position: relative;

height: 160px;
background-color: #ffffff;

border-bottom: 1px solid #e4e8eb;

}

#main_header .search_wrap {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;

position: relative;
width: 582px;
height: 52px;
border: solid 2px #19ce60;

}

#main_header .search_wrap input {
width: calc(100% - 52px);
height: 100%;
padding: 13px 15px;

font-size: 22px;
border: none;

}

#main_header .search_wrap input:focus {
outline: none;
}
/focus : 입력하는 칸에 입력을 하면 테두리가 생기는데 -> 테두리를 없애겠다./

#main_header .search_wrap button {
width: 52px;
height: 100%;
/위의 search_wrap에서 height의 값을 52px을 주었기 때문에 52px/
background-color: #19ce60;
}

#main_header #navbar {
box-shadow: 0 1px 3px 0 rgb(0, 0, 0 / 12%);
/https://cssgenerator.org/box-shadow-css-generator.html/
}

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

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

main #main_left {
float: left;
width: 750px;
}

main #main_right {
float: right;
width: 350px;
}

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

margin-bottom: 12px;

}

main #news_wrap .news_header {
display: flex;
flex-wrap: rap;
justify-content: space-between;
align-items: center;

padding: 22px 0 16px 0;

}

main #news_wrap .news_header h2 {
font-size: 14px;
font-weight: 700px;
}

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;
border: solid 1px #dae1e6;
}

main #news_wrap .news_lists .news_list {
position: relative;
float: left;
width: 16.66%;
/list가 가로6개라서 100에서 6을 나누면 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(6n) {
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%);
/*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;
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: gray;
}

main #blog_wrap .blog_header .right_header .count strong {
color: #000000;
}

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: 0;
}

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

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

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

#main_right #account {
width: 100%;
border: solid 1px #dae1e6;
padding: 16px 16px 12px 16px;
margin-bottom: 12px;
}

#main_right #account p {
font-size: 12px;
padding-left: 3px;
margin-bottom: 11px;
}

#main_right #account a {
display: block;
width: 100%;
background-color: #19ce60;
border-radius: 2px;

padding: 15px 0;
margin-bottom: 14px;

text-align: center;
font-size: 13px;
color: #fff;
font-weight: 700;

}

#main_right #account .account_sub {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 0 8px;

}

#main_right #account .account_sub span {
font-size: 12px;
}

#main_right #banner {
width: 348px;
height: 198px;
background-color: #000000;

margin-bottom: 20px;

}

#main_right #shop_wrap .shop_title {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 12px 0;

}

#main_right #shop_wrap .shop_title h3,
#main_right #shop_wrap .shop_title h4 {
font-size: 13px;
}

#main_right #shop_wrap .shop_title h4 {
margin-left: 15px;
}

#main_right #shop_wrap .shop_title .right {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#main_right #shop_wrap .shop_content {
border: solid 1px #e4e8eb;
padding: 0 0 22px ;
}

#main_right #shop_wrap .shop_content .shop_goods {
padding:55px 8px;
}
#main_right #shop_wrap .shop_content .commerce_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 12px 4px;
background-color: #f7f9fa;
border-bottom: solid 1px #dae126;

}
#main_right #shop_wrap .shop_content .commerce_lists li {
font-size: 12px;
margin-left: 10px;
margin-bottom: 5px;

}

#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(1),
#main_right #shop_wrap .shop_content .commerce_lists li:nth-child(9) {
margin-left: 0;
}

#main_right #shop_wrap .product_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#main_right #shop_wrap .product_lists li {
margin-bottom: 10px;
}

#main_right #shop_wrap .product_lists .product_info {
text-align: center;
}

#main_right #shop_wrap .product_lists h3,
#main_right #shop_wrap .product_lists span {
font-size: 12px;
}

#main_footer {
background-color: #fafbfc;
border-top: solid 1px #e4e8eb;
padding-bottom: 92px;
}

#main_footer .news_lists {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 24px 0;

}

#main_footer .news_lists li {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}

#main_footer .news_lists li img {
margin-right: 15px;
}

#main_footer .news_lists li .news_info {
width: 172px;
}

#main_footer .news_lists li .news_info span,
#main_footer .news_lists li .news_info h3,
#main_footer .news_lists li .news_info p {
font-size: 13px;
}

#main_footer .news_lists li .news_info span {
color: #58c464;
}

#main_footer .corp_lists {
padding-top: 25px;
border-top: solid 1px #e4e8eb;
}

#main_footer .corp_lists li {
display: inline-block;
vertical-align: middle;
}

#main_footer .corp_lists li:first-child:before {
content: initial;
}
/맨앞에있는 li태그의 앞 막대기는 지우겠다./

#main_footer .corp_lists li:before {
content: "";
display: inline-block;
width: 1px;
height: 11px;
background-color: #e4e8eb;
margin: 0 8px;

vertical-align: -1px;

}

#main_footer .corp_lists li a {
font-size: 12px;
}

결과물

오늘은 네이버 카피캣 실습2를 들었다.

학습내용 중 어려웠던 점

어제 못찾았던 코드 오류를 오늘 수업전에 발견해서 수정했다.
그리고, 수업 중 코드 확인하고 결과물을 바로 바로 확인하기가 어려웠다.

해결방법

바로바로 확인 할 수 있게 세팅을 해놓고,
단축키도 손에 익게 자주 사용해야 할 것 같다.

학습소감

수업 때 크게 어려운 내용은 없었지만
강사님 말씀대로 css나 html 작성할 때 머리속에서 시뮬레이션을 하고,
코드를 작성하고 결과물을 확인했을 때 그 결과값이 내가 원하는 결과값이 안나오면
많은 연습이 필요하다고 말씀하셨는데, 생각보다 이게 어려운 것 같았다.
이론 수업을 끝내고 실습 위주 수업이 2주가 지나고 있는데, 손에 안익고 내가 바로 바로 만들 수 있는 코드들이 부족한 것 같다고 생각했다.

4/4 스터디 문제
[Java] Arrays.sort() 오름차순 내림차순

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage