웹 페이지를 만들 때 분류된 표시를 위해 태그를 사용하는 것이 매우 일반적입니다. 둥근 모서리 태그는 아름다운 스타일과 생생한 표현의 장점을 가지고 있습니다. 일반적으로 둥근 모서리 태그의 배경을 그림으로 만듭니다. 라벨 텍스트의 단어 수가 변경되면(그림 1 참조) 고정된 배경 이미지가 이에 따라 확장될 수 없습니다. 이런 식으로 너비가 다른 많은 배경 이미지를 만들어야 하는데 이는 매우 불편합니다. 확장 가능한 둥근 모서리 라벨을 만드는 두 가지 방법은 다음과 같습니다.
그림 1
획이 둥근 라벨
그림 1과 같이 둥근 라벨의 가장자리가 배경색과 다릅니다. 먼저 포토샵에서 배경 이미지를 만들어야 합니다(그림 2). 이미지의 너비는 가능한 텍스트 길이보다 약간 넓습니다. 높이는 최소한 실제 라벨과 동일해야 하며, 높이, 가장자리는 획 색상으로 설정되어 있으며 내부는 투명하지만 둥근 모서리 외부 영역은 투명하게 설정할 수 없으며 페이지 배경색으로 채워야 합니다. 여기서는 흰색을 사용하고 이름을 tab_bg.gif로 지정합니다.
그림 2
코드는 다음과 같습니다.
다음은 인용된 부분입니다.
<스타일 유형="텍스트/css">
a.tab{ float:left; margin:10px; padding-right:10px; background:#4B90C6 url(tab_bg.gif) 오른쪽 상단 no-repeat; 글꼴:bold 14px/30px 'Verdana';
a.tab 범위{ padding-left:10px; 배경:url(tab_bg.gif) no-repeat;}
</style>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>홈페이지</span></a>
<a href="#" class="tab"><span>프로필</span></a>
<a href="#" class="tab"><span>방명록</span></a>
</body> |
코드 설명: 1. 구현 아이디어는 <a> 태그에 대한 레이블의 오른쪽 배경을 설정하고 <span> 태그에 대한 레이블의 왼쪽 배경을 설정하여 둥근 레이블의 확장을 실현하는 것입니다.
2. 이 방법을 사용하려면 배경 이미지만 다운로드하면 되며, 이는 라벨 양쪽의 배경이 동기화되지 않는 문제를 해결합니다. 그러나 라벨의 단어 수가 배경 이미지의 너비를 초과하면 문제가 발생합니다. (그림 3과 같이) 현상이 발생하므로 배경 이미지 제작 시 이미지 폭은 최대한 긴 문자 폭을 고려하여 제작해야 합니다.
그림 3
단색 둥근 모서리 라벨
위의 경우 획 효과를 구현해야 하기 때문에 텍스트는 배경 너비 내에서만 확장될 수 있으며, 이는 특정 제한이 있습니다. 단일 색상의 둥근 모서리 라벨인 경우 완전히 확장할 수 있습니다(그림 4).
그림 4
처음 사용한 배경 이미지의 왼쪽과 오른쪽을 각각 배경 이미지로 자르고(그림 5 참조) 이름을 tab_left.gif 및 tab_right.gif로 지정합니다.
그림 5
코드는 다음과 같습니다.
다음은 인용된 부분입니다.
<스타일 유형="텍스트/css">
a.tab{ float:left; margin:10px; padding-right:10px; background:#033EA5 url(tab_right.gif) 오른쪽 상단 no-repeat; 글꼴:bold 14px/30px 'Verdana';
a.tab 범위{ padding-left:10px; 배경:url(tab_left.gif) no-repeat;}
</style>
<body bgcolor="#FFFFFF">
<a href="#" class="tab"><span>홈페이지</span></a>
<a href="#" class="tab"><span>프로필</span></a>
<a href="#" class="tab"><span>방명록</span></a>
</body> |
코드 설명:
1. <a>와 <span>에 서로 다른 배경을 사용하고 링크 배경색을 획 색상으로 설정하여 단색 레이블 효과를 얻습니다.
2. 이 방법은 임의의 확장 효과를 얻을 수 있습니다.
