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
CSS3 radial-gradient, shadow, web font
Radial-gradient CSS3에서는 그래디언트 효과를 선형뿐만 아니라 원형으로도 나타낼 수 있다. CSS3 gradient 지원버전 CSS3 그래디언트(gradient)를 지원하는 주요 웹 브라우저의 버전은 다음과 같다. 또한,
smarti.tistory.com
바둑에 담긴 지혜
바둑에 담긴 지혜 위기십결(圍棋十訣) 당나라 현종은 '기대조(棋待詔)'라는 벼슬을 두었는데, 이는 바둑의 최고수에게 헌정되는 자리였다. 당시 기대조였던 당나라의 바둑 고수 왕적신(王積薪)
smarti.tistory.com
포스타입, 창작과 수익
POSTYPE (포스타입) : 창작과 수익 '더 자유로운 창작, 더 높은 수익'을 캐치프래이즈로 콘텐츠를 쉽게 사고 또 팔 수 있는 블로그 지향 서비스이다. 높은 판매 수수료와 불리한 계약 조건을 내세웠
smarti.tistory.com
포토샵으로 금박, 은박 문자 만들기
Adobe Photoshop으로 금박, 은박 문자 만들기 포토샵에서 반짝이는 느낌의 금박, 은박 문자 만들기. 먼저 최종 마무리 레이어 창을 보자. 새 문서에 아무 이미지나 넣어서 필터의 왜곡 효과나 손가락
smarti.tistory.com
[디자인공부] - WebP 웹을 위한 새로운 이미지 포맷
WebP 웹을 위한 새로운 이미지 포맷
구글(google)이 만든 이미지 포맷 WebP(웹피) WebP는 구글에서 만든 이미지 파일 포맷으로 웹피라고 한다. 웹사이트의 페이지를 보다 빠르고, 더 작고 풍부한 이미지를 만들 수 있다. WebP는 일반적으
smarti.tistory.com
'코딩공부' 카테고리의 다른 글
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 |
댓글