2021.06.21 (네이버 뉴스 3)

이상화·2021년 6월 21일
0

학습한 내용

[네이버 연예 뉴스 상단 영역]

  • 형제 관계에서의 마진병합 현상은 위쪽 아래쪽 에서만 일어나고 좌우의 경우는 발생하지 않음
	<header id="ent_header">
		<div class="ent_flex_between">
			<div class="ent_header_left">
				<ul class="ent_flex_start">
					<li><a href="#">TV연예</a></li>
					<li><a href="news.html">뉴스</a></li>
				</ul>
			</div>

			<div class="ent_header_center">
				<ul class="ent_flex_center">
					<li class="on"><a href="#">TV연예홈</a></li>
					<li><a href="#">TV</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 class="ent_header_right ent_flex_end">
				<a href="#" class="btn_login">로그인</a>
				<button type="button" class="btn_menu"></button>
				<button type="button" class="btn_search"></button>
			</div>
		</div>
	</header>
.ent_container {
	width: 980px;
	margin: 0 auto;
}

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

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

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

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

.ent_border {
	border: solid 1px #000000;
}

#ent_header {
	width: 100%;
	height: 62px;

	background-color: #ffffff;

	border-bottom: solid 2px #f1f1f1;

	padding: 20px 25px 0;
}

#ent_header .ent_header_left ul li {
	font-size: 16px;
	font-weight: 700;
}

#ent_header .ent_header_left ul li:last-child a {
	color: #9f9f9f;
}

#ent_header .ent_header_left ul li a:before {
	display: inline-block;
	content: "";
	width: 1px;
	height: 12px;
	background-color: #dddddd;

	margin: 0 8px;

	vertical-align: -1px;
}

#ent_header .ent_header_left ul li:first-child a:before {
	content: none;
}

#ent_header .ent_header_center ul li {
	font-size: 16px;
	font-weight: 700;

	padding: 0 15px 2px;
}

#ent_header .ent_header_center ul li a {
	display: inline-block;

	border-bottom: solid 2px #ffffff;

	padding-bottom: 2px;
}

#ent_header .ent_header_center ul li.on a {
	border-bottom: solid 2px #e24587;
	
	color: #e24587;
}

#ent_header .ent_header_right .btn_login {
	width: 45px;
	height: 20px;

	border: solid 1px #000000;

	font-size: 12px;
	
	line-height: 20px;
	text-align: center;

	margin: 0 9px;
}

#ent_header .ent_header_right .btn_menu {
	width: 16px;
	height: 16px;

	background-color: grey;

	margin: 0 9px;
}

#ent_header .ent_header_right .btn_search {
	width: 25px;	
	height: 25px;

	background-color: #000000;

	margin-left: 9px;
}

[네이버 연예 뉴스 메인 왼쪽 부분]

letter-spacing: -1px; /* 글자간 좌우 간격 */
	<main role="main" id="ent_main">
		<div class="ent_container">
			<div class="ent_left">
				<div id="ent_media_headline">
					<ul class="ent_flex_between">
						<li>
							<a href="#">
								<div class="media_top">
									<img src="https://via.placeholder.com/148x145">
									<span class="time">03:02</span>
									<i class="icon_play"></i>
								</div>

								<div class="media_bottom">
									<p>[신곡 MV] BTS(방탄소년단).....</p>
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<div class="media_top">
									<img src="https://via.placeholder.com/148x145">
									<span class="time">03:02</span>
									<i class="icon_play"></i>
								</div>

								<div class="media_bottom">
									<p>[신곡 MV] BTS(방탄소년단).....</p>
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<div class="media_top">
									<img src="https://via.placeholder.com/148x145">
									<span class="time">03:02</span>
									<i class="icon_play"></i>
								</div>

								<div class="media_bottom">
									<p>[신곡 MV] BTS(방탄소년단).....</p>
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<div class="media_top">
									<img src="https://via.placeholder.com/148x145">
									<span class="time">03:02</span>
									<i class="icon_play"></i>
								</div>

								<div class="media_bottom">
									<p>[신곡 MV] BTS(방탄소년단).....</p>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div id="ent_section_1">
					<ul>
						<li>
							<a href="#" class="ent_flex_between">
								<img src="https://via.placeholder.com/148x90">
								<div class="ent_news_wrap">
									<h3>Title 1</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
									동해물과 백두산이 마르고 닳도록</p>

									<div class="bottom_wrap ent_flex_between">
										<span class="source">TV리포트</span>
										<span class="count">9</span>
									</div>
								</div>
							</a>
						</li>

						<li>
							<a href="#" class="ent_flex_between">
								<img src="https://via.placeholder.com/148x90">
								<div class="ent_news_wrap">
									<h3>Title 1</h3>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록
									동해물과 백두산이 마르고 닳도록</p>

									<div class="bottom_wrap ent_flex_between">
										<span class="source">TV리포트</span>
										<span class="count">9</span>
									</div>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div id="ent_section_2">
					<ul class="ent_flex_between">
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>

								<div class="ent_bottom ent_flex_between">
									<span class="source">TV리포트</span>
									<span class="count">11</span>
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>

								<div class="ent_bottom ent_flex_between">
									<span class="source">TV리포트</span>
									<span class="count">11</span>
								</div>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/200x122">
								<h3>Title 1 Title 1 Title 1 Title 1 Title 1</h3>

								<div class="ent_bottom ent_flex_between">
									<span class="source">TV리포트</span>
									<span class="count">11</span>
								</div>
							</a>
						</li>
					</ul>
				</div>

				<div id="ent_section_3">
					<div class="title_wrap ent_flex_between">
						<h3>스타콘텐츠</h3>

						<div class="right_wrap ent_flex_end">
							<div class="count_wrap">
								<span><em>1</em> / 2</span>
							</div>
							<div class="btn_wrap ent_flex_end">
								<button type="button" class="btn btn_prev"></button>
								<button type="button" class="btn btn_next"></button>
							</div>
						</div>
					</div>

					<ul class="ent_flex_between">
						<li>
							<a href="#">
								<img src="https://via.placeholder.com/148x148">
								<span>에이치앤드 에이치앤드 에이치앤드</span>
								<h3>[금새록] 오월의 새록 오월의 새록</h3>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/148x148">
								<span>에이치앤드</span>
								<h3>[금새록] 오월의 새록 오월의 새록</h3>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/148x148">
								<span>에이치앤드</span>
								<h3>[금새록] 오월의 새록 오월의 새록</h3>
							</a>
						</li>

						<li>
							<a href="#">
								<img src="https://via.placeholder.com/148x148">
								<span>에이치앤드</span>
								<h3>[금새록] 오월의 새록 오월의 새록</h3>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<div class="ent_right">
				
			</div>
		</div>
	</main>
#ent_main .ent_container {
	overflow: hidden;
}

#ent_main .ent_left {
	float: left;

	width: 654px;
	height: 2000px;

	background-color: yellow;

	padding-right: 24px;
}

#ent_main .ent_left #ent_media_headline {
	padding-bottom: 20px;

	border-bottom: solid 1px #f1f1f1;
}

#ent_main .ent_left #ent_media_headline ul li {
	width: 148px;
	height: 204px;

	border-radius: 10px;
}

#ent_main .ent_left #ent_media_headline ul li a {
	display: block;

	width: 100%;
	height: 100%;
}

#ent_main .ent_left #ent_media_headline ul li a .media_top {
	position: relative;

	height: 144px;
}

#ent_main .ent_left #ent_media_headline ul li a .media_top img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#ent_main .ent_left #ent_media_headline ul li a .media_top .time {
	position: absolute;
	display: block;

	height: 16px;

	color: #ffffff;
	font-size: 11px;
	line-height: 16px;

	padding: 0 4px;
	
	right: 8px;
	top: 8px;

	border-radius: 2px;

	background-color: rgba(0, 0, 0, 0.56);
}

#ent_main .ent_left #ent_media_headline ul li a .media_top .icon_play {
	position: absolute;
	display: block;

	width: 28px;
	height: 28px;

	left: 8px;
	bottom: 7px;

	border-radius: 50%;

	background-color: grey;
}

#ent_main .ent_left #ent_media_headline ul li a .media_bottom {
	height: 60px;

	background-color: #444a60;
}

#ent_main .ent_left #ent_media_headline ul li a .media_bottom p {
	font-size: 14px;
	font-weight: 700;

	letter-spacing: -1px;

	padding: 11px 12px 0;

	color: #ffffff;
}

#ent_main .ent_left #ent_section_1 ul li {
	border-bottom: solid 1px #f1f1f1;

	padding: 20px 0;
}

#ent_main .ent_left #ent_section_1 ul li a img {
	width: 148px;
	height: 90px;
	border: solid 1px #000000;
}

#ent_main .ent_left #ent_section_1 ul li a .ent_news_wrap {
	width: 462px;
}

#ent_main .ent_left #ent_section_1 ul li a .ent_news_wrap h3 {
	font-size: 14px;
	font-weight: 700;

	margin-bottom: 8px;
}

#ent_main .ent_left #ent_section_1 ul li a .ent_news_wrap p {
	font-size: 11px;
	color: #898989;
	font-weight: 400;

	line-height: 20px;

	margin-bottom: 8px;
}

#ent_main .ent_left #ent_section_1 ul li a .ent_news_wrap .bottom_wrap .source,
#ent_main .ent_left #ent_section_2 ul li a .ent_bottom .source {
	font-size: 11px;
	color: #a7a7a7;
	font-weight: 400;
}

#ent_main .ent_left #ent_section_1 ul li a .ent_news_wrap .bottom_wrap .count,
#ent_main .ent_left #ent_section_2 ul li a .ent_bottom .count {
	display: inline-block;

	width: 20px;
	height: 20px;

	font-size: 10px;

	border: solid 1px #000000;
	border-radius: 5px;

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

#ent_main .ent_left #ent_section_2 {
	border-bottom: solid 1px #f1f1f1;

	padding: 20px 0;
}

#ent_main .ent_left #ent_section_2 ul li {
	width: 200px;
}

#ent_main .ent_left #ent_section_2 ul li a img {
	width: 200px;
	height: 122px;

	border: solid 1px #000000;

	margin-bottom: 15px;
}

#ent_main .ent_left #ent_section_2 ul li a h3 {
	font-size: 13px;

	line-height: 20px;

	margin-bottom: 9px;
}

#ent_main .ent_left #ent_section_3 {
	border-bottom: solid 1px #e4e4e4;

	padding: 24px 0;
}

#ent_main .ent_left #ent_section_3 .title_wrap {
	margin-bottom: 18px;
}

#ent_main .ent_left #ent_section_3 .title_wrap h3 {
	font-size: 16px;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .count_wrap span {
	font-size: 12px;
	color: #666;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .count_wrap span em {
	font-style: normal;
	color: #ff0080;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .btn_wrap {
	margin-left:8px;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .btn_wrap .btn {
	width: 24px;
	height: 24px;

	border: solid 1px #000000;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .btn_wrap .btn_prev {
	border-right: none;

	background-color: blue;
}

#ent_main .ent_left #ent_section_3 .title_wrap .right_wrap .btn_wrap .btn_next {
	background-color: green;
}

#ent_main .ent_left #ent_section_3 ul li {
	width: 148px;
	height: 148px;

	border: solid 1px #000000;
}

#ent_main .ent_left #ent_section_3 ul li a {
	position: relative;

	display: block;

	width: 100%;
	height: 100%;
}

#ent_main .ent_left #ent_section_3 ul li a img {
	position: absolute;

	width: 100%;
	height: 100%;
}

#ent_main .ent_left #ent_section_3 ul li a span {
	position: absolute;
	display: block;

	max-width: 100%;

	left: 0;
	top: 0;

	font-size: 11px;
	font-weight: 700;
	color: #ffffff;

	background-color: #f40080;

	padding: 0 5px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#ent_main .ent_left #ent_section_3 ul li a h3 {
	position: absolute;

	width: 100%;
	min-height: 32px;

	left: 0;
	bottom: 0;

	font-size: 12px;
	font-weight: 700;
	color: #ffffff;

	padding: 9px 10px 8px;

	background-color: rgba(0, 0, 0, 0.3);
}

학습내용 중 어려웠던 점

따로 어려운 부분은 없었지만 배웠는데 자주 사용하지 않아서 햇갈린 부분들이 가끔 있었습니다.
그리고 영상의 경우 선택자를 점점 줄여갔지만 저는 공부목적이라 다 쓰다보니 속도를 맞추지 못하는 경우가 선택자 작업 하는 도중 종종 생겼습니다.

해결방법

따로 햇갈린 부분은 별도로 체크해서 따로 적어두거나 주석을 사용해서 표시를 해놨고, 속도를 맞추지 못하는 선택자 부분은 따로 영상을 멈추고 html코드를 보면서 선택자를 적어두고 영상을 보면서 한번더 체크하는 방식으로 했습니다.

학습소감

페이지 카피를 계속 하다보니 아직 완벽하진 않지만 웹 페이지를 보고 대략적으로 설계도면과 어떤 배치작업을 해야될지 조금씩 보이기 시작하고 있습니다.

profile
이상화
개발자를 꿈꾸는 이상화입니다.
이전 포스트

2021.06.18 (네이버 뉴스 2)

다음 포스트

2021.06.22 (네이버 뉴스 4)

0개의 댓글

관련 채용 정보