[dg ai school]Webプログラミング26

79904 ワード

学習内容

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>네이버</title>

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

</head>
<body>

    <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="end-flex-center">
                    <li><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"></div>
                <a href="#">로그인</a>
                <button type="button" class="btn-menu"></button>
                <button tyep="button" class="btn-search"></button>
        </div>

    </header>

    <main role="main" id="ent-main">
		<div class="ent-container">
			
			<div class="ent-main-left"></div>
            <div class="ent-main-right"></div>

		</div>
	</main>

    <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>   

    <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 2</h3>
                    <div class="bottom-wrap ent-flex-between">
                        <span class="source">OSEN</span>
                        <span class="count">1</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/200x122">
                    <h3>Title 2</h3>
                    <div class="bottom-wrap ent-flex-between">
                        <span class="source">OSEN</span>
                        <span class="count">1</span>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/200x122">
                    <h3>Title 2</h3>
                    <div class="bottom-wrap ent-flex-between">
                        <span class="source">OSEN</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="button-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/148">
                    <span>에이치엔드</span>
                    <h3>[금새록] 오월의 새록</h3>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/148">
                    <span>에이치엔드</span>
                    <h3>[금새록] 오월의 새록</h3>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/148">
                    <span>에이치엔드</span>
                    <h3>[금새록] 오월의 새록</h3>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/148">
                    <span>에이치엔드</span>
                    <h3>[금새록] 오월의 새록</h3>
                </a>
            </li>
        </ul>
    </div>


</body>


</html>

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: flex-start;
	align-items: center;
}

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

.ent-flex-between {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	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 a {
	color: #9f9f9f;
}

#ent-header .ent-header-left ul li:first-child a {
	color: black;
} 

#ent-header .ent-header-left ul li a:before {
	content: "";
	display: inline-block;

	width: 1px;
	height: 12px;
	background-color: #dddddd;

	vertical-align: -1px;

	margin: 0 8px;
}

#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;
}

#ent-header .ent-header-center ul li a {
	border-bottom: solid 2px #ffffff;

	padding-bottom: 2px; 
}

#ent-header .ent-header-center ul li.on a {
	color: #e2458f;
	border-bottom: solid 2px #e2458f;
}

#ent-header .ent-header-right .btn-login {
	width: 45px;
	height: 20px;
	border: solid 1px grey;

	font-size: 12px;

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

#ent-header .ent-header-right .btn-menu {
	width: 16px;
	height: 16px;
	background-color: grey;

	margin-left: 18px;
}

#ent-header .ent-header-right .btn-search {
	width: 25px;
	height: 25px;
	background-color: black;

	margin-left: 18px;
}

/* 메인영역 */
#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-weight: 700;
    font-size: 16px;
}

#ent-header .ent-header-left ul li 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-left ul li:first-child a{
    color: #000000;
}

#ent-header .ent-header-center ul li {
    font-weight: 700;
    font-size: 16px;
    
    padding: 0 15px;
}

#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: 2px solid #e2458f;
    color: #e2458f;
}

#ent-header .ent-header-right .btn-login {
    width: 45px;
    height: 20px;
    border: solid 1px rgba(0, 0, 0, 0.05);
    margin: 0 9px;

    font-size: 12px;
    color: #666;
    line-height: 20px;
    text-align: center;
}

#ent-header .ent-header-right .btn-menu {
    width: 16px;
    height: 16px;
    background-color: gray;
    margin: 0 9px;
}

#ent-header .ent-header-right .btn-search {
    width: 25px;
    height: 25px;
    background-color: indianred;
    margin-left: 9px;
}

/* 메인영역 */
#ent-main .ent-container {
    overflow: hidden;
}

#ent-main .ent-left {
    float: left;
    width: 654px;
    /* height: 2000px; */
    /* background-color: seagreen; */
    padding-right: 24px;
    border-right: solid 1px #f1f1f1;
}

#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 a {
    display: block;
    width: 100%;
    height: 100%;
}

#ent-main .ent-left #ent-media-headline .media-top {
    position:relative;
    width: 100%;
    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, 0.56);
    padding: 0 4px;

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

    top: 8px;
    right: 8px;
}

#ent-main .ent-left #ent-media-headline .media-top .icon-play {
    position: absolute;
    display: block;

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

    left: 8px;
    bottom: 7px;
}

#ent-main .ent-left #ent-media-headline .media-bottom {
    width: 100%;
    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 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 rgba(0, 0, 0, 0.1);
}

#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 {
    margin-bottom: 8px;

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

#ent-main .ent-left #ent-section-1 ul li a .ent-bottom-wrap .source,
#ent-main .ent-left #ent-section-2 ul li a .ent-bottom-wrap .source {
    font-size: 11px;
    font-weight: 400;
    color: #a7a7a7;
}

#ent-main .ent-left #ent-section-1 ul li a .ent-bottom-wrap .count,
#ent-main .ent-left #ent-section-2 ul li a .ent-bottom-wrap .count {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: solid 1px #f1f1f1;
    border-radius: 5px;

    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 li {
    width: 200px;
}

#ent-main .ent-left #ent-section-2 li img { 
    width: 200px;
    height: 122px;
    margin-bottom: 15px;
}

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

#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 .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 rgba(0, 0, 0, 0.1);
}

#ent-main .ent-left #ent-section-3 .title-wrap .right-wrap .btn-wrap .btn.btn-prev {
    background-color: yellow;
}

#ent-main .ent-left #ent-section-3 .title-wrap .right-wrap .btn-wrap .btn.btn-prev {
    border-right: none;
}

#ent-main .ent-left #ent-section-3 .title-wrap .right-wrap .btn-wrap .btn.btn-next {
    background-color: palevioletred;
}

#ent-main .ent-left #ent-section-3 li {
    width: 148px;
    height: 148px;
    border: solid 1px rgba(0, 0, 0, 0.1);
}

#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;
    background-color: #f40080;
    padding: 0 5px;
    max-width: 100%;

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

    left: 0;
    top: 0;

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

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

    left: 0;
    bottom: 0;

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

難点

の大きな構造は理解できるが、詳細な設定方法が混同され始めた.

解決策

課に沿って、数値が少し間違っているようなところを微調整して、

を理解します.

学習の心得.

コードが長すぎて、理解とともに理解しているのか分からないし、理解しているのか分からないし、詳しい部分の説明を聞きたいのですが、それよりもコードがあるだけなので書いておくとブラウザで変更されるので、この程度はちょっと残念です.

Reference

この問題について([dg ai school]Webプログラミング26), 我々は、より多くの情報をここで見つけました https://velog.io/@chaehwan_lee/dgaischool-web-26

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

Collection and Share based on the CC Protocol

リッチテキストエディタを角アプリに加える方法

findone関数に注意してください