웹 프로그래밍/CSS

[CSS] img 태그 '파일명 조건'에 따라 값 지정하기(src $= , src ^= , src *=)

산을넘는다 2020. 6. 15. 13:44 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	input[type]{ /*input[속성명=속성값] */
		background-color: olive;
	}
	
	
 	input[type=password]{ /*input[속성명=속성값] */
		background-color: green;
	} 
	
	img{
		width : 100px;
		height : 100px;
		border: 2px solid red;
	}
	
	img[src $= jpg]{ /* src가  jpg로 끝나는 경우 */
		border-color: orange;
	
	}
	
	img[src ^= "../html/images/추노1"]{ /* src가 ~으로 시작하는 경우 */
		border-color: blue;
	}
	
	img[src ^= "../html/images/추노1"]{ /* src가 ~으로 시작하는 경우 */
		border-color: blue;
	}
	
	img[src *= daum] { /* daum 이라는 글자를 포함하는 경우 */
		border-color: gray;
	}

	
</style>

</head>
<body>
	<form>
		아이디 : <input type = "text" id = "id"><br>
		패스워드 : <input type = "password" id = "pwd"><br>
	</form>
	<img src = "../html/images/bear.gif">
	<img src = "../html/images/bear.gif">
	<img src = "../html/images/bear.gif">
	<img src = "../html/images/bear.gif">
	<img src = "../html/images/추노1.jpg">
	<img src = "../html/images/추노2.jpg">
	<img src = "../html/images/daum_logo.png">
	

</body>
</html>