CSS image sprite
이미지 스프라이트(image sprite)란 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미한다.
웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 된다.
하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 된다.
이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있다.
모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다.
또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.
.up, .down, .right, .left { background: url("/examples/images/img_image_sprites.png") no-repeat; }
.up { width: 21px; height: 20px; background-position: 0 0; }
.down { width: 21px; height: 20px; background-position: -21px 0; }
.right { width: 22px; height: 20px; background-position: -42px 0; }
.left { width: 22px; height: 20px; background-position: -65px 0; }
Navigation bar
사용자가 웹 사이트에서 가장 많이 클릭하는 영역 중 하나가 바로 내비게이션 바이다.
내비게이션 바(navigation bar)는 우리가 흔히 사용하는 웹 사이트의 메뉴를 의미한다.
HTML 요소만으로 만든 단순한 메뉴에 CSS를 이용하면, 보기에도 이쁘고 쓰기도 편리한 메뉴로 손쉽게 바꿀 수 있다.
링크를 사용한 리스트 메뉴
내비게이션 바 중에서도 가장 기본적인 것이 바로 링크(link)를 사용한 리스트 메뉴이다.
HTML에서 링크는 <a>태그로 표현한다.
다음 예제는 링크를 사용하여 구현한 간단한 메뉴 예제이다.
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/html/intro">HTML</a></li>
<li><a href="/css/intro">CSS</a></li>
<li><a href="/javascript/intro">자바스크립트</a></li>
</ul>
수직 네비게이션 바
링크를 사용한 리스트 메뉴에 display 속성값을 block으로 설정하면, 간단히 수직 내비게이션 바를 만들 수 있다.
<style>
ul { background-color: #FFDAB9; width: 150px; list-style-type: none; margin: 0; padding: 0; }
li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; }
li a:hover { background-color: #CD853F; color: white; }
</style>
위의 예제에서 인라인 요소인 <a>요소의 display 속성값을 블록(block)으로 변경하면, 메뉴의 어느 곳을 클릭하더라도 바로 연결된 페이지로 넘어가게 설정된다.
클래스(class)를 이용하면 내비게이션 바에서 현재 메뉴의 위치도 표현할 수 있다.
<style>
li a.current { background-color: #FF6347; color: white; }
li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>
위의 예제에서는 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분하고 있다.
border 속성을 이용하면 내비게이션 바에 경계선을 표현할 수 있다.
<style>
li { border-bottom: solid 1px black; }
li:last-child { border-bottom: none; }
</style>
수평 네비게이션 바
수평 내비게이션 바는 다음과 같은 속성을 이용해 만들 수 있다.
- display 속성의 inline 속성값을 이용한 방법
- floating 속성을 이용한 방법
display 속성의 inline 속성값을 이용한 방법
링크를 사용한 리스트 메뉴에서 <li>요소의 display 속성값을 inline으로 설정이다. 그러면 블록 요소였던 <li>요소가 인라인 요소의 성질을 갖도록 변경된다.
인라인 요소로 변경된 <li>요소는 너비가 자신의 내용만큼만을 차지하도록 변경됩니다. 따라서 모든 <li>요소가 수평으로 늘어서게 되며, 이것을 이용하여 수평 내비게이션 바를 만들게 된다.
<style>
li { display: inline; }
</style>
floating 속성을 이용한 방법
링크를 사용한 리스트 메뉴의 <li>요소에 float 속성을 설정한다.
이때 float 속성값을 left로 설정하면, 모든 메뉴가 왼쪽으로 정렬된다
또한, float 속성값을 right로 설정하면, 모든 메뉴가 오른쪽으로 정렬된다.
<style>
li { float: left; }
li a { display: block; background-color: #FFDAB9; padding: 8px; }
</style>
CSS를 이용하면 수평 내비게이션 바에 여러 가지 스타일을 설정할 수 있다.
<style>
ul { background-color: #FFDAB9; list-style-type: none; margin: 0; padding: 0; overflow: hidden; }
li { float: left; }
li a { display: block; background-color: #FFDAB9; color: #000000; padding: 8px; text-decoration: none;
text-align: center; font-weight: bold; }
li a:hover { background-color: #CD853F; color: white; }
</style>
클래스(class)를 이용하면 내비게이션 바에서 현재 메뉴의 위치도 표현할 수 있다.
<style>
li a.current { background-color: #FF6347; color: white; }
li a:hover:not(.current) { background-color: #CD853F; color: white; }
</style>
위의 예제에서는 :not 선택자를 이용하여 현재 메뉴를 나타내는 current 클래스와 그 외의 메뉴의 배경색을 구분하고 있다.
<ul>요소나 <ol>요소의 float 속성값을 조절하면, 왼쪽 메뉴뿐만 아니라 오른쪽 메뉴도 같이 설정할 수 있다.
<ul>
<li><a href="/index.php">Home</a></li>
<li><a href="/html/intro">HTML</a></li>
<li><a class="current" href="/css/intro">CSS</a></li>
<ul style="float:right; list-style-type:none;">
<li><a href="/bbs/login.php">로그인</a></li>
<li><a href="/bbs/register_form.php">회원가입</a></li>
</ul>
</ul>
위의 예제에서 Home, HTML, CSS 메뉴는 왼쪽으로 정렬되며, 로그인, 회원가입 메뉴는 오른쪽으로 정렬된다.
border 속성을 이용하면 내비게이션 바에 경계선을 표현할 수 있다.
<style>
li { float: left; border-right: solid 1px white; }
li:last-child { border-right: none; }
<style>
Dropdown 효과
해당 요소에 마우스를 올려서 다른 요소나 텍스트가 나타나게 하는 효과를 드롭다운(dropdown) 효과라고 한다.
CSS를 이용하면 이러한 드롭다운 효과를 간단히 설정할 수 있다.
다음 예제는 display 속성을 이용하여 드롭다운 효과를 구현하는 예제이다.
<style>
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #F9F9F9;
min-width: 160px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown:hover .dropdown-content { display: block; }
</style>
위의 예제에서 사용자가 마우스를 올리면 나타날 <div>요소의 display 속성값을 none으로 설정한다. 이렇게 설정하면 처음에는 눈에 보이지 않게 된다.
하지만 특정 요소에 마우스를 올리면 해당 <div>요소의 display 속성값이 블록(block)으로 변경된다. 따라서 이때에는 이 <div>요소가 눈에 보이게 된다.
드롭다운(dropdown) 메뉴
메뉴에 마우스를 올리면 하위 메뉴가 나타나게 하는 메뉴를 드롭다운(dropdown) 메뉴라고 한다. 드롭다운 효과를 이용하면 이러한 드롭다운 메뉴도 간단히 구현할 수 있다.
<style>
.dropdown-button { background-color: #FFDAB9; padding: 8px; font-size: 15px; border: none; }
.dropdown { position: relative; display: inline-block; }
.dropdown-content {
display: none;
position: absolute;
background-color: #FFDAB9;
min-width: 70px;
padding: 8px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a { color: black; padding: 8px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #CD853F; }
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropdown-button { background-color: #CD853F; }
</style>
위의 예제에서도 앞선 예제와 마찬가지로 해당 요소의 display 속성을 이용하여 드롭다운 메뉴를 구현하고 있다.
[코딩공부] - CSS3 radial-gradient, shadow, web font
[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷
'코딩공부' 카테고리의 다른 글
CSS3 radial-gradient, shadow, web font (0) | 2020.10.26 |
---|---|
CSS3, vendor prefix, 선형 그래디언트 (0) | 2020.10.26 |
CSS selector 통합정리 (0) | 2020.10.25 |
CSS tooltip, form, @, scroll (0) | 2020.10.25 |
CSS 위치속성, 플로트, 정렬 (0) | 2020.10.21 |
CSS 위치속성 디스플레이, 포지션, 오버플로우 (0) | 2020.10.21 |
CSS 박스모델, 패딩, 테두리 (0) | 2020.10.16 |
CSS 박스모델, 마진, 아웃라인 (0) | 2020.10.15 |
댓글