221015~221016 클론코딩 - 학원 홈페이지 만들기

처음부터 끝까지 기존에 작성한 코드를 복사 붙여넣기 하지않고, 학원 홈페이지를 만들어 봤다.

아직 큰 효과를 주는 방법을 배우지 않아서 화려하게 움직이고 이런 동작은 없지만,
레이아웃을 짜는 방법이나, 이미지를 넣는 방법, 배치하는 방법, 등 배운 것을 기반으로 한 기본적인 사이트를 만들어 볼 수 있었다.

내가 주말동안 만들어보면서 '어떻게 하면 이 코드들을 더 짧고 간결하게 쓸 수 있을까?' 를 고민을 많이 하게 됐다.

CSS에서 선택자를 이용해서 내가 원하는 블록의 경로를 가는 것 조차 너무 작성 내용이 길어져서 조금 간결하게 쓰고 싶다는 생각이 들었다.

코드

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link href="./public/css/exam.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        <div id="wrap">
            <!-- start header -->
            <div id="header_wrap">
                <div id="header" class="container">
                    <h1>
                        <a href="#">
                            <img src="http://www.kiweb.or.kr/images/main_new/logo_new_2018.png" />
                        </a>
                    </h1>
                    <div class="gnb">
                        <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>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- end header -->

            <!-- start visual -->
            <div id="visual_wrap">
                <div id="visual">
                    <img src= "http://www.kiweb.or.kr/nBoard/upload/file/main/1661838462_26399_1.png" />
                </div>
            </div>
            <!-- end visual -->

            <!-- start contents -->
            <div id="contents_wrap">
                <div id="contents" class="container">
                    <div id="left">
                        <ul id="lecture">
                            <li class="con1">
                                <h2>
                                    <span>Game Architecture</span>
                                    게임 기획
                                </h2>
                                <p>
                                    게임기획자를 위한 정석 class
                                </p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con2">
                                <h2>
                                <span>Game Promramming</span>
                                게임 프로그래밍
                                </h2>
                                <p>
                                게임프로그래밍을 위한 정석 Class
                                </p>
                                <a href="#">바로가기</a></li>
                            <li class="con3">
                                <h2>
                                    <span>Game Artworks</span>
                                    게임 원화
                                </h2>
                                <p>
                                    게임 원화를 위한 정석 class
                                </p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con4">
                                <h2>
                                    <span>Progamer Coaching</span>
                                    프로게이머 코칭
                                </h2>
                                <p>
                                    프로게이머 데뷔 class
                                </p>
                                <a href="#">바로가기</a>
                            </li>
                            <li class="con5">
                                <h2>
                                    <span>AR/VR</span>
                                    AR/VR
                                </h2>
                                <p>
                                    증강현실/가상현실 class
                                </p>
                                <a href="#">바로가기</a>
                            </li>
                            <li  class="con6">
                                <h2>
                                    <span>Block Chain</span>
                                    블록체인
                                </h2>
                                <p>
                                    블록체인 class
                                </p>
                                <a href="#">바로가기</a>
                            </li>
                            <li>
                                <h3>
                                    공지사항
                                </h3>
                                    <dl>
                                        <dt >블록체인 8기 모집 임박!</dt>
                                        <dd>09-15</dd>
                                        <dt>게임프로그래밍 37기 모집</dt>
                                        <dd >09-15</dd>
                                        <dt>게임프로그래밍 36기 모집</dt>
                                        <dd>08-30</dd>
                                        <dt id="dl.stly">블록체인 7기 모집 마감</dt>
                                        <dd>08-30</dd>
                                    </dl>
                            </li>
                            <li>
                                <h3>상담/문의</h3>
                                <p>
                                    <img src="	http://www.kiweb.or.kr/images/main_new/customer_tel.png">
                                </p>
                                <p>
                                    <img src="http://www.kiweb.or.kr/images/main_new/customer_kakao.png">
                                </p>
                                <button>
                                    <img src="http://www.kiweb.or.kr/images/main_new/customer_kakao_btn.png">
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div id="right">
                        <div id="top">
                            <div id="first">
                                <h3>취업자인터뷰</h3>
                                <p>
                                    <!-- <img src="http://www.kiweb.or.kr/nBoard/upload/file/interview//1662364873_58233_2.png"> -->
                                </p>
                            </div>
                            <div id="second">
                                <h3>수강후기</h3>
                                <ul>
                                    <li>
                                        <a href="#">백번 천번 추천드립니다.</a>
                                        <p>[플밍 35기 박지용] 2022-09-01</p>
                                    </li>
                                    <li>
                                        <a href="#">10개월 간의 과정을 마치며</a>
                                        <p>[블록3기 박해민] 2022-08-30</p>
                                    </li>
                                    <li>
                                        <a href="#">30대 후반에 블록체인 교육에 참여하다.</a>
                                        <p>[블록 3기 박성근] 2022-08-23</p>
                                    </li>
                                    <li>
                                        <a href="#">비전공자인 저도 했습니다. 모두 취업하세요!</a>
                                        <p>[플밍35기 이지우] 2022-08-23</p>
                                    </li>
                                    <li>
                                        <a href="#">처음엔 걱정했지만 많이 배웠고 취업까지했어요.</a>
                                        <p>[플밍35기 권기석] 2022-08-23</p>
                                    </li>
                                    <li>
                                        <a href="#">6개월이라는 짧지만 긴 시간이 아깝지 않았어요.</a>
                                        <p>[플밍35기 최윤화] 2022-08-23</p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div id="media">
                            <h3>미디어센터</h3>
                            <iframe width="560" height="425" src="https://www.youtube.com/embed/ZIAuAWALOKc" title="경일게임아카데미 | Kyungil Game Academy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                        </div>
                </div>
            </div>
            <!-- end contents -->
            <div id="clip_wrap">
                <div id="clip" class="container">
                    <ul id="a1" class="a2">
                        <li>
                            <h2>
                            <span>K.I Story</span>
                            경일이야기
                            </h2>
                        </li>
                        <li>
                            <a href="#">
                                <img src="http://www.kiweb.or.kr/nBoard/upload/file/kistory//1661914721_76966_1.png">
                            </a> 
                            <a href="#" class="text">블록체인 2기 프로젝트 발표회 ψ(｀∇´)ψ</a>
                        </li>
                        <p class="a1_list">
                            <a href="#" class="text2">-우수훈련기관</a>
                            <a href="#" class="text2">-함꼐하는 교육</a>
                            <a href="#" class="text2">-취업솔루션</a>
                        </p>
                    </ul>
                    <ul id="a1" class="a1">
                        <li>
                            <h2>
                            <span>useful information</span>
                            유용정보
                            </h2>
                        </li>
                        <li>
                            <a href="#">
                                <img src="http://www.kiweb.or.kr/nBoard/upload/file/reporter//1661915868_65746_1.png">
                            </a> 
                            <a href="#" class="text">Blockchain이란?</a>
                        </li>
                        <p class="a1_list">
                            <a href="#" class="text2">-【경일게임아카데미 생활관 소개】</a>
                            <a href="#" class="text2">-직장인 필수 지식, 개발자 용어 모음집</a>
                            <a href="#" class="text2">-멀티 디바이스 메타버스 플랫폼 개발·기획자 1기 훈련생 모집</a>
                        </p>
                    </ul>
                    <ul id="a1" class="a3">
                        <li>
                            <h2>
                            <span>Column</span>
                            교수칼럼
                            </h2>
                        </li>
                        <li>
                            <a href="#">
                                <img src="http://www.kiweb.or.kr/nBoard/upload/file/professor//1595562552_11880_1.jpg">
                            </a> 
                            <a href="#" class="text">멘토링별 학생 유형과 개발자의 자세</a>
                        </li>
                        <p class="a1_list">
                            <a href="#" class="text2">-프리 부트캠프 ≪공간 기반의 게임/어트랙션/메타버스/콘...</a>
                            <a href="#" class="text2">-왜 블록체인인가?</a>
                            <a href="#" class="text2">-"학생이 미래다" 게임원화 이진호교수님 인터뷰</a>
                        </p>
                    </ul>
                </div>
            </div>
            <!-- stat footer -->
            <div id="footer_wrap">
                <div id="footer" class="container">
                    <div id="footer_menu">
                        <ul>
                            <li><a href = "#">학교소개</a></li>
                            <li><p>|</p></li>
                            <li><a href = "#">교육과정</a></li>
                            <li><p>|</p></li>
                            <li><a href = "#">공지사항</a></li>
                            <li><p>|</p></li>
                            <li><a href = "#">상담신청</a></li>
                            <li><p>|</p></li>
                            <li><a href = "#">개인정보처리방침</a></li>
                        </ul>
                    </div>
                    <h1 id="logo">
                        <img src="http://www.kiweb.or.kr/images/main_new/logo_bottom_2018.png">
                        <dl>
                            <p>서울특별시 강동구 천호대로 995 금복빌딩 3,4층 경일게임아카데미(지하철 5,8호선 1번출구 10m이내)</p>
                            <p>TEL : 02-479-4050 FAX : 02-479-4056 대표자 : 박병준 개인정보관리책임자 : 서혁준</p>
                            <p>사업자번호 : 212-81-89247 통신판매허가번호 : 제2020-서울강동-1360호</p>
                            <p class="copyright">Copyright © 2016. Kyungil Technical College. All rights reserved.</p>
                        </dl>
                    </h1>
                </div>
            </div>
            <!-- end footer -->
        </div>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
ul, li{
    list-style: none;
}
.text {
    display: block;
    text-align: center;
    text-decoration: none;
    margin: 10px 0 0 0;
    color: #666;
    font-size: 12px;
}
.text2{
    font-size: 12px;
    margin: 5px;
    display: block;
    color: #666;
    text-decoration: none;
    padding: 10px 0 0 0;
    box-sizing: border-box;
}
.container{
    width:1200px;
    margin: 0 auto;
}

#wrap {
    width: 100%;
}
#header_wrap{
    width: 100;
}
#header {
    height: 100px;
    padding : 20px 0 0 0 ;
    box-sizing: border-box;
}
#header > h1 {
    float: left;
}
#header > .gnb{
    float: right;
    padding: 20px 0 0 0;
    box-sizing: border-box;
}
.gnb > ul > li {
    float: left;
}
.gnb > ul > li > a {
    display: inline-block;
    width: 180px;
    text-align: center;
    color: #004385;
    font-size: 18px;
    text-decoration: none; 
    font-weight: bold;
}
#visual_wrap{
    width: 100%;
    height: 500px;
}
#visual{
    width: 1920px;
    margin: 0 auto;
}
#visual_wrap > img{
    margin: 0 auto;
}

#contents_wrap{
    width: 100%;
    margin : 20px 0 0 0;

}
#contents{
    height: 920px;
}
#contents > #left {
    float: left;
    width: 600px;
}
#lecture > li{
    float: left;
    width: 300px;
    height: 230px;
    padding: 20px;
    box-sizing: border-box;
    
}
#lecture > li > h2{
    font-size: 23px;
    color : #2d2d2d;
}
#lecture > li > h3{
    font-size: 19px;
}
#lecture > li > h2 > span {
    display: block;
    font-size: 12px;
    color: #4689e1;
}
#lecture > li > p {
    margin: 30px 0 0 0;
    width: 50%;
    font-size: 12px;
    color: #666;
}
#lecture > li > a {
    display: inline-block;
    height: 30px;
    width: 100px;
    font-size: 14px;
    text-align: center;
    margin: 40px 0 0 0;
    background: #81b4f2;
    color : white;
    border-radius: 15px;
    padding: 8px 0 0 0;
    box-sizing: border-box;
    text-decoration: none;
}
#lecture > li > dl {
    margin: 30px 0 0 0;
    width: 260px;
    height: 80px;
}
#lecture > li > dl >dt {
    display: inline-block;
    font-size: 12px;
    width: 200px;
    margin :10px 0 ;
}
#lecture > li > dl >dd {
    display: inline-block;
    width: 50px;
    font-size: 12px;
}
#lecture > li > button {
    margin: 0 0 0 65px;
    border: 0px ;
}
#contents > #right {
    float: left;
    width: 600px;
}
#right >#top > #first {
    float: left;
    height: 415px;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
}
#right >#top > #first > p {
    height: 320px;
    margin: 30px 0 0 0 ;
    background: url(http://www.kiweb.or.kr/nBoard/upload/file/interview//1662364873_58233_2.png) no-repeat;
    background-size: 260px 320px;
}
#right >#top > #second {
    float: left;
    height: 415px;
    width: 300px;
    padding: 20px;
    box-sizing: border-box;
    background: rgb(250, 250, 250);
}
#second >ul{
    margin: 30px 0 0 0;
}
#second >ul >li {
    background: rgba(255, 255, 255, 0.834);
    margin: 5px 0 0 0;
    border: 1px solid rgb(240, 240, 240);
}
#second >ul > li > a{
    padding: 5px;
    font-size: 12px;
    text-decoration: none;
    color: #666;
    box-sizing: border-box;
} 
#second >ul > li > p{
    padding: 5px;
    text-align: right;
    font-size: 12px;
    color:#666;
    box-sizing: border-box;
} 
#right > #media { 
    clear: both;
    height: 505px;
    padding: 20px;
    box-sizing: border-box;
    background: rgb(250, 250,250);
}
#media > h3 {
    margin: 0 0 20px 0;
}

#clip_wrap{
    width: 100%;
    margin: 20px 0 ;
}
#clip {
    height: 430px;
}
#clip > ul {
    float: left;
    width: 390px;
    height: 430px;
    padding: 20px;
    box-sizing: border-box;
}
.a1_list {
    margin: 30px 0 0 0 ;
}
#clip > #a1 >li > h2{
    font-size: 23px;
    color : #2d2d2d;
    margin: 0 0 20px 0;
}
#clip > #a1 >li > h2> span {
    display: block;
    font-size: 12px;
    color: #4689e1;
}
#clip >#a1 > li > dl > dt {
    width: 350px ;
    height: 200px;
}

#clip > #a2 {
    background: yellow;
    margin: 0 15px 0 15px;
}
#footer_wrap{
    width: 100%;
    background: #323232;
}
#footer{
    height: 200px;
}
#footer_menu > ul {
    display: block;
    height: 32px;
    padding: 20px 0 ;
    box-sizing: border-box;
}
#footer_menu > ul > li {
    float: left;
    margin: 0 10px;
    font-size: 12px;
    color: #aeaeae;
}
#footer_menu > ul > li > a{
    display: inline-block;
    color: #aeaeae;
    text-decoration: none;
}
#footer_menu > ul > li > p {
    display: inline-block;
    color: #aeaeae;
}
#footer > #logo {
    display: inline-block;
    padding: 30px 0 0 0;
    box-sizing: border-box;
}
#footer > #logo > dl {
    padding: 0 0 0 50px;
    box-sizing: border-box;
    float: right;
}
#footer > #logo > dl > p {
    padding: 0 0 5px 0;
    font-size: 12px;
    color: #aeaeae;
    box-sizing: border-box;
}



.con1 {
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_01.png") 180px 110px no-repeat; 
}
.con2{
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_02.png") 180px 110px no-repeat;
}
.con3{
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_04.png") 180px 110px no-repeat;
}
.con4{
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_05.png") 180px 110px no-repeat;
}
.con5{
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_07.jpg") 180px 110px no-repeat;
}
.con6{
    background: url("http://www.kiweb.or.kr/images/main_new/main_con_ic_06.jpg") 180px 110px no-repeat;

}
.a1{
    margin: 0 15px 0 15px;
    background: url("http://www.kiweb.or.kr/images/main_new/main_bbs_ic_02.png") 300px 15px no-repeat;
}
.a2{
    background: url("http://www.kiweb.or.kr/images/main_new/main_bbs_ic_01.png") 300px 15px no-repeat;
}
.a3{
    background: url("http://www.kiweb.or.kr/images/main_new/main_bbs_ic_03.png") 300px 15px no-repeat;
}
.copyright{
    margin: 10px 0 0 0;
}

'시작 > TIL(Today I Learned)' 카테고리의 다른 글

221020 브라우저와 HTML (0)	2022.10.20
221017 페어코딩 (0)	2022.10.17
221014 HTML,CSS 클론코딩 (0)	2022.10.14
221013 CSS (0)	2022.10.13
221012 CSS (0)	2022.10.12

BAEK'space

221015~221016 클론코딩 - 학원 홈페이지 만들기

'시작 > TIL(Today I Learned)' 카테고리의 다른 글

댓글

티스토리툴바

221015~221016 클론코딩 - 학원 홈페이지 만들기

'시작 > TIL(Today I Learned)' 카테고리의 다른 글

관련글

댓글

티스토리툴바