2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow)
2022. 12. 9. 17:00ㆍWep
(text)속성선택자
| text속성 선택자 형식 | |
|---|---|
| [속성=값] | 속성값이 주어진 값인 태그 |
| [속성~=값] | 공백으로 구분된 속성값 목록 중 하나가 주어진 값과 동일한 태그선택 |
| [속성|=값] |
속성값이 해당값과 동일 하거나 또는 주어진 값으로 시작하고 '-'기호로 이어지는 값을가진 태그를 선택 |
| [속성^=값] | 속성값이 주어진 값으로 시작하는 태그를 선택 |
| [속성$=값] | 속성값이 주어진 값으로 끝나는 태그 |
| [속성*=값] | 속성값이 주어진 값을 부분 문자열로 가지는 태그 |
예제) text 속성 선택자 활용
<!DOCTYPE html>
<html>
<head>
<title>1209_6</title>
<style>
p[text] {
color: red;
width: max-content;
}
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: grey;
}
p[text*="ong"] {
color: yellow;
background-color: pink;
}
div {
width: max-content;
border: 2px solid gray;
}
</style>
</head>
<body>
<div>
<h2>text 선택자</h2>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="SeongYong Hong">텍스트 패턴 매칭 속성</p>
</div>
</body>
</html>출력
box-shadow : 수평 그림자(필수) 수직그림자 그림자흐림 그림자번짐 그림자색상 삽입효과;
예제)box-shadow활용<!DOCTYPE html>
<html>
<head>
<title>1209_7</title>
<style>
body {
font-weight: bold;
font-size: 12pt;
}
.boxshadow1 {
background-color: orange;
border: 5px solid blue;
box-shadow: 10px 10px 0px teal;
}
.boxshadow2 {
background-color: cadetblue;
border: 5px solid darkblue;
box-shadow: 20px 20px 50px red;
}
.boxshadow3 {
background-color: silver;
border: 5px solid black;
box-shadow: 20px 20px 30px -10px maroon;
}
.boxshadow4 {
background-color: lime;
border: 5px solid olive;
box-shadow: 10px 10px 0px 10px fuchsia inset;
}
</style>
</head>
<body>
<h1 class="boxshadow1">박스 그림자 스타일링 예제</h1>
<br /><br />
<h1 class="boxshadow2">박스 그림자 스타일링 예제</h1>
<br /><br />
<h1 class="boxshadow3">박스 그림자 스타일링 예제</h1>
<br /><br />
<h1 class="boxshadow4">박스 그림자 스타일링 예제</h1>
</body>
</html>출력
박스 그림자 스타일링 예제
박스 그림자 스타일링 예제
박스 그림자 스타일링 예제
박스 그림자 스타일링 예제
'Wep' 카테고리의 다른 글
| 2022.12.14 Wep 6일차 JS(JS기초) (0) | 2022.12.14 |
|---|---|
| 2022.12.08 Wep4일차 HTML,CSS(input 추가요소) (1) | 2022.12.08 |
| 2022.12.07 Wep3일차 HTML,CSS (0) | 2022.12.07 |
| 2022.12.06 Wep2일차 HTML,CSS (0) | 2022.12.06 |
| 2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML (1) | 2022.12.05 |