[dg_ai_school] 웹프로그래밍 35
배운내용
HTML
<div class="right">
<div id="esport-news-view">
<h2>많이 본 뉴스</h2>
<ol>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
<li>
<a href="#" class="esport-flex-between">
<div class="image-wrap">
<img src="https://via.placeholder.com/84x48" alt="news image">
<span class="rank">1</span>
</div>
<h3>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rem repudiandae laudantium aperiam atque ducimus incidunt officiis dignissimos laboriosam sunt voluptatum id consequuntur, inventore commodi iste praesentium temporibus itaque nobis dolor.</h3>
</a>
</li>
</ol>
</div>
<div id="esport-schedule">
<h2>e스포츠 경기 일정/결과</h2>
<div class="schedule-wrap">
<div class="schedule-header esport-flex-between">
<button class="arrow arrow-left"></button>
<span>06.05 토</span>
<button class="arrow arrow-right"></button>
</div>
<div class="schedule-body">
<ul>
<li>
<h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
<div class="status-wrap esport-flex-center">
<span class="status">진행중</span>
<span class="time">10:00</span>
</div>
</li>
<li>
<h3>2021 LCK AS 챔피언십 풀리그 3일차</h3>
<div class="status-wrap esport-flex-center">
<span class="status">진행중</span>
<span class="time">10:00</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS
#esport-main .right {
float: right;
width: 357px;
height: 2000px;
}
#esport-news-view {
padding: 20px;
border: solid 1px gray;
border-radius: 10px;
margin-bottom: 30px;
}
#esport-news-view h2 {
font-size: 18px;
}
#esport-news-view ol {
margin-top: 20px;
}
#esport-news-view li {
margin-bottom: 8px;
}
#esport-news-view li:last-child {
margin-bottom: 0;
}
#esport-news-view li a {
}
#esport-news-view .image-wrap {
overflow: hidden;
position: relative;
width: 84px;
height: 48px;
border: solid 1px rgba(0, 0, 0, 0.04);
border-radius: 4px;
}
#esport-news-view .image-wrap img {
position: absolute;
width: 100%;
height: 100%;
}
#esport-news-view .image-wrap .rank {
position: absolute;
background-color: #4e41db;
border-bottom-right-radius: 4px;
padding: 4px 10px;
top: 0;
left: 0;
font-size: 13px;
color: #fff;
font-weight: 800;
}
#esport-news-view li h3 {
display: -webkit-box;
overflow: hidden;
width: 218px;
max-height: 38px;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
font-size: 14px;
line-height: 19px;
}
#esport-schedule {
}
#esport-schedule h2 {
font-size: 18px;
}
#esport-schedule .schedule-wrap {
margin-top: 15px;
border: solid 1px gray;
border-radius: 10px;
}
#esport-schedule .schedule-wrap .schedule-header {
padding: 10px 15px;
border-bottom: solid 1px gray;
}
#esport-schedule .schedule-wrap .schedule-header .arrow {
width: 20px;
height: 20px;
}
#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-left {
background-color: yellow;
}
#esport-schedule .schedule-wrap .schedule-header .arrow.arrow-right {
background-color: greenyellow;
}
#esport-schedule .schedule-wrap .schedule-header span {
position: relative;
font-size: 18px;
font-weight: 800;
top: 3px;
}
#esport-schedule .schedule-body {
padding: 17px 0;
}
#esport-schedule .schedule-body li {
}
#esport-schedule .schedule-body li:first-child::after {
content: '';
display: block;
width: calc(100%-40px);
height: 1px;
background-color: rgba(0, 0, 0, 0.05);
margin: 17px auto;
}
#esport-schedule .schedule-body li h3 {
font-size: 14px;
margin-bottom: 12px;
text-align: center;
}
#esport-schedule .schedule-body li .status-wrap {
}
#esport-schedule .schedule-body li .status-wrap:hover {
background-color: yellow;
cursor: pointer;
}
#esport-schedule .schedule-body li .status-wrap .status {
background-color: rgba(255, 0, 0, 0.1);
color: red;
font-size: 11px;
font-weight: 500;
border-radius: 3px;
margin-right: 4.5px;
padding: 2px 4px;
}
#esport-schedule .schedule-body li .status-wrap .time {
position: relative;
top: 1px;
font-size: 15px;
font-weight: 700;
}
/*오디오*/
.audio-container {
width: 1080px;
margin: 0 auto;
}
.audio-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.audio-flex-start {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
}
.audio-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
.audio-flex-center {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#audio-header {
position: fixed;
width: 100%;
background-color: white;
border-bottom: 1px solid #efeff4;
left: 0;
top: 0;
z-index: 99999;
}
#audio-header .audio-nav-left {
width: 660px;
}
#audio-header .audio-nav-left .audio-logo {
font-size: 25px;
}
#audio-header .audio-nav-left .audio-logo a {
}
#audio-header .audio-nav-left ul {
padding-top: 10px;
}
#audio-header .audio-nav-left li {
}
#audio-header .audio-nav-left li a {
display: block;
font-size: 17px;
font-weight: 700;
padding: 12px 13px 17px 12px;
}
#audio-header .audio-nav-left li a.active {
font-weight: 700;
}
#audio-header .audio-nav-left li a span {
position: relative;
display: inline-block;
height: 21px;
}
#audio-header .audio-nav-left li a.active span::after {
display: block;
position: absolute;
content: '';
border-bottom: solid 3px #222;
border-radius: 1.5px;
z-index: 1;
left: -4.5px;
right: -5.5px;
bottom: -17px;
}
#audio-header .audio-nav-right {
width: 330px;
}
#audio-header .audio-nav-right .search-wrap {
width: 180px;
height: 40px;
background-color: white;
border: solid 2px rgba(0, 86, 201, 0.2);
border-radius: 4px;
}
#audio-header .audio-nav-right .search-wrap .icon-search {
width: 40px;
height: 100%;
background-color: yellow;
}
#audio-header .audio-nav-right .search-wrap input {
width: calc(100% - 40px);
height: 100%;
padding: 8px 15px;
font-size: 14px;
outline: none;
border: none;
}
#audio-header .audio-nav-right .search-wrap input:focus {
outline: none;
}
#audio-header .audio-nav-right .profile-wrap {
}
#audio-header .audio-nav-right .profile-wrap .profile-img {
width: 32px;
height: 32px;
border-radius: 50%;
}
#audio-header .audio-nav-right .profile-wrap .btn-login {
font-size: 15px;
padding-left: 8px;
}
어려운점
-
position을 활용한 공간 만들기
-
padding 값을 활용한 것들
-
강의 볼륨
해결방법
-
position 과 padding 태그에 대해 다시 복습
-
앞의 강의 복습
학습소감
- 카피캣 수업을 하면서 손으로 익혔던 것을 되집어보면서 동작하는 방법에 대해 좀더 이해할 수 있었음 익숙한 페이지들 이지만 같으면서 동시에 다른 부분을 세팅해나가는 것이 신기함. 선택자와 CSS의 꾸밈을 통해 같으면서도 충분히 다른 느낌을 줄 수 있어 신기함. 영상 강의 볼륨은 정말 너무 힘듦. 아직도 부족하므로 계속 복습해야 한다고 생각함.
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 35), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@chaehwan_lee/dgaischool-web-35
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
position을 활용한 공간 만들기
padding 값을 활용한 것들
강의 볼륨
-
position 과 padding 태그에 대해 다시 복습
-
앞의 강의 복습
학습소감
- 카피캣 수업을 하면서 손으로 익혔던 것을 되집어보면서 동작하는 방법에 대해 좀더 이해할 수 있었음 익숙한 페이지들 이지만 같으면서 동시에 다른 부분을 세팅해나가는 것이 신기함. 선택자와 CSS의 꾸밈을 통해 같으면서도 충분히 다른 느낌을 줄 수 있어 신기함. 영상 강의 볼륨은 정말 너무 힘듦. 아직도 부족하므로 계속 복습해야 한다고 생각함.
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 35), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@chaehwan_lee/dgaischool-web-35
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Author And Source
이 문제에 관하여([dg_ai_school] 웹프로그래밍 35), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@chaehwan_lee/dgaischool-web-35저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)