고마구의 개발 블로그
240604 7주차 화요일 - CSS 01 본문
오늘부터 css들어감
<head>
<style>
h2 .class1{ color:red;} /* 아무것도 선택되지 않음 */
span.class1{ color:blue;}
</style>
</head>
<body>
<h2>선택안됨<p class= 'class1'>jjj선택안됨</p>
</h2>
</body>
===================================================
<style>
p[text] { color: red;}
p[text="red"] { color:yellow; background-color: purple;}
p[text~="bb"] { color: yellow; background-color: green;}
p[text|="a1"] { color: yellow; background-color: blue;}
p[text^="img"] {color: yellow; background-color: red;}
p[text$=".png"]{color: yellow; background-color: gray;}
p[text*="ong"]{color: yellow; background-color: pink;}
a:active { background-color: green;}
a:link { color:gray;}
a:visited { color: red}
</style>
</head>
<body>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="red gg">텍스트 매칭 속성2</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pit.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pit.png">텍스트 끝 매칭 속성</p>
<p text="Seongyong Hong">텍스트 패턴 매칭 속성</p>
=================================================
div와 span비교
==============================================
<style>
div {
width: 200px; height: 100px; color: blue;
background:white; opacity: 0.9;
}
div:hover {/* 가상 클래스 */
width: 400px; height: 50px; color: red;
background: yellow; opacity: 0.5;
transition: all 1.5s linear 0.5s;
}
input:focus {
background-color: yellow;
}
input[type=text]:enabled{
background: red;
}
input[type=text]:disabled{
background: pink;
}
input:checked{
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div>
DIV에 마우스가 올라가면 div:hover상태로<br>
마우스가 빠져나오면 div상태로 변경된다.
</div>
<form>
<input type="text"><br>
<input type="password"><br>
<br>
<input type="text" value="enabled"><br>
<input type="text"><br>
<input type="text" disabled value="disabled">
<br>
<input type="radio" name="gender"><br>
<input type="radio" name="gender"><br>
<input type="checkbox">
</form>
</body>
'KDT풀스택과정 공부' 카테고리의 다른 글
| 240607 7주차 금요일 - CSS 03 (0) | 2024.06.07 |
|---|---|
| 240605 7주차 수요일 - CSS 02 (0) | 2024.06.05 |
| 240603 7주차 월요일 - HTML (0) | 2024.06.03 |
| 240530 6주차 목요일 - DB 05 (0) | 2024.05.30 |
| 240529 6주차 수요일 - DB 04 (0) | 2024.05.29 |
'KDT풀스택과정 공부' Related Articles
more
