close
프로필 배경
프로필 로고

BAEK'space

시작/TIL(Today I Learned) · 2022. 10. 14. fullscreen 넓게보기

221014 HTML,CSS 클론코딩

728x90
학원 홈페이지 클론 코딩
오늘 내가 배운 것

클론코딩 : 실제 구현되어 있는 서비스를 직접 내 손으로 구현하는 것

(당연한 것이지만 절대 코드 그대로 긁어오지 말 것!! 어차피 해야 공부된다...)

 

1. 페이지를 만들 때 큰 틀을 먼저 생각한다. (레이아웃)

위에서 아래로, 그다음엔 위 레이아웃부터 좌에서 우로 채워 나가야 편하다.

 

2. 속성 min-height / max height : 최소 높이/최대 높이 설정할 때 사용

 

3. 속성 clear : both; 

float 를 사용한 후 블록이 좌우측에 있을 때 좌측을 먼저 채우는 과정에서 우측에 블럭의 양이 적을 경우 다음 블럭이 우측 블럭 밑으로 채워지는 현상이 있었다. (빈 공간에 블럭이 채워짐) 이를 방지하기 위해 clear : both; 를 사용하면 나뉘었던 블럭과 관계없이 기본 상태로 돌아갈 수 있다.

속성값이 left, right 도 있지만 보통 레이아웃이 짜여 있기 때문에 both 를 사용한다.

 

4. 블럭의 귀퉁이를 둥글게 만들기 위해서

속성 border-radius 을 이용한다. (tip.… 원을 만들기 위해서 블럭의 높이 나누기 2 의 px 만큼 한다)

 

5. background 에서 색이 아닌 이미지를 넣기 위해서 

background: url(“”)  를 사용한다.

url은 이미지의 url 을 사용하고, 배경보다 이미지가 작을 경우 기본적으로 바둑판으로 채워진다. 

바둑판 배열을 안 쓰기 위해서 no-repeat 을  붙여주면 이미지를 1번 넣어준다.

background: url(“”) 20px 20px no-repeat;

블럭의 좌상단에 초기 위치가 잡히며, 띄어쓰기 구분자를 이용하여 좌우, 상하를 이동 시켜 줄 수 있다.

 

6. border: 1px solid #000000 ( 선 그리기 : 굵기, 실선, 색깔)

구분자는 띄어쓰기이며 CSS에서 블럭의 테두리를 설정해준다. 많은 방법이 있겠지만 가장 기본적인 방법.

6-1 border-right, border-bottom 등 원하는 위치만 설정 가능하다.

 

 

 

 

 

오늘의 에러

error 1 : 

visual 과 contents 사이를 벌리기 위해 contents 에 margin 을 사용하니 가운데 정렬해놓은 레이아웃이 풀림.

solution 1 :

contents 와 contents_wrap 에서 contents 에 container class로 margin을 중복으로 사용해서 나오는 문제.. 같은 코드를 중복해서 쓰지 않도록 조심하자.

 

error 2:

visual에서 이미지가 브라우저의 크기보다 작아서 여백이 생기는 경우가 있었다.

solution2 :

visual의 경우 1920px의 이미지를 이용했기 때문에 다른 레이아웃처럼 1200px로 고정하지 않았기 때문에 좌측으로 밀려 보였다.

visual에 이미지 크기만큼 width를 설정해주고, margin : 0 auto;를 이용하여 브라우저 크기에 상관없이 가운데 정렬할 수 있도록 코드를 추가해서 해결할 수 있었다.

 

 

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/index.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 id="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 Programming</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>프로게이머 데뷔</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 class="con7">
                                <h3>
                                    공지사항
                                </h3>
                                <dl>
                                   <dt><a href="#">-블록체인 8기 모집 임박!</a></dt>
                                   <dd>09-15</dd>
                                   <dt><a href="#">-게임프로그래밍 37기 모집</a></dt>
                                   <dd>09-15</dd>
                                   <dt><a href="#">-게임프로그래밍 36기 모집</a></dt>
                                   <dd>08-30</dd>
                                   <dt><a href="#">-블록체인 7기 모집 마감</a></dt>
                                   <dd>08-30</dd>
                                </dl>
                            </li>
                            <li class="con8">
                                <h3>
                                    상담/문의
                                </h2>
                                <div id="call">
                                    <img src="http://www.kiweb.or.kr/images/main_new/customer_tel.png" />
                                </div>
                                <div id="kakao1">
                                    <img src ="http://www.kiweb.or.kr/images/main_new/customer_kakao.png"/>
                                </div>
                                <div id="kakao2">
                                    <img src="http://www.kiweb.or.kr/images/main_new/customer_kakao_btn.png" />
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div id="right">
                        2
                    </div>
                </div>
            </div>
            <!-- end contents -->
            <div id="bbs_wrap">
                <div id="bbs" class="container">
                    <div id="bbs1">1</div>
                    <div id="bbs2">2</div>
                    <div id="bbs3">3</div>
                </div>
            </div>
            <!-- stat footer -->
            <div id="footer_wrap">
                <div id="footer" class="container">

                </div>
            </div>
            <!-- end footer -->
        </div>
    </body>
</html>

 

CSS
*{
    margin: 0;
    padding: 0;
}
ul,li {
    list-style: none;
}
.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;
}
#header > #gnb > ul > li{
    float:left;
}
#header > #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;
}
#contents_wrap{
    width: 100%;
    margin: 30px 0 0 0;
}

#contents > #left{
    float: left;
    width: 600px;
    
} 

#left > #lecture > li {
    float: left;
    width: 300px;
    height: 230px;
    padding: 20px;
    box-sizing: border-box;

}
#lecture > li > h2 {
    font-size: 23px;
    color : #2d2d2d;
}
#lecture > li > h2 > span{
    display: block;
    font-size: 12px;
    color : #4690e1;
}
#lecture > li > p{
    margin :30px 0 0 0;
    width: 50%;
    font-size: 12px;
    color : rgb(102, 102, 102);
}

#lecture > li > a{
    display: inline-block;
    width: 100px;
    height: 30px;
    font-size: 14px;
    margin: 40px 0 0 0 ;
    background: #81b4f2;
    text-decoration: none;
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    padding: 5px 0 0 0 ;
    box-sizing: border-box;
} 
#lecture > .con7 > h3{
    float: left;
    font-size: 19px;
    color:#2d2d2d;
}
#lecture > .con7 > dl {
    display: block;
    padding: 60px 0 0 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #666;
}
#lecture > .con7 > dl >dt {
    float: left;
    width: 180px;
    height: 32px;
    text-align: left;
    text-decoration: none;
    color: #666;
}
#lecture > .con7 > dl >dt > a{
    text-decoration: none;
    color: #666;
}
#lecture > .con7 > dl > dd{
    float: left;
    height: 32px;
    width: 77px;
    text-decoration: none;
    text-align: right;
    color: #666;
}
#lecture > .con8 > #call {
    margin: 40px 0 20px 0 ;
}
#lecture > .con8 > #kakao2 {
    margin: 0 0 0 100px ;
}
#contents> #right{
    float: left;
    width: 600px;
    background: navajowhite;
}

#bbs_wrap{
    clear: both;
    width: 100%;
}

#bbs > #bbs1{
    float: left;
    width: 390px;
    height: 430px;
    background: #004385;
    padding: 20px;
    box-sizing: border-box;
}
#bbs > #bbs2 {
    float: left;
    width: 390px;
    height: 430px;
    margin: 0 15px 0 15px;
    background: #4690e1;
    padding: 20px;
    box-sizing: border-box;
}
#bbs > #bbs3 {
    float: left;
    width: 390px;
    height: 430px;
    background: #81b4f2;
    padding: 20px;
    box-sizing: border-box;
}

#footer_wrap{
    clear:both;
    padding: 30px 0 0 0;
    width: 100%;
    box-sizing: border-box;
}
#footer{
    height: 200px;
    background: slategray;
} 

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

}

 

 

반응형

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

221017 페어코딩  (0) 2022.10.17
221015~221016 클론코딩 - 학원 홈페이지 만들기  (1) 2022.10.17
221013 CSS  (0) 2022.10.13
221012 CSS  (0) 2022.10.12
221011 HTML  (1) 2022.10.11
시작/TIL(Today I Learned) 관련 글
더 보기

티스토리툴바