πŸ’»Coding/πŸ“’ CSS

CSS _μ„ νƒμž_속성 μ„ νƒμž(attribute selectors)

μŒμ€μ‘ 2021. 11. 19. 10:02
728x90
λ°˜μ‘ν˜•

CSS _μ„ νƒμž_속성 μ„ νƒμž(attribute selectors)

>>  HTML μš”μ†Œκ°€ 가지고 μžˆλŠ” νŠΉμ • μ†μ„±μ˜ 속성값을 μ„ νƒν•΄μ„œ λ³€ν™”λ₯Ό μ£ΌλŠ” μ„ νƒμž

[ CSS - 속성 μ„ νƒμž 문법 ]

<style>
    νƒœκ·Έ[속성="속성값'] { 속성 : 속성값; }
</style>

 

[ html μž‘μ„± μ½”λ“œ ]

<!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>μ„ νƒμž</title>
    <link rel="stylesheet" href="/css/selector2.css">
</head>
<body>
    <h2>속성 μ„ νƒμž</h2>
	<form>
		ID : <input type="text" name="username">
		PW : <input type="password" name="password">
	</form>
</body>
</html>

 

[ css μž‘μ„± μ½”λ“œ ]

@charset "utf-8";
/* 속성 μ„ νƒμž */

input[type="text"] {
    background-color: lightpink;
}

input[type="password"] {
    background-color: lightskyblue;
    border: 3px solid red;
}

input[type="password"]:focus {
    background-color: #ffc13a;
}

 

[ μ‹€ν–‰ ν™”λ©΄μ˜ λ³€ν™” ] 

PW 포컀슀 ν•˜κΈ° μ „

 

[ :focus μ‹€ν–‰ ν™”λ©΄μ˜ λ³€ν™” ] 

 

728x90
λ°˜μ‘ν˜•

'πŸ’»Coding > πŸ“’ CSS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

CSS _폰트(font)_font-weight  (0) 2021.11.22
CSS _폰트(font)_font-family  (0) 2021.11.22
CSS _hover  (0) 2021.10.26
CSS _μ„ νƒμž_κ·Έλ£Ήμ„ νƒμž  (2) 2021.09.13
CSS _μ„ νƒμž_ν΄λž˜μŠ€μ„ νƒμž  (0) 2021.08.27