wiki:css:css_note:css_attr_selectors

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_attr_selectors [2021/03/31 15:17]
emblim98 만듦
+++ wiki:css:css_note:css_attr_selectors [2023/01/13 18:44] (현재)
@@ 줄 147: / 줄 147: @@
 {{:wiki:css:css_note:attrvalueslctr03.png?400|}}\\
 =====Styling Forms=====
-속성 선택자(attribute selector)는 클래스(class) 또는 아이디(ID) 없이 양식에 스타일을 설정하는 것에 유요합니다.\\
+속성 선택자(attribute selector)는 클래스(class) 또는 아이디(ID) 없이 양식에 스타일을 설정하는 것에 유용할 수 있습니다.\\
 ====예제====
 <HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        input[type=text] {
+            width: 150px;
+            display: block;
+            margin-bottom: 10px;
+            background-color: yellow;
+        }
+        input[type=button] {
+            width: 120px;
+            margin-left: 35px;
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <h2>Styling Forms</h2>
+    <form name="input" action="" method="get">
+        Firstname: <input type="text" name="Name" value="Peter" size="20">
+        lastname: <input type="text" name="Name" value="Griffin" size="20">
+        <input type="button" value="Example Button">
+    </form>
+</body>
+</html>
 </HTML>
+===Result===
+{{:wiki:css:css_note:stylingform.png?400|}}\\
+=====All CSS Attribute Selectors=====
+|       Selector      |        Example        |                          Example description                                  |
+^ %%[attribute]%%         ^ %%[target]%%              ^ %%target%% 속성을 가진 모든 요소를 선택합니다.                                      ^
+| %%[attribute=value]%%   | %%[target=_blank]%%       | %%target="_blank"%% 속성을 가진 모든 요소를 선택합니다.                              |
+^ %%[attribute~=value]%%  ^ %%[title~=flower]%%       ^ 단어 "flower"를 포함하는 %%title%% 속성을 가진 모든 요소를 선택합니다.                ^
+| %%[attribute|=value]%%  | %%[lang|=en]%%            | %%"en"%%으로 시작하는 %%lang%% 속성 값을 가진 모든 요소를 선택합니다.                     |
+^ %%[attribute^=value]%%  ^ %%a[href^="https"]%%      ^ %%"https"%%로 시작하는 %%href%% 속성값을 가진 모든 %%<a>%% 요소를 선택합니다.                 ^
+| %%[attribute$=value]%%  | %%a[href$=".pdf"]%%       | %%".pdf"%%로 끝나는 %%href%% 속성값을 가진 모든 %%<a>%% 요소를 선택합니다.                    |
+^ %%[attribute*=value]%%  ^ %%a[href*="w3schools"]%%  ^ 하위문자열 %%"w3schools"%%를 포함하는 %%href%% 속성 값을 가진 모든 %%<a>%% 요소를 선택합니다.  ^
+\\
+\\

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_attr_selectors.1617171462.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)