728x90
๐์ฐธ๊ณ . CSS ์ ํ์
1.1 ๊ธฐ๋ณธ ์ ํ์
*tag๋ช.ํด๋์ค๋ช#id๋ชtag1, tag2[์์ฑ๋ช ]tag๋ช [์์ฑ๋ช ][์์ฑ๋ช =๊ฐ][์์ฑ๋ช ~=๊ฐ][์์ฑ๋ช :=๊ฐ][์์ฑ๋ช ^=๊ฐ][์์ฑ๋ช $=๊ฐ]tag > tag2tag tag2tag + tag2tag ~ tag2
1.2 ๊ฐ์ ํด๋์ค(Pseudo class) ์ ํ์
:focus:first-child:last-child:only-child:nth-child(n):not(์ ํ์):enable:disable:checked:empty:link: ๋ฐฉ๋ฌธํ์ง ์์ ๋งํฌ:visited: ๋ฐฉ๋ฌธํ ๋งํฌ:hover: ์ง์ ๋ ์์์ ๋ง์ฐ์ค๊ฐ ์ฌ๋ผ๊ฐ ๊ฒฝ์ฐ:active: ์ง์ ๋ ์์๊ฐ ํ์ฑํ๋ ๊ฒฝ์ฐ
a:link {
/* ๋ฐฉ๋ฌธํ์ง ์์ a ํ๊ทธ */
}
a:visited {
/* ๋ฐฉ๋ฌธํ a ํ๊ทธ */
}
div:hover {
/* ์ปค์๊ฐ ์ฌ๋ผ๊ฐ ์๋ div ์์ */
}
input:focus {
/* ํฌ์ปค์ฑ ๋์ด์๋ input ํ๊ทธ */
}
button:active {
/* ํ์ฑํํ ๋ฒํผ */
}1.3 ๊ฐ์ ์์(Pseudo element)
::after::before::selection: ๋๋๊ทธํ ์์ญ
<head>
<style>
#ex1::before {
content: "์ผ์ชฝ";
color: blue;
}
#ex2::after {
content: "์ค๋ฅธ์ชฝ";
color: green;
}
::selection{
background-color: aqua;
}
</style>
</head>
<body>
<p id="ex1">๊ฐ์์์</p>
<p id="ex2">๊ฐ์์์</p>
</body>
728x90
'WebUI > CSS3' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์ด๋ฏธ์ง์ ๊ทธ๋ผ๋ฐ์ด์ ํจ๊ณผ๋ก ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ (0) | 2023.07.07 |
|---|---|
| [CSS] CSS ๋ฐ์ค ๋ชจ๋ธ (0) | 2023.07.07 |
| [CSS] ํ ์คํธ๋ฅผ ํํํ๋ ์คํ์ผ (0) | 2023.07.07 |
