2021年8月2日第26日

61891 ワード

テレビ芸能 NAVER芸能 NAVER 皮猫タヌキ匹ネットニューステキストリンク

学習の内容

html - ent

NAVER

<link rel="stylesheet" type="text/css" href="css/style.css">

テレビ芸能

ニュース

テレビ娯楽センター

写真

ランク付け

名映画

最新情報

<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">
									<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">
									<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">1</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">1</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">1</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 class="btn btn-prev"></button>
							<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>

### css
.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 1px #f1f1f1;

padding: 20px 25px 0;

}
#ent-header .ent-header-left ul {
}
#ent-header .ent-header-left ul li {
font-weight: 700;
}
#ent-header .ent-header-left ul li a {
}
#ent-header .ent-header-left ul li:last-child a {
color: #9f9f9f;
}
#ent-header .ent-header-left ul li a:before {
content: '';
display: inline-block;
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 li {
font-weight: 700px;
font-size: 16px;

padding: 0 15px;

}
#ent-header .ent-header-center li a {
display: inline-block;
border-bottom: solid 2px #ffffff;

padding-bottom: 2px;

}
#ent-header .ent-header-center li.on {
}
#ent-header .ent-header-center li.on a {
color: #e24587;
border-bottom: solid 2px #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;
}
#ent-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 {
}
#ent-main .ent-left #ent-media-headline li {
width: 148px;
height: 204px;
border-radius: 10px;
}
#ent-main .ent-left #ent-media-headline a {
display: block;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-media-headline .media-top {
position: relative;
height: 144px;
}
#ent-main .ent-left #ent-media-headline .media-top img {
position: absolute;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-media-headline .media-top .time {
position: absolute;
display: block;
height: 16px;
border-radius: 2px;
background-color: rgba(0, 0, 0, .56);

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

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

}
#ent-main .ent-left #ent-media-headline .media-top .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-media-headline .media-bottom {
height: 60px;
background-color: #444a60;
}
#ent-main .ent-left #ent-media-headline .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 {
}
#ent-main .ent-left #ent-section-1 li {
border-bottom: solid 1px #f1f1f1;
padding: 20px 0;
}
#ent-main .ent-left #ent-section-1 li a {
}
#ent-main .ent-left #ent-section-1 li img {
width: 148px;
height: 90px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap {
width: 462px;
}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap h3 {
margin-bottom: 8px;
font-size: 14px;
font-weight: 700;
}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap p {
margin-bottom: 8px;

font-size: 12px;
color: #898989;
font-weight: 400;
line-height: 20px;

}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap {
}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .source,
#ent-main .ent-left #ent-section-2 .ent-bottom .source{
font-size: 11px;
font-weight: 400;
color: #a7a7a7;
}
#ent-main .ent-left #ent-section-1 li .ent-news-wrap .bottom-wrap .count,
#ent-main .ent-left #ent-section-2 .ent-bottom .count {
display: inline-block;

width: 20px;
height: 20px;
border: solid 1px #000000;
border-radius: 10px;

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

font-size: 10px;

}
#ent-main .ent-left #ent-section-2 {
border-bottom: solid 1px #f1f1f1;
padding: 20px 0;
}
#ent-main .ent-left #ent-section-2 ul {
}
#ent-main .ent-left #ent-section-2 li {
width: 200px;
}
#ent-main .ent-left #ent-section-2 a {
}
#ent-main .ent-left #ent-section-2 img {
width: 200px;
height: 122px;
border: solid 1px #000000;

margin-bottom: 15px;

}
#ent-main .ent-left #ent-section-2 h3 {
font-size: 13px;
line-height: 20px;

margin-bottom: 9px;

}
#ent-main .ent-left #ent-section-2 .ent-bottom {
}
#ent-main .ent-left #ent-section-2 .ent-bottom .source {
}
#ent-main .ent-left #ent-section-2 .ent-bottom .count {
}
#ent-main .ent-left #ent-section-3 {
padding: 24px 0;
border-bottom: solid 1px #e4e4e4;
}
#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 .right-wrap {
}
#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap {
}
#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span {
font-size: 12px;
color: #666;
}
#ent-main .ent-left #ent-section-3 .right-wrap .count-wrap span em {
font-style: normal;
color: #ff0000;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap {
margin-left: 8px;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn {
width: 24px;
height: 24px;
border: solid 1px #000000;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-prev {
border-right: none;
background-color: blue;
}
#ent-main .ent-left #ent-section-3 .right-wrap .btn-wrap .btn-next {
background-color: green;
}
#ent-main .ent-left #ent-section-3 ul {
}
#ent-main .ent-left #ent-section-3 li {
width: 148px;
height: 148px;
border: soild 1px #000000;
}
#ent-main .ent-left #ent-section-3 li a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
#ent-main .ent-left #ent-section-3 li img {
position: absolute;

width: 100%;
height: 100%;

}
#ent-main .ent-left #ent-section-3 li span {
position: absolute;
display: block;
max-width: 100%;
background-color: #f40080;

padding: 0 5px;

left: 0;
top: 0;

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

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

}
#ent-main .ent-left #ent-section-3 li h3 {
position: absolute;
width: 100%;
min-height: 32px;
background-color: rgba(0, 0, 0, .3);
padding: 9px 10px 8px;

left: 0;
bottom: 0;

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

}
#ent-main .ent-right {
float: right;
width: 324px;
height: 2000px;
background-color: pink;
}

結果

学習内容の難点

今日は何の難点もない.コードエラーの部分も見つけやすいです.

解決策

もっと練習して実力を高めることができて、私はすぐに間違ったコードがどんなものか知っているようです.

学習の心得.

以前は決して和弦を間違えないでください.探すのに苦労して、1時間もかかりました.見つけたら少し嬉しいですが、本当に和弦の間違った部分を見つけて、今はその達成感がないようです.私も歩く段階に入りましたか?

Reference

この問題について(2021年8月2日第26日), 我々は、より多くの情報をここで見つけました https://velog.io/@sind1083/2021년-8월-2일-26일차

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

WPF SL C#バックグラウンドライン

[javascript]プログラマー/ペアリングの削除