HTML+CSS

[HTML/CSS] 사이트 로고 및 메뉴 만들기

져니져니95 2021. 3. 15. 18:25

경일게임 아카데미 사이트를 보고 따라 만들어보기 시작했다. 

이때 중요한 개념 하나를 또 배웠는데 바로 ./ 과 ../ 요 두개다.

옛날에도 컴퓨터 시간에 / 는 파일경로를 표시하는 용도로 사용되는걸 자주 봐왔다. 

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>경일게임아카데미</title>
    <link rel="stylesheet" href="./commons/css/index.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <h1 id="logo">
                <a href="#"><img src="./image/경일로고.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 id="visual">
            <img src="./image/비주얼1.png">
        </div>

    </div>
</body>
</html>

교수님이 실력은 똑같은 코드를 여러번 쳐보고 안보고 칠 수 있을 정도가 되야한다고 하셨다.

그래서 두번째는 홈페이지 봄서 기억에 의존해서 해보깅,,,,그런데 첫번째에는 잘만 뜨던 비주얼1 이미지가 두번재 할때 갑자기 안떴다....무엇이 문제일까,,,,혼자 15분동안 고민하다가 교수님 불러서 해결했는데 원인은

img src를 img scr로 입력했기 때문이었다...

src,,,src,,,,src,,,,src,,,,,앞으로 절대 실수 안해야지,,,,ㅎㅎ

 

/* css style sheet */

*{
    margin:0;
    padding:0;
}

ul,li{
    list style: none;
}

a{
    text-decoration:none;
}
#wrap{
    width:100%;
}

#header{
    width:1200px;
    height:100px;
    margin:0 auto;
}

#logo{
    margin:20px 0 0 0;
    float:left;
}

#gnb{
    float:right;
}
#gnb > ul > li{
    float:left;
    display:inline-block
}
#gnb > ul > li > a{
    font-size:19px;
    color:#004385;
    font-weight: bold;
    width:180px;
    display:inline-block;
    margin:40px 0;
}

 

실제 경일게임 아카데미 홈페이지(좌) 내가 따라 만든 페이지(우)

 

실제 홈페이지는 모션들이 적용되어있는데 그건 자바스크립트를 사용해서 하는거라고 하셨다. HTML로 할 수 있는 부분도 있지만 굉장히 고급기술이 필요하다고 한다. 그래도 얼추 비슷하게 만들어져서 괜시리 뿌듯ㅋㅋㅋ!!!!