목차
접기
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기초-9(속성선택자-1)</title>
<style>
a[target="_blank"] {
padding-right: 30px;
background: url(images/image-solid.svg) no-repeat center right;
}
</style>
</head>
<body>
<h1>포털 사이트 종류</h1>
<ul>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li><a href="http://www.google.com" >구글</a></li>
<li><a href="http://www.daum.net" ">다음</a></li>
</ul>
</body>
</html>- target, blank 속성을 지니고 있는 a태그의 background를 url 지정하여 원하는 이미지를 삽입할 수 있다.
- background url은 기본적으로 repeat 속성을 지니고 있기 때문에
no-repeat을 해주어야 한다. - center, right는 보여졌으면 하는 위치를 지정한 것.
728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| '$= 선택자 사용방법'과 파일 다운로드 받을 수 있게 하는 방법 (0) | 2021.06.02 |
|---|---|
| 틸드 선택자를 사용해서 css 적용하는 방법(원하는 클래스명과 일치하는 요소 찾기/클래스명 포함하는 요소 찾기 등) (0) | 2021.06.02 |
| 블릿 모양 변경하는 방법 (0) | 2021.06.02 |
| css 선택자 종류 / 기본 선택자 (0) | 2021.06.02 |
| div, span 분할태그 (0) | 2021.06.02 |