반응형
http1.0 사용하는 경우 웹사이트 하고 서버로 요청하는 제한이 있어요. 이미지가 많거나 API를 동시에 여러 개 호출하는 경우 느리게 보일 수 있습니다. 요즘에는 ssl 적용하여 http 2를 적용하는 곳이 많아지고 있지만 그래도 여러 환경을 지원하기 위해서 이미지를 따로 만드는 것이 아니라 스프라이트를 사용할 수 있습니다. 이미지를 하나만 작성하고 클라이언트에서 잘라서 사용하는 방식입니다.
가장 먼저 background-image 속성으로 이미지 경로를 설정하고요. background-position 속성을 사용하여 이미지를 찾아갑니다. 숫자 두개를 넣는데 첫 번째는 좌우이고, 두 번째는 위아래 값입니다. 이미지 영역을 벗어 자면 기본 설정이 반대편 이미지를 보여주는데 이것을 방지하기 위해서 반복 방지 속성을 사용할 수 있어요. background-repeat: no-repeat; 설정입니다. background-size 반드시 설정해야 이미지 위치를 정상적으로 찾아가요.
<html lang="ko">
<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">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" >
<title>NAVER</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#wrap {
text-align: center;
}
#wrap-center {
display: inline-block;
width: 1280px;
background-color: yellow;
}
#container {
height: 2000px;
}
#header {
text-align: left;
}
#header-hamburger {
margin-top: 18px;
padding: 10px;
}
#header-hamburger > div {
background-image: url(/sp_main.png);
background-position: -335px -284px;
background-size: 422px 405px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrap-center">
<div id="header">
<div id="header-hamburger">
<div></div>
</div>
</div>
<div id="container"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>패딩을 주깅 위해서 자식 태그를 지정합니다. 자식 태그는 > 기호 이용해서 지정할 수 있어요. 햄버거 버튼은 버튼이니까 div가 아니라 button으로 수정해 볼게요. 버튼으로 수정했지만 브라우저에서 지원하는 배경을 지워줘야 합니다. background와 border 모두 none으로 설정해 보세요. button 누르는 영역 마우스가 올라가면 손가락 모양이 되도록 cursor pointer로 설정합니다.
padding과 마진 차이중에 하나는 padding 까지 콘텐츠 영역으로 인식하여 마우스가 인식하고 눌리고 margin은 영역 밖이라서 눌리거나 마우스 모양이 바뀌지 않아요.
개발자 도구에서 마우스 올린 상태를 확인하고 싶을때 강제 실행 상태 hover로 설정해 두면 마우스가 계속 올라가 있지 않아도 확인할 수 있어요.
css에서도 변수를 사용 할 수 있어요. 낮은 버전 브라우저에서는 지원하지 않을 수도 있습니다.
<html lang="ko">
<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">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" >
<title>NAVER</title>
<style>
:root {
--color_title: #080808;
--color_title_rgb: 8,8,8;
--color_body: #101010;
--color_body_rgb: 16,16,16;
--color_caption1: #404040;
--color_caption1_rgb: 64,64,64;
--color_caption2: #606060;
--color_caption2_rgb: 96,96,96;
--color_search: #000;
--color_search_rgb: 0,0,0;
--color_border_out: #e3e5e8;
--color_border_out_rgb: 227,229,232;
--color_border_in: #ebebeb;
--color_border_in_rgb: 235,235,235;
--color_border_in_divider: #ebebeb;
--color_border_in_divider_rgb: 235,235,235;
--color_border_in_exception: #ebebeb;
--color_border_in_exception_rgb: 235,235,235;
--color_button_border: #dadcdf;
--color_button_border_rgb: 218,220,223;
--color_dot_divider: #d3d5d7;
--color_dot_divider_rgb: 211,213,215;
--color_block_bg: #fff;
--color_block_bg_rgb: 255,255,255;
--color_board_bg: #f4f6fa;
--color_board_bg_rgb: 244,246,250;
--color_option_bg: #f5f7f8;
--color_option_bg_rgb: 245,247,248;
--color_login_bg: #fafbfb;
--color_login_bg_rgb: 250,251,251;
--color_menu_widget_bg: #fff;
--color_menu_widget_bg_rgb: 255,255,255;
--color_setting_bg: #fff;
--color_setting_bg_rgb: 255,255,255;
--color_button1_bg: #fff;
--color_button1_bg_rgb: 255,255,255;
--color_button2_bg: #fff;
--color_button2_bg_rgb: 255,255,255;
--color_news: #3a67ea;
--color_news_rgb: 58,103,234;
--color_news_econ_stay: #909aab;
--color_news_econ_stay_rgb: 144,154,171;
--color_news_econ_down: #4f67d6;
--color_news_econ_down_rgb: 79,103,214;
--color_live_news_price: #f4361e;
--color_live_news_price_rgb: 244,54,30;
--color_enter: #e538e2;
--color_enter_rgb: 229,56,226;
--color_enter_bg: #f2f1fb;
--color_enter_bg_rgb: 242,241,251;
--color_sports: #1f65ef;
--color_sports_rgb: 31,101,239;
--color_sports_bg: #f4f7fe;
--color_sports_bg_rgb: 244,247,254;
--color_econ: #008f76;
--color_econ_rgb: 0,143,118;
--color_calendar: #eb5b5b;
--color_calendar_rgb: 235,91,91;
--color_dic: #031f5f;
--color_dic_rgb: 3,31,95;
}
html, body {
margin: 0;
padding: 0;
}
#wrap {
text-align: center;
}
#wrap-center {
display: inline-block;
width: 1280px;
background-color: yellow;
}
#container {
height: 2000px;
}
#header {
text-align: left;
}
#header-hamburger {
margin-top: 18px;
padding: 10px;
background: none;
border: none;
cursor: pointer;
}
#header-hamburger > div {
background-image: url(/sp_main.png);
background-position: -335px -284px;
background-size: 422px 405px;
background-repeat: no-repeat;
width: 26px;
height: 26px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrap-center">
<div id="header">
<button id="header-hamburger">
<div></div>
</button>
</div>
<div id="container"></div>
<div id="footer"></div>
</div>
</div>
</body>
</html>반응형
'코딩 프로그래밍 > Javascript 자바스크립트' 카테고리의 다른 글
| 네이버에서 사용하는 시각 장애인을 위한 웹접근성 (0) | 2023.06.16 |
|---|---|
| css position static relative absolute z-index (0) | 2023.06.16 |
| display block inline-block inline (0) | 2023.06.16 |
| html head 파비콘 넣기 (0) | 2023.06.16 |
| vscode 에서 웹문서 시작하기 (0) | 2023.06.16 |
댓글