Day 27 네이버 연예 뉴스 4 - 왼쪽영역 끝

SUN·2021년 8월 3일

1. 학습 내용 08월 03일

추천뉴스(섹션4) ~ TV프로그램 구독(섹션6)

HTML

<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>Title 1 happy ending</h3>
								<p>i'm not pretending no one love no love glory and
								happy ending sundaymorning love all my heart</p>
								<span class="source">스포츠 동아</span>
							</div>

							<img src="https://via.placeholder.com/88px*88px">
						</a>
					</li>
                    - 4개 복사
				</ul>

				<button class="btn-more">새로운 뉴스 가져오기</button>
			</div>

			<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/55px*55px">
							<h4>모범택시</h4>
						</a>
					</li>
                    - 수에 맞게 복사하기
				</ul>
			</div>

			<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/148px*85px">
								<i class="icon-play"></i>
							</div>
							<h4>동햄물과 백두산이 마르ㅏ고 닳도록 하느님이 보웃하 우리 나라만세</h4>
						</a>
						<a href="#">
								<span class="source">KBS2</span>
								<span class="program">미스 몬테크리스토</span>
						</a>
                        - a 태그 안에 a가 못들어가서 빼주어야함
					</li>
				</ul>

			</div>

CSS

#ent-main .ent-left #ent-section-4 {
	padding: 23px 0;
	border-bottom: solid 1px #e4e4e4;}

#ent-main .ent-left #ent-section-4 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-4 ul li {
	padding: 18px 0;
	border-bottom: solid 1px #f1f1f1;}

#ent-main .ent-left #ent-section-4 ul li:last-child {
	border-bottom: none;}

#ent-main .ent-left #ent-section-4 ul .ent-info {
	width: 528px;}

#ent-main .ent-left #ent-section-4 ul .ent-info h3 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 7px;}

#ent-main .ent-left #ent-section-4 ul .ent-info p {
	font-size: 11px;
	font-weight: 400;
	line-height: 20px;

	color: #898989;

	margin-bottom: 9px;}

#ent-main .ent-left #ent-section-4 ul .ent-info .source {
	font-size: 11px;
	font-weight: 400;

	color: #a7a7a7;}

#ent-main .ent-left #ent-section-4 ul li img {
	width: 88px;
	height: 88px;
	border: solid 1px #000000;}

#ent-main .ent-left #ent-section-4 .btn-more {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border: solid 1px #e8e8e8;
	background-color: #ffffff;

	text-align: center;

	color: #444;}

#ent-main .ent-left #ent-section-5 {
	padding: 24px 0 14px;
	border-bottom: solid 1px #e4e4e4;}

#ent-main .ent-left #ent-section-5 .title-wrap {
	margin-bottom: 20px;}

#ent-main .ent-left #ent-section-5 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-5 .title-wrap li a {
	display: block;
	width: 100%;
	height: 100%;
	/* 클릭의 범위를 전체로 넓혀준다. */

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

#ent-main .ent-left #ent-section-5 ul {
	display: flex;
  flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;}

#ent-main .ent-left #ent-section-5 ul li a {
	text-align: center;}

#ent-main .ent-left #ent-section-5 ul li a img {
	width: 55px;
	height: 55px;
	border-radius: 50%;

	margin-bottom: 10px;}

#ent-main .ent-left #ent-section-5 ul a h4 {
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
	/* 글자가 2줄일때 공간을 만들어줌 */}

#ent-main .ent-left #ent-section-6 {
	padding: 24px 0;
	border-bottom: solid 1px #e4e4e4;}

#ent-main .ent-left #ent-section-6 .title-wrap {
	margin-bottom: 17px;}

#ent-main .ent-left #ent-section-6 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-6 .title-wrap a {
	font-size: 12px;
	color: #999;}

#ent-main .ent-left #ent-section-6 li {
	width: 148px;}

#ent-main .ent-left #ent-section-6 li .img-wrap {
	position: relative;

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

	margin-bottom: 10px;}

#ent-main .ent-left #ent-section-6 li .img-wrap img {
	position: absolute;
	width: 100%;
	height: 100%;}

#ent-main .ent-left #ent-section-6 li .img-wrap .icon-play {
	position: absolute;
	display: block;

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

	left: 8px;
	bottom: 7px;}

#ent-main .ent-left #ent-section-6 li h4 {
	font-size: 12px;
	margin-bottom: 8px;}

#ent-main .ent-left #ent-section-6 ul span {
	font-size: 11px;
	color: #1141414;}

#ent-main .ent-left #ent-section-6 li a .source {
	color: #999;}

#ent-main .ent-left #ent-section-6 li a .source:after {
		content: '';
	display: inline-block;
	width: 2px;
	height: 2px;
	background-color: #d3d3d3;
	vertical-align: text-top;

	margin: 7px 2px 0 6px;
    - 위치를 설정}

#ent-main .ent-left #ent-section-6 li a .program:after {
	content: '';
	display: inline-block;
	width: 5px;
	height: 5px;
	background-color: red;
	vertical-align: text-top;

	margin: 5px 2px 0 6px;}

영화는 지금(섹션7) ~ 기자추천 연재코너(섹션9)

HTML

<div id="ent-section-7">
				<div class="title-wrap ent-flex-between">
					<h3>영화계는 지금</h3>
					<a href="">더보기</a>
				</div>
				<div class="movie-wrap ent-flex-start">
					<div class="left">
						<a href="">
							<img src="https://via.placeholder.com/200px*122px">
							<h4>title xkdlxmf wpahr 타이틀 제목</h4>
						</a>
					</div>
					<div class="right">
						<ul>
							<li>
								<a href="#">Title Title Title TitleTitle Titlev Title Title Title Title Title Title </a>
								<span>스타뉴스</span>
							</li>
                            - 개수에 맞게 5개 만들기
						</ul>
					</div>
				</div>
			</div>

			<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><a href="#" class="on">연예뉴스</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">
                - 순위가 있어서 ol을 사용
					<li>
						<a href="#" class="ent-flex-start">
							<span class="rank">1</span>
							<div class="news-info-wrap ent-flex-between">
								<div class="news-info-txt">
									<h4>Title</h4>
									<p>동해물과 백두산이 마르고 닳도록 동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록동해물과 백두산이 마르고 닳도록</p>
									<span>헤럴드 POP</span>
								</div>

								<img src="https://via.placeholder.com/88px*88px">
							</div>
						</a>
					</li>	
                    - 5개 만들기
				</ol>
			</div>

			<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/200px*122px">
							<div class="txt-wrap">
								<span class="program">SW 시선</span>
								<span class="source">스포츠 월드</span>
								<h4>영남대 계명대 경북대 동아대</h4>
							</div>
						</a>
					</li>
                    - 3개 만들기 복붙
				</ul>
			</div>

CSS

#ent-main .ent-left #ent-section-7 {
	padding: 24px 0 20px;
	border-bottom: solid 1px #e4e4e4;}

#ent-main .ent-left #ent-section-7 .title-wrap {
	margin-bottom: 17px;}

#ent-main .ent-left #ent-section-7 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-7 .title-wrap a {
	font-size: 12px;
	color: #999;}

#ent-main .ent-left #ent-section-7 .movie-wrap {
	align-items: stretch;}

#ent-main .ent-left #ent-section-7 .movie-wrap .left img {
	width: 200px;
	height: 122px;
	margin-bottom: 11px;}

#ent-main .ent-left #ent-section-7 .movie-wrap .left h4 {
	font-size: 12px;
	font-weight: 700;}

#ent-main .ent-left #ent-section-7 .movie-wrap .right {
	width: 412px;
	margin-left: 18px;}


#ent-main .ent-left #ent-section-7 .movie-wrap .right li {
	margin-bottom: 10px;}

#ent-main .ent-left #ent-section-7 .movie-wrap .right li:last-child {
	margin-bottom: 0px;}

#ent-main .ent-left #ent-section-7 .movie-wrap .right a {
	display: inline-block;
	max-width: 363px;
	margin-right: 5px;
	vertical-align: top;

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


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

#ent-main .ent-left #ent-section-7 .movie-wrap .right span {
	position: absolute;
	vertical-align: top;
	/* 위쪽으로 정렬 */

	font-size: 11px;
	color: #898989;}

#ent-main .ent-left #ent-section-8 {
	padding: 24px 0 20px;}

#ent-main .ent-left #ent-section-8 .title-wrap div {
	align-items: flex-start;}

#ent-main .ent-left #ent-section-8 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-8 .title-wrap ul {
	position: relative;
	top: -3px;
	margin-left: 19px;}


#ent-main .ent-left #ent-section-8 .title-wrap li a {
	font-size: 12px;
	color: #181818;}

#ent-main .ent-left #ent-section-8 .title-wrap li a:before {
	content: '';
	width: 1px;
	height: 10px;
	display: inline-block;
	background-color: #e8e8e8;

	vertical-align: -1px;

	margin: 0 10px;}

#ent-main .ent-left #ent-section-8 .title-wrap li a.on {
	font-weight: 700;
	color: #e2458f;
	border-bottom: solid 1px #e2458f;}

#ent-main .ent-left #ent-section-8 .title-wrap li:first-child a:before {
	content: none;}

#ent-main .ent-left #ent-section-8 .more {
	font-size: 12px;
	color: #999;}


#ent-main .ent-left #ent-section-8 .news-lists li {
	padding: 18px 0;
	border-bottom: solid 1px #f1f1f1;}


#ent-main .ent-left #ent-section-8 .news-lists .rank {
	display: block;
	width: 40px;
	text-align: center;}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap {
	width: calc(100% - 40px);}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt {
	width: 486px;}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt h4 {
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 9px;}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt p {
	font-size: 12px;
	font-weight: 400;
	color: #898989;
	margin-bottom: 8px;}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-txt span {
	font-size: 11px;
	color: #898989;}

#ent-main .ent-left #ent-section-8 .news-lists .news-info-wrap img {
	width: 88px;
	height: 88px;}



#ent-main .ent-left #ent-section-9 {
	padding: 24px 0 20px;
	border-bottom: solid 1px #e4e4e4;}

#ent-main .ent-left #ent-section-9 .title-wrap {
	margin-bottom: 17px;}

#ent-main .ent-left #ent-section-9 .title-wrap h3 {
	font-size: 16px;}

#ent-main .ent-left #ent-section-9 .title-wrap .more {
	font-size: 12px;
	color: #999;}


#ent-main .ent-left #ent-section-9 li {
	border: solid 1px #000000;
	width: 200px;}

#ent-main .ent-left #ent-section-9 li a {
	display: block;}

#ent-main .ent-left #ent-section-9 li img {
	width: 100%;
	height: 122px;}

#ent-main .ent-left #ent-section-9 li .txt-wrap {
	padding: 13px 14px 18px;}

#ent-main .ent-left #ent-section-9 li .txt-wrap .span {
	font-size: 11px;}

#ent-main .ent-left #ent-section-9 li .txt-wrap .program {
	color: #ff0080;}

#ent-main .ent-left #ent-section-9 li .txt-wrap .program:after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 2px;
	background-color: #d3d3d3;
	vertical-align: top;
	margin: 11px 2px 0 4px;}

#ent-main .ent-left #ent-section-9 li .txt-wrap .source {
	color: #999;}

#ent-main .ent-left #ent-section-9 li .txt-wrap h4 {
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;

	min-height: 36px;

	padding-top: 8px;}

2. 학습 중 어려웠던 점

내용이 비슷하여 이해가 갔다.

3. 해결 방안

열심히 수업 듣고 복습 열심히 하기

4. 학습 소감

능력을 더욱 발전하고 싶다.

profile
SUN
안녕하세요!
이전 포스트

Day 26 네이버 연예 뉴스 3

다음 포스트

Day 28 네이버 연예 뉴스 5 오른쪽 영역

0개의 댓글