11주차 - jsp&css (5) [] 속성을 이용하여 스타일을 적용하기
2022. 9. 13. 18:56ㆍjsp/css
이번의 목표
01. [] (대괄호) 를 이용하여 스타일을 적용해보자.
02. 임의의 속성을 만들어서 스타일을 적용해보자.
만약에 어떠한 속성을 사용하는 구역에만 스타일을 적용하고 싶다면 [] 를 이용하여 가능합니다.
태그의 속성에는 jsp에서 지원하는 속성 외에도 개발자가 임의로 속성을 사용할 수 도 있습니다.
당연하게도 개발자가 임의로 넣은 속성에는 아무런 기능도 존재하지 않습니다.
하지만 이 우리가 부여한 속성을 구분자로 하여 다양하게 활용이 가능합니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05</title>
<style type="text/css">
h1[align] {
color: orange;
background-color: gray;
}
h1[m] {
color: red;
background-color: gray;
}
p[text] {
color: blue;
background-color: yellow;
}
h1[text="attr3"] {
color: green;
background-color: pink;
}
h6[sleep] {
color: white;
background-color: black;
}
h5[omae="wa"] {
color: fuchsia;
background-color: maroon;
}
h1[youtube] {
color: aqua;
background-color: teal;
}
</style>
</head>
<body>
<h1 align="left">a</h1>
<h1 m>m 속성 이름 선택자</h1>
<h1 m="표현내용">m 속성 이름 선택자</h1>
<p text="attr">text 속성 이름 선택자</p>
<h1 text="attr3">속성과 속성값 선택자</h1>
<h1 text="attr2">속성과 속성값 선택자</h1>
<p>속성 선택 없음</p>
</body>
</html>02. 실행 화면
'jsp > css' 카테고리의 다른 글
| 11주차 - jsp&css (7) 가상 클래스 (0) | 2022.09.13 |
|---|---|
| 11주차 - jsp&css (6) 자식 객체에 스타일 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (4) .class class를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (3) #id 아이디를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |
| 11주차 - jsp&css (2) 태그를 지정하여 스타일을 적용하기 (0) | 2022.09.13 |