2021년 7월 30일 25일차

173980 단어 카피캣네이버 뉴스네이버네이버뉴스카피캣네이버

학습한 내용

html - shop

네이버 
<link rel="stylesheet" type="text/css" href="css/style.css">
<header id="news-header">

	<div class="news-container">
		<div class="news-flex-between">
			<nav class="news-header-left">
				<ul class="news-flex-start">
					<li class="on"><a href="#">뉴스</a></li>
					<li><a href="ent.html">TV연예</a></li>
					<li><a href="#">스포츠</a></li>
					<li><a href="#">뉴스스탠드</a></li>
					<li><a href="#">날씨</a></li>
				</ul>
			</nav>

			<div class="news-header-right news-flex-end">
				<a href="#" class="btn-login">로그인</a>
				<button type="button" class="btn-menu"></button>
			</div>
		</div>
	</div>

	<nav class="sub-nav">
		<div class="news-container">
			<div class="news-flex-between">
				<ul class="news-flex-start">
					<li><a href="#" class="on">뉴스홈</a></li>
					<li><a href="#">속보</a></li>
					<li><a href="#">정치</a></li>
					<li><a href="#">경제</a></li>
				</ul>

				<div class="news-search-wrap news-flex-between">
					<input type="text" placeholder="뉴스 검색">
					<button type="button" class="btn-search"></button>
				</div>
			</div>
		</div>
	</nav>
</header>


<div id="news-headline">
	<div class="news-container">
		<div class="news-headline-menu-wrap news-flex-between">
			<ul class="main-lists news-flex-start">
				<li><a href="#">신문 헤드라인</a></li>
				<li><a href="#">저녁 방송 뉴스</a></li>
			</ul>

			<ul class="sub-lists news-flex-end">
				<li><a href="#">팩트체크</a></li>
				<li><a href="#">언론사 구독</a></li>
				<li><a href="#">언론사 뉴스</a></li>
				<li><a href="#">라이브러리</a></li>
			</ul>
		</div>

		<ul class="news-headline-lists news-flex-between">
			<li>
				<a href="#">
					<article>
						<h3>TV조선 뉴스9</h3>

						<div class="image-wrap">
							<img src="https://via.placeholder.com/150">
							<div class="overlay">
								<div class="headline-info news-flex-start">
									<i></i>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</div>
							</div>
						</div>
					</article>
				</a>
			</li>

			<li>
				<a href="#">
					<article>
						<h3>TV조선 뉴스9</h3>

						<div class="image-wrap">
							<img src="https://via.placeholder.com/150">
							<div class="overlay">
								<div class="headline-info news-flex-start">
									<i></i>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</div>
							</div>
						</div>
					</article>
				</a>
			</li>

			<li>
				<a href="#">
					<article>
						<h3>TV조선 뉴스9</h3>

						<div class="image-wrap">
							<img src="https://via.placeholder.com/150">
							<div class="overlay">
								<div class="headline-info news-flex-start">
									<i></i>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</div>
							</div>
						</div>
					</article>
				</a>
			</li>

			<li>
				<a href="#">
					<article>
						<h3>TV조선 뉴스9</h3>

						<div class="image-wrap">
							<img src="https://via.placeholder.com/150">
							<div class="overlay">
								<div class="headline-info news-flex-start">
									<i></i>
									<div>
										<span>다시보기</span>
										<p>또 뛰는 집값... 2.4대책 직전으로 돌아갔다.</p>
									</div>
								</div>
							</div>
						</div>
					</article>
				</a>
			</li>
		</ul>

		<div class="news-headline-arrows news-flex-end">
			<div class="btn-wrap news-flex-start">
				<a href="#" class="btn btn-prev"></a>
				<a href="#" class="btn btn-next"></a>
			</div>
			<a href="#" class="btn btn-up"></a>
		</div>
	</div>
</div>




<main role="main" id="news-main">
	<div class="news-container">
		<div class="news-left">
			
			<div class="news-main-wrap news-custome">
				<div class="news-main-header news-flex-between">
					<div class="news-main-header-left news-flex-start">
						<h3><a href="#">헤드라인 뉴스</a></h3>
						<ul class="news-flex-start">
							<li><a href="#">헤드라인 뉴스와 각 기사묶음 타이틀은 기사 내용을 기반으로 자동 추출됩니다.</a></li>
						</ul>
					</div>

					<div class="news-main-header-right news-flex-end">
						<i class="icon-1"></i>
						<i class="icon-2"></i>
						<i class="icon-3"></i>
					</div>
				</div>

				<div class="news-main-body news-flex-start">
					<div class="image-wrap">
						<img src="https://via.placeholder.com/220x140">
						<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
					</div>

					<ul class="news-lists">
						<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><i></i></li>
						<li><a href="#">title 2</a><i></i></li>
						<li><a href="#">title 3 title 3 title 3</a><i></i></li>
						<li><a href="#">title 4 title 3 title 3</a><i></i></li>
						<li><a href="#">title 5 title 3 title 3 title 3</a><i></i></li>
					</ul>
				</div>
			</div>
			<div class="news-main-wrap">
				<div class="news-main-header news-flex-between">
					<div class="news-main-header-left news-flex-start">
						<h3><a href="#">정치</a></h3>
						<ul class="news-flex-start">
							<li><a href="#">일반</a></li>
							<li><a href="#">국회/정당</a></li>
							<li><a href="#">청와대</a></li>
						</ul>
					</div>

					<div class="news-main-header-right news-flex-end">
						<i class="icon-1"></i>
						<i class="icon-2"></i>
						<i class="icon-3"></i>
					</div>
				</div>

				<div class="news-main-body news-flex-start">
					<div class="image-wrap">
						<img src="https://via.placeholder.com/220x140">
						<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
					</div>

					<ul class="news-lists">
						<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
						<li><a href="#">title 2</a><span>부산일보</span></li>
						<li><a href="#">title 3</a><span>중앙일보</span></li>
						<li><a href="#">title 4</a><span>한겨레</span></li>
						<li><a href="#">title 5</a><span>뉴시스</span></li>
					</ul>
				</div>
			</div>
			<div class="news-main-wrap">
				<div class="news-main-header news-flex-between">
					<div class="news-main-header-left news-flex-start">
						<h3><a href="#">정치</a></h3>
						<ul class="news-flex-start">
							<li><a href="#">일반</a></li>
							<li><a href="#">국회/정당</a></li>
							<li><a href="#">청와대</a></li>
						</ul>
					</div>

					<div class="news-main-header-right news-flex-end">
						<i class="icon-1"></i>
						<i class="icon-2"></i>
						<i class="icon-3"></i>
					</div>
				</div>

				<div class="news-main-body news-flex-start">
					<div class="image-wrap">
						<img src="https://via.placeholder.com/220x140">
						<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
					</div>

					<ul class="news-lists">
						<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
						<li><a href="#">title 2</a><span>부산일보</span></li>
						<li><a href="#">title 3</a><span>중앙일보</span></li>
						<li><a href="#">title 4</a><span>한겨레</span></li>
						<li><a href="#">title 5</a><span>뉴시스</span></li>
					</ul>
				</div>
			</div>
			<div class="news-main-wrap">
				<div class="news-main-header news-flex-between">
					<div class="news-main-header-left news-flex-start">
						<h3><a href="#">정치</a></h3>
						<ul class="news-flex-start">
							<li><a href="#">일반</a></li>
							<li><a href="#">국회/정당</a></li>
							<li><a href="#">청와대</a></li>
						</ul>
					</div>

					<div class="news-main-header-right news-flex-end">
						<i class="icon-1"></i>
						<i class="icon-2"></i>
						<i class="icon-3"></i>
					</div>
				</div>

				<div class="news-main-body news-flex-start">
					<div class="image-wrap">
						<img src="https://via.placeholder.com/220x140">
						<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
					</div>

					<ul class="news-lists">
						<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
						<li><a href="#">title 2</a><span>부산일보</span></li>
						<li><a href="#">title 3</a><span>중앙일보</span></li>
						<li><a href="#">title 4</a><span>한겨레</span></li>
						<li><a href="#">title 5</a><span>뉴시스</span></li>
					</ul>
				</div>
			</div>
			<div class="news-main-wrap">
				<div class="news-main-header news-flex-between">
					<div class="news-main-header-left news-flex-start">
						<h3><a href="#">세계</a></h3>
					</div>

					<div class="news-main-header-right news-flex-end">
						<i class="icon-1"></i>
						<i class="icon-2"></i>
						<i class="icon-3"></i>
					</div>
				</div>

				<div class="news-main-body news-flex-start">
					<div class="image-wrap">
						<img src="https://via.placeholder.com/220x140">
						<h4>[단독] 동해물과 백두산이 마르고 닳도록</h4>
					</div>

					<ul class="news-lists">
						<li><a href="#">title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1 title 1</a><span>국민일보</span></li>
						<li><a href="#">title 2</a><span>부산일보</span></li>
						<li><a href="#">title 3</a><span>중앙일보</span></li>
						<li><a href="#">title 4</a><span>한겨레</span></li>
						<li><a href="#">title 5</a><span>뉴시스</span></li>
					</ul>
				</div>
			</div>



		</div>

		<div class="news-right">
			<div id="news-popular">
				<div class="news-popular-header news-flex-between">
					<div>
						<h3>언론사별 가장 많이 본 뉴스</h3>
						<p>오후 11시 ~ 오전 12시까지 집계한 결과입니다.</p>
					</div>

					<span>더보기</span>
				</div>

				<ul class="news-popular-lists">
					<li class="news-flex-between">
						<div class="news-popular-info">
							<h4><a href="#">무죄가 뒤집혀졌다.</a></h4>
							<i></i><span>경향신문</span>
						</div>
						<img src="https://via.placeholder.com/88x60">
					</li>
					<li class="news-flex-between">
						<div class="news-popular-info">
							<h4><a href="#">무죄가 뒤집혀졌다.</a></h4>
							<i></i><span>경향신문</span>
						</div>
						<img src="https://via.placeholder.com/88x60">
					</li>
					<li class="news-flex-between">
						<div class="news-popular-info">
							<h4><a href="#">무죄가 뒤집혀졌다.</a></h4>
							<i></i><span>경향신문</span>
						</div>
						<img src="https://via.placeholder.com/88x60">
					</li>
					<li class="news-flex-between">
						<div class="news-popular-info">
							<h4><a href="#">무죄가 뒤집혀졌다.</a></h4>
							<i></i><span>경향신문</span>
						</div>
						<img src="https://via.placeholder.com/88x60">
					</li>
					<li class="news-flex-between">
						<div class="news-popular-info">
							<h4><a href="#">무죄가 뒤집혀졌다.</a></h4>
							<i></i><span>경향신문</span>
						</div>
						<img src="https://via.placeholder.com/88x60">
					</li>
				</ul>
			</div>
			
			<div class="news-banner"></div>


			<div id="news-today">
				<div class="news-today-header news-flex-start">
					<h3>TODAY</h3>
					<span>05.21 (금)</span>
				</div>

				<div class="news-today-body">
					<ul class="news-notice-lists">
						<li>
							<h4>공지</h4>
							<p>뉴스홈 헤드라인 비로그인 추천 변경</p>
						</li>
						<li>
							<h4>날씨</h4>
							<p>실시간 기상 정보 확인하기</p>
						</li>
						<li>
							<h4>운세</h4>
							<p>오늘의 띠별 운세 확인하기</p>
						</li>
					</ul>

					<div  class="news-stock-wrap">
						<ul class="news-stock-lists news-flex-between">
							<li>
								<span>코스피</span>
								<h3>3,162.28</h3>
								<em class="down">10.77</em>
							</li>
							<li>
								<span>코스닥</span>
								<h3>971.13</h3>
								<em class="up">2.03</em>
							</li>
						</ul>

						<div class="news-stock-search-wrap">
							<input type="" placeholder="종목검색">
							<button class="btn-search"></button>
						</div>
					</div>
				</div>
			</div>


			

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

<div id="news-nav-bottom">
	<div class="news-container news-flex-between">
		<ul class="news-flex-start">
			<li><a href="#">언론사 목록</a></li>
			<li><a href="#">분야별 목록</a></li>
		</ul>

		<a href="#">마이스크랩</a>
	</div>
</div>

css

.news-container {
width: 1080px;
margin: 0 auto;
}

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

.news-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}

.news-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}

#news-header {
background-color: #3f63bf;
}

#news-header .news-header-left {
padding-top: 17px;
padding-bottom: 17px;
}

#news-header .news-header-left ul li {
font-size: 15px;
}

#news-header .news-header-left ul li.on {
font-size: 20px;
}

#news-header .news-header-left ul li a {
color: #ffffff;
}

#news-header .news-header-left ul li a:before {
display: inline-block;
content: '';
width: 1px;
height: 15px;
background-color: #000;
opacity: 0.2;

margin: 0 10px;
vertical-align: -1px;

}

#news-header .news-header-left ul li:first-child a:before {
content: none;
}

#news-header .news-header-right .btn-login {
display: block;
width: 55px;
height: 25px;
border: solid 1px #000000;

line-height: 25px;
text-align: center;

color: #ffffff;

font-size: 12px;

margin-right: 20px;

}

#news-header .news-header-right .btn-menu {
width: 55px;
height: 55px;
background-color: #3f63bf;
border-left: solid 1px #000000;
border-right: solid 1px #000000;
}

#news-header .sub-nav {
background-color: #ffffff;
border-top: solid 1px #000000;
border-bottom: solid 1px #e3e3e3;
}

#news-header .sub-nav ul {

}

#news-header .sub-nav ul li {
width: auto;
height: 46px;
margin-right: 16px;
}

#news-header .sub-nav ul li a {
display: block;
width: 100%;
height: 100%;
border-bottom: solid 2px transparent;

font-weight: bold;

line-height: 46px;

}

#news-header .sub-nav ul li a.on {
border-bottom: solid 2px #3f63bf;
color: #3f63bf;
}

#news-header .sub-nav .news-search-wrap {
width: 280px;
height: 30px;
border: solid 1px #e1e1e1;
background-color: #fafafa;
}

#news-header .sub-nav .news-search-wrap input {
width: calc(100% - 30px);
height: 100%;
border: none;

font-size: 12px;
color: #888888;
padding: 3px 9px;

}

#news-header .sub-nav .news-search-wrap input:focus {
outline: none;
}

#news-header .sub-nav .news-search-wrap .btn-search{
width: 30px;
height: 100%;
background-color: blue;
}

#news-headline {
padding-top: 20px;
}

#news-headline .news-container {
border-bottom: solid 1px #000000;
padding-bottom: 12px;
}

#news-headline .news-headline-menu-wrap {
margin-bottom: 15px;
}

#news-headline .news-headline-menu-wrap .main-lists {

}

#news-headline .news-headline-menu-wrap .main-lists li {
margin-right: 20px;

font-size: 15px;

}

#news-headline .news-headline-menu-wrap .main-lists li a {

}

#news-headline .news-headline-menu-wrap .sub-lists {

}

#news-headline .news-headline-menu-wrap .sub-lists li {
font-size: 12px;
}

#news-headline .news-headline-menu-wrap .sub-lists li a {

}

#news-headline .news-headline-menu-wrap .sub-lists li a:before {
content: '';
display: inline-block;

width: 1px;
height: 12px;
background-color: #e0e0e0;
margin: 0 5px;

vertical-align: -1px;

}

#news-headline .news-headline-menu-wrap .sub-lists li:first-child a:before {
content: none;
}

#news-headline .news-headline-lists {
margin-bottom: 12px;
}

#news-headline .news-headline-lists li {
width: 255px;
height: 178px;
border: solid 1px #ccc;
}

#news-headline .news-headline-lists li a {
display: block;

width: 100%;
height: 100%;

}

#news-headline .news-headline-lists li a article {
position: relative;
width: 100%;
height: 100%;
}

#news-headline .news-headline-lists li a article h3 {
width: 100%;
height: 44px;
line-height: 44px;

text-align: center;

}

#news-headline .news-headline-lists li a article .image-wrap {
position: relative;
width: 100%;
height: 132px;
background-color: pink;
}

#news-headline .news-headline-lists li a article .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}

#news-headline .news-headline-lists li a article .image-wrap .overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

#news-headline .news-headline-lists li a article .image-wrap .overlay .headline-info {
position: absolute;
width: 100%;
padding: 15px 20px;

left: 0;
bottom: 0;

color: #ffffff;

}

#news-headline .news-headline-lists .headline-info i {
display: block;
width: 26px;
height: 26px;
background-color: black;
border-radius: 50%;

margin-right: 10px;

}

#news-headline .news-headline-lists .headline-info div {
width: calc(100% - 38px);
}

#news-headline .news-headline-lists .headline-info span {
font-size: 13px;
font-weight: bold;
}

#news-headline .news-headline-lists .headline-info p {
display: inline;
font-size: 12px;
}

#news-headline .news-headline-arrows {

}

#news-headline .news-headline-arrows .btn-wrap {
margin-right: 15px;
}

#news-headline .news-headline-arrows .btn {
display: block;
width: 24px;
height: 24px;
border: solid 1px #dcdddc;
}

#news-headline .news-headline-arrows .btn.btn-prev {
background-color: yellow;
border-right: none;
}

#news-headline .news-headline-arrows .btn.btn-next {
background-color: pink;
}

#news-headline .news-headline-arrows .btn.btn-up {
background-color: black;
}

#news-main .news-container {
overflow: hidden;
}

#news-main .news-left {
float: left;
width: 750px;
padding-right: 26px;
padding-bottom: 100px;
}

#news-main .news-left .news-main-wrap {
padding-top: 25px;
padding-bottom: 25px;
border-bottom: solid 1px #dedede;
}

#news-main .news-left .news-main-wrap .news-main-header {
margin-bottom: 14px;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left {

}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 {
margin-right: 12px;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left h3 a {
font-size: 20px;
font-weight: bold;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left a {
font-size: 13px;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left ul {
margin-top: -2px;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left a:before {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background-color: #e5e5e5;

margin: 0 8px;
vertical-align: -1px;

}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-left li:first-child a:before {
content: none;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i {
display: block;
width: 24px;
height: 20px;

margin-left: 8px;

}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-1 {
background-color: yellow;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-2 {
background-color: pink;
}

#news-main .news-left .news-main-wrap .news-main-header .news-main-header-right i.icon-3 {
background-color: grey;
}

#news-main .news-left .news-main-wrap .news-main-body {

}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap {
width: 220px;
margin-right: 25px;
}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap img {
width: 100%;
height: 140px;
border: solid 1px #000000;
margin-bottom: 6px;

}

#news-main .news-left .news-main-wrap .news-main-body .image-wrap h4 {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists {
width: 430px;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li {
margin-bottom: 11px;
font-size: 20px;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li a {
display: inline-block;
max-width: 360px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

vertical-align: middle;

}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li span {
font-size: 12px;
color: #888888;
}

#news-main .news-left .news-main-wrap .news-main-body .news-lists li span:before {
content: '';
position: relative;
display: inline-block;
width: 14px;
height: 11px;
background-color: grey;

margin: 0 4px;

top: 1px;

}

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li a {
cursor: default;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-header ul li:first-child a:before {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background-color: #e5e5e5;

margin: 0 8px 0 0;
vertical-align: -1px;

}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap {
position: relative;
width: 300px;
height: 190px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}

}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .image-wrap h4 {
text-overflow: initial;
white-space: initial;

position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);

padding: 10px 15px;

left: 0;
border: 0;

color: #ffffff;
text-align: center;

}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists {
width: 390px;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li a {
vertical-align: middle;
width: 360px;
max-width: initial;
}

#news-main .news-left .news-main-wrap.news-custome .news-main-body .news-lists li i {
display: inline-block;
width: 22px;
height: 16px;
background-color: black;

vertical-align: middle;

}

#news-main .news-right {
float: right;
width: 327px;
border-left: solid 1px #dfdfdf;
padding: 25px 0 40px 26px;
}

#news-main .news-right #news-popular {
margin-bottom: 30px;
}

#news-main .news-right #news-popular .news-popular-header {
align-items: flex-start;
margin-bottom: 10px;
}

#news-main .news-right #news-popular .news-popular-header h3 {
font-size: 14px;
}

#news-main .news-right #news-popular .news-popular-header p {
font-size: 12px;
}

#news-main .news-right #news-popular .news-popular-header span {
color: #7d7d7d;
font-size: 14px;
cursor: pointer;
}

#news-main .news-right #news-popular .news-popular-lists {

}

#news-main .news-right #news-popular .news-popular-lists li {
padding: 6px 0;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info {
width: 202px;

border-bottom: solid 1px #e3e3e3;
padding-bottom: 6px;

}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4 {
font-size: 13px;
margin-bottom: 5px;
}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info h4 a {

}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info i {
display: inline-block;
width: 16px;
height: 16px;
background-color: grey;
border-radius: 50%;

vertical-align: middle;
margin-right: 5px;

}

#news-main .news-right #news-popular .news-popular-lists li .news-popular-info span {
position: relative;

font-size: 12px;
color: #888888;

vertical-align: middle;

top: 2px;

}

#news-main .news-right #news-popular .news-popular-lists li img {

}

#news-main .news-right .news-banner {
width: 300px;
height: 250px;
background-color: #000000;
border: solid 1px #e3e3e3;

margin-bottom: 30px;

}

#news-main .news-right #news-today {

}

#news-main .news-right #news-today .news-today-header {
margin-bottom: 11px;
}

#news-main .news-right #news-today .news-today-header h3 {
font-size: 14px;
}

#news-main .news-right #news-today .news-today-header span {
font-size: 12px;
}

#news-main .news-right #news-today .news-today-header span:before {
content: '';
display: inline-block;
width: 1px;
height: 10px;
background-color: #e5e5e5;

margin: 0 7px;
vertical-align: -1px;

}

#news-main .news-right #news-today .news-today-body {
padding: 13px 20px 20px;
border: solid 1px #e8e8e8;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists {

}

#news-main .news-right #news-today .news-today-body .news-notice-lists li {
border-bottom: solid 1px #f2f2f2;
padding-bottom: 12px;
margin-bottom: 12px;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li:last-child {
margin-bottom: 0;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li h4 {
display: inline-block;
font-size: 12px;
vertical-align: middle;
margin-right: 8px;
}

#news-main .news-right #news-today .news-today-body .news-notice-lists li p {
display: inline-block;
font-size: 12px;
vertical-align: middle;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists {
padding: 10px 0 7px;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists li {
width: 50%;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists li:last-child {
padding-left: 20px;
border: solid 1px #f2f2f2;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists span {
font-size: 12px;
color: #777777;
margin-bottom: 8px;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists h3 {
font-size: 24px;
margin-bottom: 5px;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists em {
font-style: normal;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists em.down {
color: #066fd1;
}

#news-main .news-right #news-today .news-today-body .news-stock-lists em.up {
color: #fe4638;
}

#news-main .news-right #news-today .news-today-body .news-stock-search-wrap {
width: 100%;
height: 30px;
border: solid 1px #f2f2f2;
}

#news-main .news-right #news-today .news-today-body .news-stock-search-wrap input {
width: calc(100% - 30px);
height: 100%;
background-color: #ffffff;
border: none;
padding: 3px 9px;
}

#news-main .news-right #news-today .news-today-body .news-stock-search-wrap input:focus {
outline: none;
}

#news-main .news-right #news-today .news-today-body .news-stock-search-wrap button {
width: 30px;
height: 100%;
background-color: black;
}

#news-nav-bottom {
border-top: solid 1px dfdfdf;
border-bottom: solid 1px #e3e7ee;

padding: 15px 0;

}

#news-nav-bottom li {
margin-right: 10px;
}

결과물

학습내용 중 어려웠던 점

이제 수업에 어느 정도 적응이 되어서 어려운 것보다는
틀린 코드를 찾는게 일이다.

해결방법

선생님이 올려주신 소스와 내 소스와 비교해가는 것 보다
나의 결과물에서 어떤부분이 제대로 이루어지지 않았는지 확인 후
그 코드만 들여다 보면 된다.

학습소감

세상에는 다양한 페이지가 있고, 이페이지들을 작성하기 위해 많은 노력과 시간이 든다는 것을 깨달았다.

React TIL 01
[백준] 10451. 순열사이클

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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