반응형
G마켓을 만들어보자
HTML로 홈페이지를 따라 만들어보라는 과제가 나왔다.
어떤 홈페이지를 할까 하다가 민혁이랑 형원이가 두 시즌이나 찍은 유튜브 예능 <인싸오빠> 가 생각났다. (솔직히 이름 좀 그래... 어디가서 말하기 부끄러워.)
글로벌 어쩌구한 G마켓을 구현해보기로 결정.
난관
어찌저찌 G마켓 로고와 검색창, 전체 메뉴보기는 대충 구현했는데 전체 메뉴보기 옆에 있어야 할 여러 항목이 올라가지 않는 것이다.
이리저리 수정하다가 도무지 안되겠어서 뒤집어 엎었다.
더보기에 있는 것은 뒤엎기 직전까지 수정한 코드이나 쓰레기 코드이니 굳이 볼 필요는 없다.
더보기
처음 만든 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#search {
width: 500px;
height: 40px;
border-width: 3px;
border-color: #067dfd;
position: center;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
border-color: #067dfd;
}
.menu {
height: 40px;
background-color: rgb(26, 175, 28);
border-color: white;
color: white;
font-family: G마켓 산스;
padding-left: 50px">
}
</style>
</head>
<body>
<table>
<tr>
<tb>
<!-- 왼쪽 -->
<table>
<!-- 로고 -->
<tr>
<td><a href="https://www.gmarket.co.kr/"> <img
src="../img/gmarket.png" style="width: 220px; height: 100px"></a>
</td>
<!-- 검색창 -->
<td><input id="search" type="text" name="search"></td>
<td><input type="submit" value="검색"></td>
</tr>
</table>
<!-- 메뉴 -->
<table>
<tr>
<td>
<table style=" border="0" cellspacing="0.5" >
<tr>
<td
style="height: 50px; background-color: rgb(26, 164, 41); color: white; font-family: G마켓 산스; padding-left: 30px">
전체 메뉴보기</td>
</tr>
<tr>
<td class="menu">브랜드패션</td>
<!-- <td rowspan="9" colspan="5"><img src="../img/gm.jpeg"></td> -->
</tr>
<tr>
<td class="menu">패션의류.잡화.뷰티</td>
</tr>
<tr>
<td class="menu">유아동</td>
</tr>
<tr>
<td class="menu">식품.생필품</td>
</tr>
<tr>
<td class="menu">홈데코.문구.취미.반려</td>
</tr>
<tr>
<td class="menu">컴퓨터.디지털.가전</td>
</tr>
<tr>
<td class="menu">스포츠.건강.렌탈</td>
</tr>
<tr>
<td class="menu">자동차.공구</td>
</tr>
<tr>
<td class="menu">여행.도서.e쿠폰</td>
</tr>
</table>
</td>
<!-- 오른쪽 표 -->
<td>
<table style>
<tr>
<td rowspan = "9">베스트</td>
<td rowspan = "9">슈퍼딜</td>
<td rowspan = "9">쿠폰.출첵</td>
<td rowspan = "9">스마일배송</td>
<td rowspan = "9">스마일클럽</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
테이블 양식에 대한 이해
우선 내가 원하는 구현 방향을 생각했었다.
테이블을 두개 만들어, 이 두개 테이블을 왼쪽 그림 처럼 넣는 것.
그러나 이리저리 생각해보니 갑자기 깨달음을 얻어 하나의 테이블에 전부 집어넣게 되었다.
별로 좋은 방법은 아니라고 생각한다 ...
하지만 여기까지 도달하는데 4시부터 6시... 난 7시 반에 가야하는데.
<table>
<tr>
<td></td>
</tr>
</table>
원하는 테이블 모양을 먼저 만들었다
값을 넣으면서 테이블을 만들면 너무 헷갈려 테이블을 만들어놓고 값을 집어넣었다. 아래는 그 틀이 된 코드.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border = "1">
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>b</td>
<td colspan = "5" rowspan = "9">img</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
</body>
</html>
최종코드
마무리한 코드이다. 구현하면, 아래와 같은 모습이다. 지마켓을 누르면 진짜 지마켓으로 연결되고, 검색창에 텍스트도 입력이 가능하다.
꽤나 그럴듯해 보이지만 치명적인 단점이 있다. 바로 축소했을 때 전체 메뉴도 같이 줄어든다는 것...
미니멈값을 잡아서 어쩌구저쩌구 하면 된다고 들었는데. 이것을 붙잡고 있기엔 지금 자바 스크립트 진도를 나가고 있어 패스하도록 하겠다. 사이드 프로젝트를 진행할 때 한번 제대로 툴을 공부해 해보는걸로!
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#search {
width: 500px;
height: 40px;
border-width: 3px;
border-color: #067dfd;
position: center;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
border-color: #067dfd;
}
.menu {
height: 40px;
background-color: rgb(26, 175, 28);
border-color: white;
color: white;
font-family: 고딕;
padding-left: 50px">
}
.menu2{
text-align:center;
}
.menu3{
color: grey;
font-size:13px;
width: 80px;
}
</style>
</head>
<body>
<body>
<table>
<!-- 지마켓 로고 -->
<tr>
<td><a href="https://www.gmarket.co.kr/"> <img
src="../img/gmarket.png" style="width: 220px; height: 100px"></a>
</td>
<!-- 검색창 -->
<td><input id="search" type="text" name="search" ></td>
<td><input type="submit" value="검색"></td>
</tr>
</table>
<!-- 전체메뉴 테이블 -->
<table border="0">
<tr>
<td
style=" width: 30% ; height: 50px; background-color: rgb(26, 164, 41); color: white; font-family: G마켓 산스; padding-left: 30px;"
0" ; cellspacing="0.5"">전체 메뉴보기</td>
<td class = "menu2">베스트</td>
<td class = "menu2">슈퍼딜</td>
<td class = "menu2">쿠폰.출첵</td>
<td class = "menu2">스마일배송</td>
<td class = "menu2">스마일클럽</td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu4"> </td>
<td class = "menu3">로그인</td>
<td class = "menu3">회원가입</td>
<td class = "menu3">고객센터</td>
<td class = "menu3">Global</td>
</tr>
<tr>
<td class="menu">브랜드패션</td>
<td colspan="30" rowspan="9"><img src="../img/gm.jpeg"></td></td>
</tr>
<tr>
<td class="menu">패션의류.잡화.뷰티</td>
</tr>
<tr>
<td class="menu">유아동</td>
</tr>
<tr>
<td class="menu">식품.생필품</td>
</tr>
<tr>
<td class="menu">홈데코.문구.취미.반려</td>
</tr>
<tr>
<td class="menu">컴퓨터.디지털.가전</td>
</tr>
<tr>
<td class="menu">스포츠.건강.렌탈</td>
</tr>
<tr>
<td class="menu">자동차.공구</td>
</tr>
<tr>
<td class="menu">여행.도서.e쿠폰</td>
</tr>
</table>
</body>
</html>
알고보니 ...
테이블은 구식 방법이라고..! div를 이용해서 만든 HTML 이 최신 트렌드라고 한다.
근데 넘 노가다인걸..? 이번은 이정도로 만족한다. 보통 이렇게 코드를 작성하지 않고 툴을 이용한다는데 여유가 된다면 한번 툴을 이용해보는걸로. 나 우는거 아니다!
반응형
