8월 3일 Velog

117622 단어 대구AI스쿨대구AI스쿨

학습한 내용

네이버 연예 뉴스 실습 #2

3. Main Left

구조

[html]

			<div class="ent_main_left">

				<div id="ent_media_headline"></div>
				<div id="ent_section_1"></div>
                                <div id="ent_section_2"></div>
                                <div id="ent_section_3"></div>
                                <div id="ent_section_4"></div>
                                <div id="ent_section_5"></div>
                                <div id="ent_section_6"></div>
                                <div id="ent_section_4"></div>
                                <div id="ent_section_7"></div>
                                <div id="ent_section_8"></div>
                                <div id="ent_section_9"></div>
                                <div id="ent_section_4"></div>
                
			</div>

(5) ent section 4

[hmtl]

				<div id="ent_section_4">
					<div class="title_wrap">
						<h3>추천뉴스</h3>						
					</div>

					<ul>
						<li>
							<a href="#" class="ent_flex_between">
								<div class="ent_info">
									<h3>[단독]'펜트하우스3', 결말 나왔다…김순옥 "기적 같은 드라마"</h3>
									<p>[스포티비뉴스=장진리 기자] '펜트하우스3' 결말이 나왔다. 3일 스포티비뉴스 취재에 따르면 김순옥 작가는 SBS 금요드라마 '펜트하우스3'(극본 김순옥, 연출 주동민) 마지막회인 14회 대본을 탈고했다.</p>
									<span class="source">스포티비뉴스</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>
						</li>
						<li>
							<a href="#" class="ent_flex_between">
								<div class="ent_info">
									<h3>[단독]'펜트하우스3', 결말 나왔다…김순옥 "기적 같은 드라마"</h3>
									<p>[스포티비뉴스=장진리 기자] '펜트하우스3' 결말이 나왔다. 3일 스포티비뉴스 취재에 따르면 김순옥 작가는 SBS 금요드라마 '펜트하우스3'(극본 김순옥, 연출 주동민) 마지막회인 14회 대본을 탈고했다.</p>
									<span class="source">스포티비뉴스</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>
						</li>
						<li>
							<a href="#" class="ent_flex_between">
								<div class="ent_info">
									<h3>[단독]'펜트하우스3', 결말 나왔다…김순옥 "기적 같은 드라마"</h3>
									<p>[스포티비뉴스=장진리 기자] '펜트하우스3' 결말이 나왔다. 3일 스포티비뉴스 취재에 따르면 김순옥 작가는 SBS 금요드라마 '펜트하우스3'(극본 김순옥, 연출 주동민) 마지막회인 14회 대본을 탈고했다.</p>
									<span class="source">스포티비뉴스</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>
						</li>
						<li>
							<a href="#" class="ent_flex_between">
								<div class="ent_info">
									<h3>[단독]'펜트하우스3', 결말 나왔다…김순옥 "기적 같은 드라마"</h3>
									<p>[스포티비뉴스=장진리 기자] '펜트하우스3' 결말이 나왔다. 3일 스포티비뉴스 취재에 따르면 김순옥 작가는 SBS 금요드라마 '펜트하우스3'(극본 김순옥, 연출 주동민) 마지막회인 14회 대본을 탈고했다.</p>
									<span class="source">스포티비뉴스</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>
						</li>
						<li>
							<a href="#" class="ent_flex_between">
								<div class="ent_info">
									<h3>[단독]'펜트하우스3', 결말 나왔다…김순옥 "기적 같은 드라마"</h3>
									<p>[스포티비뉴스=장진리 기자] '펜트하우스3' 결말이 나왔다. 3일 스포티비뉴스 취재에 따르면 김순옥 작가는 SBS 금요드라마 '펜트하우스3'(극본 김순옥, 연출 주동민) 마지막회인 14회 대본을 탈고했다.</p>
									<span class="source">스포티비뉴스</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>
						</li>
					</ul>

					<button type="button" class="btn_more">새로운 뉴스 가져오기</button>
				</div>

[css]

#ent_main .ent_main_left #ent_section_4 {
	border-bottom: solid 1px #e4e4e4;

	padding: 23px 0;
}

#ent_section_4 .title_wrap {
	/*margin-bottom: 18px;*/
}

#ent_section_4 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_4 ul li {
	border-bottom: solid 1px #f1f1f1;

	padding: 18px 0;
}

#ent_section_4 ul li:last-child {
	border-bottom: none;
}

#ent_section_4 ul li a .ent_info {
	width: 528px;
}

#ent_section_4 .ent_info h3 {
	font-size: 14px;
	font-weight: 700;

	margin-bottom: 7px;
}

#ent_section_4 .ent_info p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;

	line-height: 20px;

	margin-bottom: 9px
}

#ent_section_4 .ent_info .source {
	font-size: 11px;
	font-weight: 400;
	color: #a7a7a7;
}

#ent_section_4 ul li a img {
	width: 88px;
	height: 88px;
	border: 1px solid #000000;
}

#ent_section_4 .btn_more {
	display: block;
	/*버튼은 inline-block*/

	width: 630px;
	height: 40px;
	background-color: #ffffff;
	/*버튼은 기본적으로 회색*/
	border: solid 1px #e8e8e8;

	color: #444;

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

(6) ent section 5

[hmtl]

				<div id="ent_section_5">
					<div class="title_wrap ent_flex_between">
						<h3>오늘의 프로그램</h3>
						<a href="#">더보기</a>
					</div>

					<ul>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/55">
								<h4>백종원 클라쓰</h4>
							</a>
						</li>
					</ul>
				</div>

[css]

#ent_main .ent_main_left #ent_section_5 {
	border-bottom: solid 1px #e4e4e4;

	padding: 24px 0 14px;
}

#ent_section_5 .title_wrap {
	margin-bottom: 20px;
}

#ent_section_5 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_5 .title_wrap a {
	font-size: 12px;
	color: #999;
}

#ent_section_5 ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	/*양 옆 끝에 공백이 있는 space-between*/
	align-items: center;
}

#ent_section_5 ul li {
	width: 80px;
}

#ent_section_5 ul li a {
	display: block;
	width: 80px;

	text-align: center;
}

#ent_section_5 ul li a img {
	width: 55px;
	height: 55px;
	border-radius: 50%;

	margin-bottom: 10px;
}

#ent_section_5 ul li a h4 {
	font-size: 12px;
	font-weight: 700;

	line-height: 16px;
}

(7) ent section 6

[hmtl]

				<div id="ent_section_6">
					<div class="title_wrap ent_flex_between">
						<h3>TV프로그램 구독</h3>
						<a href="#">더보기</a>
					</div>

					<ul class="ent_flex_between">
						<li>
							<a href="#">
								<div class="img_wrap">
									<img src="https://via.placeholder.com/148x85">
									<i class="icon_play"></i>
								</div>
								<h4>[예고] 여름특집 6탄 ＜믿긴 싫지만 현혹되는 미신 19＞</h4>		
							</a>

							<a href="#" class="img_info">
								<span class="source">XtvN</span>
								<span class="program">프리한19</span>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="img_wrap">
									<img src="https://via.placeholder.com/148x85">
									<i class="icon_play"></i>
								</div>
								<h4>[예고] 여름특집 6탄 ＜믿긴 싫지만 현혹되는 미신 19＞</h4>		
							</a>

							<a href="#" class="img_info">
								<span class="source">XtvN</span>
								<span class="program">프리한19</span>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="img_wrap">
									<img src="https://via.placeholder.com/148x85">
									<i class="icon_play"></i>
								</div>
								<h4>[예고] 여름특집 6탄 ＜믿긴 싫지만 현혹되는 미신 19＞</h4>		
							</a>

							<a href="#" class="img_info">
								<span class="source">XtvN</span>
								<span class="program">프리한19</span>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="img_wrap">
									<img src="https://via.placeholder.com/148x85">
									<i class="icon_play"></i>
								</div>
								<h4>[예고] 여름특집 6탄 ＜믿긴 싫지만 현혹되는 미신 19＞</h4>		
							</a>

							<a href="#" class="img_info">
								<span class="source">XtvN</span>
								<span class="program">프리한19</span>
							</a>
						</li>
					</ul>
				</div>

[css]

#ent_main .ent_main_left #ent_section_6 {
	border-bottom: solid 1px #e4e4e4;

	padding: 24px 0 23px;
}

#ent_section_6 .title_wrap {
	padding-bottom: 17px;
}

#ent_section_6 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_6 .title_wrap a {
	font-size: 12px;
	color: #999;
}

#ent_section_6 ul li {
	width: 148px;
}

#ent_section_6 ul li a .img_wrap {
	position: relative;

	width: 148px;
	height: 85px;
	border: solid 1px #000000;

	margin-bottom: 10px;
}

#ent_section_6 .img_wrap img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#ent_section_6 .img_wrap .icon_play {
	position: absolute;
	display: block;

	width: 28px;
	height: 28px;
	background-color: grey;
	border-radius: 50%;

	left: 8px;
	bottom: 7px;
}

#ent_section_6 ul li a h4 {
	font-size: 12px;
	font-weight: 700;

	line-height: 16px;

	margin-bottom: 8px;
}

#ent_section_6 ul li .img_info {
	font-size: 11px;
	color: #141414;
}

#ent_section_6 .img_info .source {
	color: #999;
}

#ent_section_6 .img_info .source:after {
	content: "";
	display: inline-block;

	width: 2px;
	height: 2px;
	background-color: #d3d3d3;

	vertical-align: top;

	margin: 12px 2px 0 4px;
}

#ent_section_6 .img_info .program:after {
	content: "";
	display: inline-block;

	width: 5px;
	height: 5px;
	background-color: black;

	vertical-align: top;

	margin: 10px 2px 0 6px;
}

(8) ent section 7

[hmtl]

				<div id="ent_section_7">
					<div class="title_wrap ent_flex_between">
						<h3>영화계는 지금</h3>
						<a href="#">더보기</a>
					</div>

					<div class="movie_wrap">
						<div class="movie_left">
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<h4>'모가디슈' 올해 한국영화 최고 흥행작…100만 돌파 코앞</h4>
							</a>
						</div>

						<ul class="movie_right">
							<li>
								<a href="#">'모가디슈' 100만 돌파 눈앞…올해 韓영화 흥행 1위</a>
								<span>뉴시스</span>
							</li>
							<li>
								<a href="#">'모가디슈', '발신제한' 넘었다..올해 韓 영화 최고 흥행 신기록 [공식]</a>
								<span>스타뉴스</span>
							</li>
							<li>
								<a href="#">[공식] '모가디슈' 3일 오전 11시 95만 돌파, 올해 韓영화 최단X최고 신기록</a>
								<span>스포츠조선</span>
							</li>
							<li>
								<a href="#">송중기, 기적을 안겨주다..세상 어디에도 없는 '착한 남자'[★FOCUS]</a>
								<span>스타뉴스</span>
							</li>
							<li>
								<a href="#">[공식] '모가디슈' 올해 한국영화 최고 흥행 신기록 달성</a>
								<span>텐아시아</span>
							</li>
						</ul>
					</div>
				</div>

[css]

#ent_main .ent_main_left #ent_section_7 {
	border-bottom: solid 1px #e4e4e4;

	padding: 24px 0 20px;	
}

#ent_section_7 .title_wrap {
	margin-bottom: 17px;
}

#ent_section_7 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_7 .title_wrap a {
	font-size: 12px;
	color: #999;
}

#ent_section_7 .movie_wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	/*중앙 정렬이 아니고 위에서부터 정렬 주의*/
}

#ent_section_7 .movie_wrap .movie_left a {
	display: block;

	width: 200px;
}

#ent_section_7 .movie_wrap .movie_left a img {
	width: 200px;
	height: 122px;

	margin-bottom: 11px;
}

#ent_section_7 .movie_wrap .movie_left a h4 {
	font-size: 12px;
	font-weight: 700;

	line-height: 20px;
}

#ent_section_7 .movie_wrap .movie_right {
	width: 412px;
	height: 140px;

	margin-left: 18px;
}

#ent_section_7 .movie_wrap .movie_right li {
	height: 28px;
}

#ent_section_7 .movie_wrap .movie_right li:last-child {
	margin-bottom: 0;
}

#ent_section_7 .movie_wrap .movie_right li:before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	background-color: #c1c1c1;

	vertical-align: top;
	margin: 9px 0 0 0;
}

#ent_section_7 .movie_wrap .movie_right li a {
	display: inline-block;
	/*block을 넣으면 span과 줄바꿈이 일어나므로 주의*/

	font-size: 14px;
	font-weight: 700;

	vertical-align: top;

	margin-right: 5px;

	max-width: 330px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/*말줄임표*/
}

#ent_section_7 .movie_wrap .movie_right li span {
	font-size: 11px;
	color: #898989;

	vertical-align: top;
}

(9) ent section 8

[hmtl]

				<div id="ent_section_8">
					<div class="title_wrap ent_flex_between">
						<div class="ent_flex_start">
							<h3>많이 본 연예정보</h3>
							<ul class="ent_flex_start">
								<li class="on"><a href="#">연예뉴스</a></li>
								<li><a href="#">영상</a></li>
								<li><a href="#">뮤직</a></li>
								<li><a href="#">V LIVE</a></li>
							</ul>
						</div>

						<a href="#" class="more">더보기</a>
					</div>


					<ol class="news_lists">
						<li class="ent_flex_start">
							<span class="news_rank">1</span>

							<a href="#" class="news_info_wrap ent_flex_between">
								<div class="news_info_text">
									<h4>[백투더TEN]원빈♥이나영 부부, 새 가족이 생겼다</h4>
									<p>[텐아시아=조준원 기자] 다사다난한 연예계. 과거 8월 3일엔 무슨 일이 있었을까. 2015년 8월 3일 배우 원빈 이나영 부부가 2세 소식을 전했다.
									</p>
									<span class="source">텐아시아</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>							
						</li>
						<li class="ent_flex_start">
							<span class="news_rank">2</span>

							<a href="#" class="news_info_wrap ent_flex_between">
								<div class="news_info_text">
									<h4>[백투더TEN]원빈♥이나영 부부, 새 가족이 생겼다</h4>
									<p>[텐아시아=조준원 기자] 다사다난한 연예계. 과거 8월 3일엔 무슨 일이 있었을까. 2015년 8월 3일 배우 원빈 이나영 부부가 2세 소식을 전했다.
									</p>
									<span class="source">텐아시아</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>							
						</li>
						<li class="ent_flex_start">
							<span class="news_rank">3</span>

							<a href="#" class="news_info_wrap ent_flex_between">
								<div class="news_info_text">
									<h4>[백투더TEN]원빈♥이나영 부부, 새 가족이 생겼다</h4>
									<p>[텐아시아=조준원 기자] 다사다난한 연예계. 과거 8월 3일엔 무슨 일이 있었을까. 2015년 8월 3일 배우 원빈 이나영 부부가 2세 소식을 전했다.
									</p>
									<span class="source">텐아시아</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>							
						</li>
						<li class="ent_flex_start">
							<span class="news_rank">4</span>

							<a href="#" class="news_info_wrap ent_flex_between">
								<div class="news_info_text">
									<h4>[백투더TEN]원빈♥이나영 부부, 새 가족이 생겼다</h4>
									<p>[텐아시아=조준원 기자] 다사다난한 연예계. 과거 8월 3일엔 무슨 일이 있었을까. 2015년 8월 3일 배우 원빈 이나영 부부가 2세 소식을 전했다.
									</p>
									<span class="source">텐아시아</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>							
						</li>
						<li class="ent_flex_start">
							<span class="news_rank">5</span>

							<a href="#" class="news_info_wrap ent_flex_between">
								<div class="news_info_text">
									<h4>[백투더TEN]원빈♥이나영 부부, 새 가족이 생겼다</h4>
									<p>[텐아시아=조준원 기자] 다사다난한 연예계. 과거 8월 3일엔 무슨 일이 있었을까. 2015년 8월 3일 배우 원빈 이나영 부부가 2세 소식을 전했다.
									</p>
									<span class="source">텐아시아</span>
								</div>

								<img src="https://via.placeholder.com/88">
							</a>							
						</li>
					</ol>
				</div>

[css]

#ent_main .ent_main_left #ent_section_8 {
	padding: 24px 0 6px;
}

#ent_section_8 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_8 .title_wrap ul {
	position: relative;
	top: -4px;

	margin-left: 19px;
}

#ent_section_8 .title_wrap ul li a {
	border-bottom: solid 1px transparent;

	font-size: 12px;
	color: #181818;
}

#ent_section_8 .title_wrap ul li.on a {
	border-bottom: solid 1px #e2458f;

	font-weight: 700;
	color: #e2458f;
}

#ent_section_8 .title_wrap ul li a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 10px;
	background-color: #e8e8e8;

	vertical-align: -1px;
	margin: 2px 11px 0 10px;
}

#ent_section_8 .title_wrap ul li:first-child a:before {
	content: none;
}

#ent_section_8 .title_wrap .more {
	font-size: 12px;
	color: #999;
}

#ent_section_8 .news_lists li {
	border-bottom: solid 1px #f1f1f1;

	padding: 18px 0;
}

#ent_section_8 .news_lists li .news_rank {
	display: block;

	width: 40px;
	height: 88px;

	font-size: 28px;

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

#ent_section_8 .news_lists .news_info_wrap {
	/*a 태그에 flex 적용하면 block으로 변경하면 안된다.*/
	width: calc(100% - 40px);
}

#ent_section_8 .news_lists .news_info_wrap .news_info_text {
	width: 486px;
}

#ent_section_8 .news_lists .news_info_wrap .news_info_text h4 {
	font-size: 14px;
	font-weight: 700;

	margin-top: 2px;
	padding-bottom: 9px;
}

#ent_section_8 .news_lists .news_info_wrap .news_info_text p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;
}

#ent_section_8 .news_lists .news_info_wrap .news_info_text .source {
	font-size: 11px;
	color: #a7a7a7;
	padding: 8px 0 2px;
}

#ent_section_8 .news_lists .news_info_wrap img {
	width: 88px;
	height: 88px;
}

(10) ent section 9

[hmtl]

				<div id="ent_section_9">
					<div class="title_wrap ent_flex_between">
						<h3>기자추천 연재코너</h3>
						<a href="#" class="more">더보기</a>
					</div>

					<ul class="ent_flex_between">
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<div class="txt_wrap ent_flex_start">
									<span class="program">애프터스크리닝</span>
									<span class="source">MBC연예</span>
									<h4>헐! 세트라고? 믿기지 않는 생생한 스케일 '싱크홀' …</h4>
								</div>								
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<div class="txt_wrap">
									<span class="program">애프터스크리닝</span>
									<span class="source">MBC연예</span>
									<h4>헐! 세트라고? 믿기지 않는 생생한 스케일 '싱크홀' …</h4>
								</div>								
							</a>
						</li>
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<div class="txt_wrap ent_flex_start">
									<span class="program">애프터스크리닝</span>
									<span class="source">MBC연예</span>
									<h4>헐! 세트라고? 믿기지 않는 생생한 스케일 '싱크홀' …</h4>
								</div>								
							</a>
						</li>						
					</ul>
				</div>

[css]

#ent_main .ent_main_left #ent_section_9 {
	border-bottom: 1px solid #e4e4e4;

	padding: 24px 0 20px;
}

#ent_section_9 .title_wrap {
	margin-bottom: 17px;
}

#ent_section_9 .title_wrap h3 {
	font-size: 16px;
}

#ent_section_9 .title_wrap .more {
	font-size: 12px;
	color: #999;
}

#ent_section_9 ul li {
	width: 200px;
	border: 1px solid #e5e5e5;
}

#ent_section_9 ul li a {
	display: block;
}

#ent_section_9 ul li a img {
	width: 100%;
	/*li 영역의 border를 포함한 크기가 200px이므로 img의 width를 100%로 지정한다.*/
	height: 122px;
}

#ent_section_9 ul li a .txt_wrap {
	padding: 13px 14px 18px;
}

#ent_section_9 .txt_wrap span {
	font-size: 11px;
	color: #999999;
}

#ent_section_9 .txt_wrap .program {
	color: #ff0080;
}

#ent_section_9 .txt_wrap .source:before {
	content: "";
	display: inline-block;
	width: 2px;
	height: 2px;
	background-color: #bdbdbd;

	vertical-align: top;
	margin: 6px 6px 0;
}

#ent_section_9 .txt_wrap h4 {
	min-height: 36px;

	font-size: 12px;
	font-weight: 700;

	line-height: 20px;

	padding-top: 8px;
}

크롬 이미지 크롤링
[BOJ][Python]수 이어가기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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