[dg_ai_school] 웹프로그래밍 30

이채환·2021년 8월 6일

webprogramming

목록 보기

30/51

배운내용

HTML

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

    <link rel="sytlesheet" type="text/css" href="css/style.css">
</head>
<body id="game-body">

    <header id="game-header">
        <div class="game-container">

            <nav class="game-flex-between">
                <div class="left game-flex-start">
                    <h1>
                        <a href="#">GAME</a>
                    </h1>

                    <ul class="game-flex-start">
                        
                        <li><a href="#">e스포츠</a></li>
                        <li><a href="#">PC게임</a></li>

                    </ul>
                </div>

                <div class="right game-flex-end">
                    <div class="search-wrap game-flex-start">
                        <input type="text">
                        <button type="button" class="btn-search"></button>
                    </div>

                    <div class="ticket-wrap">
                        <a href="#" class="btn-ticket"></a>
                        <p class="bubble-msg">응모 티켓 받고 꿀템 도전!</p>
                        
                    </div>

                    <a href="#" class="btn-login">로그인</a>

                </div>
            </nav>

            <div class="game-event-wrap">
                <div class="event-wrap one">
                    <div class="event-title-wrap">
                        <span>HOT</span>
                        <h2>
                            디아블로 이모탈<br>
                            알파 테스트 참가 이벤트
                        </h2>
                    </div>
                </div>
                
                <div class="event-wrap two">
                    <div class="event-title-wrap">
                        <span>HOT</span>
                        <h2>
                            디아블로 이모탈<br>
                            알파 테스트 참가 이벤트
                        </h2>
                    </div>
                </div>

                <div class="event-wrap three">
                    <div class="event-title-wrap">
                        <span>HOT</span>
                        <h2>
                            디아블로 이모탈<br>
                            알파 테스트 참가 이벤트
                        </h2>
                    </div>
                </div>

            </div>

        </div>
    </header>

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

        <div class="game-container">

            <div class="left">

                <div class="left-banner game-shadow">
                    <a href="#">
                        <img src="https://via.placeholder.com/900x120">
                    </a>
                </div>

                <div id="game-section-1">

                    <div class="section-title-wrap">
                        <h2 class="font-19">게임 라운지 인기글</h2>

                        <div class="section-btn-wrap">
                            <a href="#" class="active">전체</a>
                            <a href="#">Joined</a>
                        </div>

                        <nav div class="section-middle-nav">
                            <ul>
                                <li><a href="#">공략</a></li>
                                <li><a href="#">커뮤니티</a></li>
                            </ul>
                        </nav>


                        <ol>
                            <li>
                                <a href="#">
                                    <img src="https://via.placeholder.com/38" class="game-thumnail">
                                    <div class="txt-info">
                                        <h3>롤 패치</h3>
                                        <div class="source-wrap">
                                            <span class="game">리그 오브 레전드</span>
                                            <span class="author">이채환</span>
                                            <span class="level">LV8</span>
                                            <span class="rank">3</span>

                                        </div>
                                    </div>
                                    <img src="https://via.placeholder.com/90x50" class="blog-thumbnail">
                                </a>

                            </li>

                        </ol>
                            
                        <a href="#" class="btn-arrow"></a>

                    </div>
                </div>


            </div>









            <div class="right">

            </div>

        </div>

    </main>




</body>


</html>

CSS

/* Game */

.game-container {
    width: 1280px;
    margin: 0 auto;
}

.game-flex-between {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.game-flex-start {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.game-flex-end {
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-end;
}
/* 오른쪽에서 부터 정렬되도록 */

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

.game-shadow {
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
}

.game-p-30 {
    padding: 30px;
}
/* 숫자를 하나 입력시 모든 패딩을 통일, 상하좌우 동일 값 */

.font-17 {
    font-size: 17px;
}

.font-19 {
    font-size: 19px;
}

.font-400 {
    font-weight: 400;
}

#game-body {
    background-color: #f8f9fd;
}

/* 상단 해더 영역 작업 */
/* 네비게이션 부분 */

#game-header {
    width: 100%;
    background-color: #4e41db;
}

#game-header nav {
    height: 60px;
}

#game-header nav .left {
    
}

#game-header nav .left h1 {
    font-size: 20px;
}

#game-header nav .left h1 a {
    color: #ffffff;
}

#game-header nav .left ul {
    
}

#game-header nav .left ul li {
    
}

#game-header nav .left ul li a {
    color: #9da5b6;
    font-size: 18px;
}

#game-header nav .left ul li a::before {
    display: inline-block;
    content: '';
    width: 1px;
    height: 14px;
    border-radius: .5px;
    background-color: #9da5b6;

    margin: 0 12px;
}

#game-header nav .right {
    
}

#game-header nav .right .search-wrap {
    overflow: hidden;
    width: 300px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, .28);
}

#game-header nav .right .search-wrap input {
    width: calc(100% - 38px);
    height: 38px;
    background-color: transparent;
    padding: 10px 12px 9px 14px;
    border: none;

    color: #ffffff;
    font-size: 15px;
}

#game-header nav .right .search-wrap input:focus {
    outline: none;
}

#game-header nav .right .search-wrap button {
    width: 38px;
    height: 38px;
    background-color: transparent;
    border: none;
}

#game-header nav .right .ticket-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    margin-left: 10px;
}

#game-header nav .right .ticket-wrap .btn-ticket {
    display: block;
    width: 40px;
    height: 40px;
    border: solid 1px #ffffff;
}

#game-header nav .right .ticket-wrap .bubble-msg {
    position: absolute;
    width: 165px;
    background-color: #697183;
    border-radius: 8px;

    padding: 10px 12px;
    top: 50px;
    left: 50%;
    transform: translate(-50%);

    font-size: 14px;
    color: #ffffff;
    font-weight: 600;

    z-index: 100;
}

#game-header nav .right .btn-login {
    width: 60px
    border: solid 1px hsla(0, 0%, 80%, .3);
    border-radius: 8px;

    padding: 7px 0 6px;
    margin-left: 10px;

    font-size: 12px;
    color: #ffffff;
    text-align: center;
}

#game-header .game-events-wrap {
    padding: 80px 0;
}

#game-header .game-events-wrap .event-wrap {
    position: relative;
    width: 407px;
    height: 264px;
    border-radius: 40px;

    top: 0;
    transition: top linear 0.45s;
}

#game-header .game-events-wrap .event-wrap:hover {
    top: -20px;
}

#game-header .game-events-wrap .event-wrap.one {
    background-color: rgb(112, 104, 236);
}

#game-header .game-events-wrap .event-wrap.two {
    background-color: rgb(69, 39, 39);
}

#game-header .game-events-wrap .event-wrap.three {
    background-color: rgb(112, 117, 181);
}

#game-header .game-events-wrap .event-wrap .event-title-wrap {
    position: absolute;

    left: 30px;
    bottom: 30px;

    color: #ffffff;
}

#game-header .game-events-wrap .event-wrap .event-title-wrap span {
    display: block;
    width: 30px;
    border: solid 2px #ffffff;
    border-radius: 10px;

    padding: 4px 8px;

    font-size: 12px;
    font-weight: 600;

    text-align: center;

    margin-bottom: 15px;
}

#game-header .game-events-wrap .event-wrap .event-title-wrap h2 {
    font-size: 20px;
}

#game-main .game-container {
    align-items: stretch;
}

#game-main .left {
    /* float: left; */

    width: 900px;
    height: 2000px;
    background-color: yellow;
}

#game-main .left .left-banner {
    overflow: hidden; /* 볼더 레이우스가 적용된 범위 벗어나면 모두 히든 처리(그래야 둥글게 나옴) */
    width: 900px;
    height: 120px;
    border-radius: 12px;
    /* box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%); 위쪽 게임 쉐도우와 값이 같아서 삭제*/ 

    margin-bottom: 24px;
}

#game-main .left .left-banner a {
    display: block;
    width: 100%;
    height: 100%;
}

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

/* 특정 섹션 클래스를 기준으로 초기화 작업진행 가능 */
.game-section {
    position: relative;

    background-color: #ffffff;
    box-shadow: 0 2px 30px 0 rgb(0 0 0 / 6%);
    border-radius: 12px;

    padding: 27px 30px 40px;
}

.game-section .section-title-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.game-section .section-title-wrap h2 {
    font-size: 19px;
    font-weight: 400;
}

.game-section .section-middle-nav {

}

.game-section .section-middle-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.game-section .section-middle-nav li {
    
}

.game-section .section-middle-nav a {
    display: block;
    padding: 14px;
    border-bottom: solid 3px transparent;
}

.game-section .section-middle-nav a.active {
    border-bottom: solid 3px #7776ff;
}


#game-section-1 {

}

#game-section-1 .section-btn-wrap {
    
}

#game-section-1 .sectino-btn-wrap a {
    font-size: 14px;
    color: #9da5b6
    font-weight: 700;
}

#game-section-1 .section-btn-wrap a a.active {
    color: #7776ff
}

#game-section-1 .section-btn-wrap a:last-child {
    margin-left: 14px;
}

#game-main .right {
    width: 358px;
    height: 2000px;
    background-color: grey;
}

어려운점

html과 css의 연동에서 태그의 갯수와 코드의 길이가 길어지고 비슷한 내용이 있다보니 어느 파일 이었는지 햇갈릴 때가 있어 혼동이 옴.

해결방법

위쪽 태그 부분에서 이미 꾸며진 것은 그것을 포함하는 안쪽에 있는 부분에 영향을 준다는 것에 대한 개념을 복습해봄.

학습소감

네이버 카피캣 페이지를 만들면서 왜 그렇게 수치를 만들었고 와 같은 내용 보다 그냥 따라가다보니 큰 틀은 알겠으나 세부적인 내용에 대한 것들이 들을 때는 아는 것 같아도 다시보면 모르겠음. 실습이 중요한 것도 맞지만 반대로 생각해보면 이해없는 실습인 것 같아 불안하기도 함. 그렇다고 해서 손에 먼저 익히는 것이 나쁘다 생각하지 않음. 부족한 부분에 대해서 스스로 생각해보고 채울 것이 무엇이 있나 생각함. 볼륨에 관한 부분은 정말 짜증이나는데 해결방법이 없어서 아쉬움. 다른 사이트의 교육 강의나 유투브를 둘러봐도 볼륨이 저렇게 낮지는 않았는데 왜 그런 것인지 모르겠음.

이채환

Please be wonderful but don't be so serious, enjoy this journey with the good people!

[dg_ai_school] 웹프로그래밍 30

webprogramming

배운내용

어려운점

해결방법

학습소감

[dg_ai_school] 웹프로그래밍 29

[dg_ai_school] 웹프로그래밍 31

0개의 댓글

관련 채용 정보