[dg_ai_school] 웹프로그래밍 20

이채환·2021년 7월 23일
WebProgramming대구AI스쿨
0

webprogramming

목록 보기
20/51

학습내용

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

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

    <header id="webtoon-header">
        <div class="webtoon-container">
            <div class="webtoon-header-top">
                <div class="webtoon-header-left">
                    <h2>만화</h2>
                    <h3>웹소설</h3>

                    <div class="webtoon-header-input-wrap">

                        <input type="text">
                        <button type="button" class="btn-search"></button>
                    </div>
                </div>

                <div class="webtoon-header-right">
                    <a href='#' class="btn-login">로그인</a>
                    <button type="button" class="btn-menu"></button>
                </div>
            </div>
            
            <div class="webtoon-header-nav">
                <nav>
                    <ul>
                        <li><a href="webtoon.html">홈</a></li>
                        <li><a href="webtoon-detail.html">웹툰</a></li>
                        <li><a href="#">베스트 도전</a></li>
                        <li><a href="#">도전만화</a></li>

                    </ul>

                </nav>

                <div class="webtoon-header-link-wrap">
                    <i class="icon-ex-mark"></i>
                    <a href="#">온천마을 판타지 로맨스 <모락모락 왕세자님></a>
                </div>

            </div>
        </div>
    </header>

	<main role="main" id="webtoon-main">

		<div class="webtoon-container">

			<div class="webtoon-main-left">
				<div class="webtoon-carousel webtoon-border">
					<div class="webtoon-carousel-left">
						<h2>
						오늘의<br><span>웹툰</span></h2>
						<p>7월 23일 금요일</p>
						<ul>
							<li class="on"><a href="#">인기순</a></li>
							<li><a href="#">업데이트순</a></li>
							<li><a href="#">조회순</a></li>
							<li><a href="#">별점순</a></li>
						</ul>
					</div>

					<div class="webtoon-carousel-right">
						<div class="webtoon-carousel-banner">
							<img src="https://via.placeholder.com/582x195">
						</div>

						<div class="webtoon-carousel-banner-nav">
							<ul>
								<li><img src="https://via.placeholder.com/135x57"></li>
								<li><img src="https://via.placeholder.com/135x57"></li>
								<li><img src="https://via.placeholder.com/135x57"></li>
								<li><img src="https://via.placeholder.com/135x57"></li>
							</ul>

							<a href="#" class="btn btn-prev"></a>
							<a href="#" class="btn btn-next"></a>
						</div>
					</div>
				</div>

				<div class="webtoon-banner">
				</div>

				<div class="webtoon-content">
					<div class="webtoon-content-header webtoon-content-header-recommend">
						<h2>장르별 <span>추천웹툰</span></h2>

						<nav>
							<ul>
								<li class="on"><a href="#">에피소드</a></li>
								<li><a href="#">옴니버스</a></li>
								<li><a href="#">스토리</a></li>
							</ul>
						</nav>
					</div>

					<div class="webtoon-content-body">
						<nav>
							<ul>
								<li><a href="#">인기순</a></li>
								<li><a href="#">업데이트순</a></li>
								<li><a href="#">조회순</a></li>
								<li><a href="#">별점순</a></li>
							</ul>
						</nav>

						<ul class="webtoon-content-col-3">
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
							<li class="webtoon-content-col-type-1">
								<img src="https://via.placeholder.com/210x120">
								<div class="webtoon-content-col-3-info">
									<h4>오늘의 순정망화</h4>
									<p>시즌2 178화</p>
									<span>손하기</span>
								</div>
							</li>
						</ul>
					</div>
				</div>

				<div class="webtoon-content">
					<div class="webtoon-content-header">
						<h2>베스트도전&도전 <span>추천웹툰</span></h2>
					</div>

					<div class="webtoon-content-body">
			
							<ul class="webtoon-content-col-3">
								<li class="webtoon-content-col-type-2">
									<h3>에피소드</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
								<li class="webtoon-content-col-type-2">
									<h3>옴니버스</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
								<li class="webtoon-content-col-type-2">
									<h3>스토리</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
							</ul>
					</div>
				</div>

				<div class="webtoon-content">
					<div class="webtoon-content-header">
						<h2>장르별 <span>인기 단행본만화</span></h2>
					</div>

					<div class="webtoon-content-body">
			
							<ul class="webtoon-content-col-3">
								<li class="webtoon-content-col-type-2">
									<h3>순정</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
								<li class="webtoon-content-col-type-2">
									<h3>소년</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
								<li class="webtoon-content-col-type-2">
									<h3>무협</h3>

									<ul class="webtoon-lists">
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
										<li class="webtoon-lists">
											<img src="https://via.placeholder.com/83x90">
											<div class="webtoon-content-col-info-right">
												<h4>돈벌다 만난사이</h4>
												<p>twinee2018</p>
												<span>돈벌다 만난 덕후들</span>

												<div class="webtoon-content-rating">
													<div class="star"></div>
													<span class="score">9.89</span>
												</div>
											</div>
										</li>
									</ul>
								</li>
							</ul>
					</div>

				</div>

			</div>	

			<div class="webtoon-main-right">
			</div>

		</div>
		
	</main>

</body>
</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="webtoon-header">
        <div class="webtoon-container">
            <div class="webtoon-header-top">
                <div class="webtoon-header-left">
                    <h2>만화</h2>
                    <h3>웹소설</h3>

                    <div class="webtoon-header-input-wrap">

                        <input type="text">
                        <button type="button" class="btn-search"></button>
                    </div>
                </div>

                <div class="webtoon-header-right">
                    <a href='#' class="btn-login">로그인</a>
                    <button type="button" class="btn-menu"></button>
                </div>
            </div>
            
            <div class="webtoon-header-nav">
                <nav>
                    <ul>
                        <li><a href="webtoon.html">홈</a></li>
                        <li><a href="webtoon-detail.html">웹툰</a></li>
                        <li><a href="#">베스트 도전</a></li>
                        <li><a href="#">도전만화</a></li>

                    </ul>

                </nav>

                <div class="webtoon-header-link-wrap">
                    <i class="icon-ex-mark"></i>
                    <a href="#">온천마을 판타지 로맨스 <모락모락 왕세자님></a>
                </div>

            </div>
        </div>
    </header>
    
    <main role="main" id="webtoon-main">

        <nav>
            <div class="webtoon-container">
                <ul>
                    <li><a href="#">요일별</a></li>
                    <li><a href="#">장르별</a></li>
                    <li><a href="#">작품별</a></li>
                    <li><a href="#">연도별</a></li>
                    <li><a href="#">테마웹툰</a></li>
                    <li><a href="#">완결웹툰</a></li>                    
                </ul>
            </div>
        </nav>

        <div class="webtoon-container">

            <div class="webtoon-main-left">

            </div>

            <div class="webtoon-main-right">

            </div>
        </div>
    </main>

    
</body>
</html>

CSS
(한 파일에 계속 작성하면 코드가 너무 길어지므로 따로 만드는 것 추천)

/* 웹툰 페이지 */

.webtoon-border {
    border: solid 1px #ced2d7;
}

.webtoon-container {
    width: 960px;
    margin: 0 auto;
}

#webtoon-header {
    background-color: #ffffff;
}

#webtoon-header .webtoon-header-top {
    background-color: #ffffff;
    border-bottom: solid 1px #f2f2f2;

    padding: 10px 0 8px 0;
}

#webtoon-header .webtoon-header-top .webtoon-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#webtoon-header .webtoon-header-top .webtoon-header-left {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 550px;
}

#webtoon-header .webtoon-header-top .webtoon-header-left h2 {
	font-size: 20px;
}

#webtoon-header .webtoon-header-top .webtoon-header-left .bar {
	width: 1px;
	height: 13px;
	background-color: #d2d2d2;

	margin-left: 8px;
	margin-right: 10px;
}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 {
	margin-right: 30px;

	font-size: 16px;
}

#webtoon-header .webtoon-header-top .webtoon-header-left h3 a {
	color: gray;
}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 315px;
	height: 37px;
	border: solid 1px #e5e5e5;
}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input {
	width: calc(100% - 35px);
	height: 100%;
	border: none;

	padding: 0 10px;
}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap input:focus {
	outline: none;
}

#webtoon-header .webtoon-header-top .webtoon-header-input-wrap .btn-search {
	width: 35px;
	height: 100%;
	background-color: #00d564;
}

#webtoon-header .webtoon-header-top .webtoon-header-right {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

#webtoon-header .webtoon-header-top .webtoon-header-right .btn-login {	
	border: solid 1px #000000;

	padding: 2px 4px;
	margin-right: 20px;

	font-size: 12px;
}

#webtoon-header .webtoon-header-top .webtoon-header-right .btn-menu {
	width: 16px;
	height: 16px;
	background-color: blue;
}

#webtoon-header .webtoon-header-nav .webtoon-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#webtoon-header .webtoon-header-nav {
	border: solid 1px #e5e5e5;
}

#webtoon-header .webtoon-header-nav nav {

}

#webtoon-header .webtoon-header-nav nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#webtoon-header .webtoon-header-nav nav ul li {
	width: auto;
	height: 40px;
}

#webtoon-header .webtoon-header-nav nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 15px;

	line-height: 40px;

	font-size: 14px;
	font-weight: bold;
}

#webtoon-header .webtoon-header-nav nav ul li.on a {
	background-color: #00d564;
	color: #ffffff;
}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap .icon-ex-mark {
	display: inline-block;
	width: 16px;
	height: 14px;

	background-color: #000000;
	border-radius: 50%;
	vertical-align: middle;
}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a {
	vertical-align: middle;
	font-size: 12px;
	color: #606060;
}

#webtoon-header .webtoon-header-nav .webtoon-header-link-wrap a:hover {
	text-decoration: underline;
}


/* 메인 왼쪽 영역 1 */
#webtoon-main .webtoon-container {
	overflow: hidden;  
}

#webtoon-main .webtoon-main-left {
	float: left;
	width: 694px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel {
	overflow: hidden;
	width: 694px;
	height: 252px;
	background-color: #ffffff;

	margin-bottom: 20px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-left {
	float: left;
	width: 112px;
	padding: 20px 5px 0 15px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left h2 {
	font-size: 25px;
	margin-bottom: 13px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left span {
	color: #00d564;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left p {
	font-size: 12px;
	color: #808285;
} 

#webtoon-main .webtoon-main-left .webtoon-carousel-left ul {
	margin-top: 48px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li {
	font-size: 12px;
	margin-bottom: 10px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li.on a {
	color: #00d564;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-left li:last-child {
	margin-bottom: initial;
}

#webtoon-main .webtoon-main-left .webtoon-carousel .webtoon-carousel-right {
	float: right;
	width: calc(100% - 112px);
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner {
	width: 582px;
	height: 195px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner img {
	width: 100%;
	height: 100%;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav {
	position: relative;	
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	width: 540px;
	margin: 0 auto;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li {
	width: 135px;
	height: 57px;
	border-left: solid 1px #e5e5e5;
	border-right: solid 1px #e5e5e5;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:first-child {
	border-left: none;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li:last-child {
	border-right: none;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav ul li img {
	width: 100%;
	height: 100%;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn {
	position: absolute;
	width: 20px;
	height: 57px;
}

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-prev {
	left: 0;
	top: 0; 
	background-color: pink;
 }

#webtoon-main .webtoon-main-left .webtoon-carousel-banner-nav .btn.btn-next {
	right: 0;
	top: 0; 
	background-color: blue;
}


#webtoon-main .webtoon-main-left .webtoon-banner {
	width: 100%;
	height: 80px;
	background-color: black;
}

#webtoon-main .webtoon-main-left .webtoon-content {
	background-color: #ffffff;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header {
	position: relative;
	border-bottom: solid 1px #e5e5e5;
	padding: 26px 0 10px; /* top, right/left, bottom */	
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header.webtoon-content-header-recommend {
	padding-bottom: 0;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 {
	font-size: 20px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header h2 span {
	color: #00d564;
}


#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header nav {
	margin-top: 20px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li {
	width: auto;
	height: 22px;
	margin-right: 15px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li.on {
	border-bottom: solid 2px #00d564;
	margin-bottom: -1px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-header li a {
	display: block;
	padding-bottom: 6px;

	font-size: 13px;
	color: #737373;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav {
	padding: 12px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li {
	margin-right: 8px;
	font-size: 12px;
}

#webtoon-main .webtoon-main-left .webtoon-content .webtoon-content-body nav ul li a {
	color: gray;
}
#webtoon-main .webtoon-main-left .webtoon-content-col-3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-3 .webtoon-content-col-type-1 {
	width: 210px;
	height: 196px;
	font-size: 12px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 img {
	margin-bottom: 10px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info h4 {
	margin-bottom: 5px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info p {
	margin-bottom: 5px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-1 .webtoon-content-col-3-info span {
	color: gray;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 {
	width: 210px;
	font-size: 12px;

	margin-top: 14px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 h3 {
	font-size: 14px;
	color: gray;
	margin-bottom: 10px;

}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 .webtoon-lists li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 90px;

	margin-bottom: 20px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-type-2 .webtoon-lists li img {
	margin-right: 10px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating {
	margin-top: 15px;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating .star {	
	display: inline-block;

	width: 60px;
	height: 14px;
	background-color: red;

	vertical-align: middle;
}

#webtoon-main .webtoon-main-left .webtoon-content-col-info-right .webtoon-content-rating .score {
	font-size: 12px;
	color: gray;
}

#webtoon-main .webtoon-main-right {
	float: right;

	width: 240px;
	height: 2000px;
	background-color: blue;
}

어려운점

  • 각종 태그를 잘 사용하다가 앞 부분의 기초에 관한 개념을 살짝 이야기 하면 생각이 잘 안나서 어려웠음

  • 강의는 CSS 스타일 부분을 한 파일로 계속 만들다 보니 코드가 너무 길어져서 수정이 필요할 때 어디를 봐야하는지 헷갈림

  • 간단한 듯 간단하지 않아 디테일한 부분에서 실수가 많이 발생함

해결방법

  • 뻔한 이야기지만 복습말고는 답이 없음

  • 실습을 하면서 코드를 같이 작성하는 것보다 코드를 먼저 작성해놓고 보고 듣는게 효율적이었음(실시간으로 같이 작성해서 틀린 부분을 찾을 수가 없으므로 어쩔 수 없음, 아주 어이없는 오타로 오류가 나는 경우 찾는데 오래걸림)

학습소감

  • HTML과 CSS의 사용법은 알겠으나 여전히 HTML의 일정 부분과 각종 태그들간의 연계나 크기에 관한 내용을 들여다보면 혼동이와서 어떻게 해야할지 방향성을 잃은 것 같아 주말동안 더 생각해봐야할 것 같음.
profile
이채환
Please be wonderful but don't be so serious, enjoy this journey with the good people!
이전 포스트

[dg_ai_school] 웹프로그래밍 19

다음 포스트

[dg_ai_school] 웹프로그래밍 21

0개의 댓글

관련 채용 정보