지금은 일요일 밤 12시 30분 경..
내일 있을 자바스크립트 스터디 공부도 하고 내용도 정리 하던 중
만들었던 무언가 코드를 남기고 정리해 보기 위해 써봐요
<link rel="shortcut icon" type="image/x-icon" href="./image/favicon.ico">
<title>NAVER</title>
<body>
<div id="wrap">
<div id="wrap-center">
<div id="header">
<button id="header-hamburger">
<div></div>
</button>
<div id="pay-icon">
<div></div>
</div>
<div id="bell-icon">
<div></div>
</div>
</div>
<div id="search"></div>
<div id="nav"></div>
<div id="main"></div>
</div>
</div>
</body>
</html>HTML은 이렇게 만들어 주었고
<style>
body{
margin: 0;
}
button{
background: none;
border:none;
}
#wrap{
display: flex;
justify-content: center;
align-items: center;
}
/*
전체를 감싸주는 div에 display:flex;를 주어
상단 바의 아이콘이 가로정렬 될 수 있게 하고
앞으로 만들 header-wrap, section-wrap, footer-wrap 같은 큼직 한 요소들이 임시로 가운데정렬이 될 수 있도록 미리 설정 해뒀습니다
*/
#wrap-center{
position: relative;
width: 1280px;
height: 262px;
background-color: bisque;
}
/*
배경색, w, h 는 임시로 주었고 relative는 wrap-center안으로 들어갈
작은 요소들의 위치를 absolute로 조정해 주기 위해 설정했다
*/
#header-hamburger{
display: inline-block;
position: absolute;
top: 18px;
left: -10px;
padding: 10px;
}
/*
position:absolute;와 top, left값을 조정하여 햄버거의 위치를 잡아준
다 그리고 패딩값을 더해서 총 크기를 네이버 홈페이지와 동일한 46x46으로 맞춰 주었다
*/
#header-hamburger > div{
background-image: url(./image/sp_main.png);
background-repeat: no-repeat;
background-size: 422px 405px;
background-position: -335px -284px;
width: 26px;
height: 26px;
}
/*
이미지 좌표와 사이즈
네이버 브라우저에서 다운 받은 이미지 파일(스프라이트 이미지 파일)
*/
#header-hamburger::before:hover{
content:'';
background-color: var(--color_option_bg);
border-radius: 50%;
width: 44px;
height: 44px;
}
#header-hamburger:hover{
background-color: var(--color_option_bg);
border-radius: 50%;
pointer-events: all;
}
#pay-icon{
display: inline-block;
position: absolute;
right: 42px;
top: 18px;
padding: 10px 8px;
/*padding 사용 시 클릭되는 범위가 확장되지만
margin을 쓰면 확장되는 부분은 클릭되지 않는다
ppding과 margin의 용도 구분을 명확히 할 수 있다*/
}
#bell-icon{
position:absolute;
right: -10px;
top: 18px;
padding: 10px;
}
/*
벨아이콘의 좌표를 직접 설정하여 위치를 잡아줬다
absolute를 이용하면 해당 요소가 붕~ 뜨고
position:relative; 를 가진 부모의 요소를 따라
내가 설정해 준 좌표의 위치에 고정된다
지금은 아이콘을 둘러 싸고 있는
wrap-center라는 id를 가진 div가 부모로 되어있는 상태
*/
#pay-icon > div{
background-image: url(./image/sp_main.png);
background-repeat: no-repeat;
background-size: 422px 405px;
background-position: -31px -316px;
width: 30px;
height: 26px;
}
#bell-icon > div{
background-image: url(./image/sp_main.png);
background-repeat: no-repeat;
background-size: 422px 405px;
background-position: -364px -27px;
width: 26px;
height: 26px;
}
/*
중요한 포인트 인데 제가 스프라이트 이미지를 다운 받아 왔다고 했죠
그 이미지 안에는 네이버 홈페이지 안에서 사용되는 각종 아이콘과 이미지가 있어요
그 이미지의 좌표를 가지고 부분 부분을 사용 하는 것이고
과거에는 이미지 파일을 하나하나 불러와서 사용하기에는 용량이 부담스러워서
이런 방법을 사용했다고 하네요! 이미지는 아래에 보여드릴건데
보시면 어떤 느낌인지 아실거에요
*/
</style>결과물!
이거 올려도 되나 모르겠는데 오픈 소스에 있으니 괜찮지 않을까요?..
온라인에 글쓰기는 낯선지라 무지하네요
이게 스프라이트 이미지에요!
큰 이미지 안에서 이미지 크기와 좌표를 정하면 원하는 이미지를 사용할 수 있다구~
그리고 클론코딩 할떄 꿀팁 하나
나의 HTML문서와 결과물이 될 페이지를 탭에 같이 넣어두고
왔다리 갔다리 하며 위치를 확인하면 똑같이 되고 있는지 아닌지
쉽게 확인 가능!
이게 첫날 했던 네이버 클론이였는데
지금은 진도가 더뎌지는 탓에 접어두었지만
전에도 말했 듯 실무 하듯? 레이아웃을 구분하고 각 요소들의 위치를 지정하며
어떤 식으로 하나의 페이지를 만들어 갈 수 있을지에 대한
감을 잡게해준 고마운 작업이였어요 ^^ 나중에보자 네이버야~
안녕하시오?