목차
접기
728x90
반응형
<!DOCTYPE html>
<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">
<title>CSS기초-14(속성선택자-4)</title>
<style>
ul {
list-style-type: square;
}
a {
line-height: 30px; /* 블럭 형태로 display되어 있는 것을 높이를 조절함 */
font-size: 14px;
color: blue;
text-decoration: none;
}
/* $= 선택자는 지정한 문자로 끝나는 요소에 스타일을 적용시킨다.
*/
a[href $= "xlsx"] { /* 확장자가 xls로 끝나는 곳에 스타일 적용 */
background: url(images/excel.png) no-repeat right center;
}
a[href $= "hwp"] {
background-image: url(images/hwp.jpg);
background-repeat: no-repeat;
background-position: right;
}
a[href] {
background-size: 30px 20px;
padding-right: 40px;
}
</style>
</head>
<body>
<h2>회사소개 파일 다운 받기</h2>
<ul>
<li><a href="intro.hwp" >hwp파일</a></li>
<li><a href="intro.xlsx" >엑셀파일</a></li>
</ul>
</body>
</html>✈ a 태그를 사용하여 파일 다운로드 기능을 만들 수 있다.
$= 선택자
- 지정한 문자로 끝나는 요소를 찾아서 스타일을 적용시킨다.
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 가장 인접한 형제 찾아서 CSS 적용시키기 (0) | 2021.06.02 |
|---|---|
| *= 속성 선택자 사용법 (0) | 2021.06.02 |
| 틸드 선택자를 사용해서 css 적용하는 방법(원하는 클래스명과 일치하는 요소 찾기/클래스명 포함하는 요소 찾기 등) (0) | 2021.06.02 |
| a(앵커)태그에 이미지 삽입하는 방법 (배경으로) (0) | 2021.06.02 |
| 블릿 모양 변경하는 방법 (0) | 2021.06.02 |