JSP - tag, id, class selector (2022-09-13)
2022. 9. 13. 21:49ㆍ3층 1구역 - 개발의 장/JSP
1. 서론
어떤 속성에 style를 적용하고자 할 때 쓰는 방법은 크게 3가지가 있다.
tag에 직접 부여하는 방법,
id를 부여하여 적용하는 방법,
class를 부여하여 적용하는 방법
3가지에 대해 알아보자.
2. 본론
2-1. tag에 직접 부여하기
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ex02</title> <!-- http://localhost:8085/cssExam/exams/ex02.jsp --> <style type="text/css"> h1{background-color : yellow;} h2{background-color : green;} p{background-color : skyblue;} </style> </head> <body> <p>tag selector</p> <h1>모두 같은 색상</h1> <h2>전체적으로 동일한 스타일 적용</h2> <p> tag를 지정해서 적용하기에 동일한 tag에 모두 적용 </p> </body> </html> | cs |
2-2. id를 부여하여 적용하기
tag 옆에 id="적용할 이름" (ex : <h1 id="id1">id1 Selector</h1> )을 쓰게 될텐데
style에서 적용할 때 #적용한 이름(ex : #id1)으로 적용하여 사용한다.
#id만 적용하면 그 .id가 들어간 모든 값들이 바뀌지만 #앞에 tag를 쓰게 되면 그tag와 id를 갖는 값만 따로 style를 적용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ex03</title> <!-- http://localhost:8085/cssExam/exams/ex03.jsp --> <style type="text/css"> /* 태그에 id값을 지정했을 경우 #을 쓴다. */ #id1{background-color : yellow;} #id2{background-color : green;} h3#id2{background-color : skyblue;} </style> </head> <body> <h1 id="id1">id1 Selector</h1> <p id="id1">id1 Selector</p> <h2 id="id2">id2 Selector</h2> <h3 id="id2">id2 Selector</h3> <p id="id2">id2 Selector</p> </body> </html> | cs |
2-3. class를 부여하여 적용하기
id와 같은 맥락이며 id앞에 #이 들어갔다면 class앞에 '.'을 써서 적용한다.
마찬가지로 '.'앞에 tag를 적용할 경우 tag와 class를 동시에 갖는 값만 따로 style를 적용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ex04</title> <!-- http://localhost:8085/cssExam/exams/ex04.jsp --> <style type="text/css"> /* 태그에 class값을 지정했을 경우 .을 쓴다. */ .class1{background-color : yellow;} .class2{background-color : green;} h3.class2{background-color : blue;} </style> </head> <body> <h1 class="class1">class1 Selector</h1> <p class="class1">class1 Selector</p> <h2 class="class2">class2 Selector</h2> <h3 class="class2">class2 Selector</h3> <p class="class1">class2 Selector</p> </body> </html> | cs |
'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글
| JSP - tag 와 tag의 결합 (2022-09-13) (0) | 2022.09.13 |
|---|---|
| JSP - 속성, 속성값 선택자 (2022-09-13) (0) | 2022.09.13 |
| JSP - Universal Selector(*)로 하나가 되는 우리 (2022-09-13) (0) | 2022.09.13 |
| JSP - 간단한 회원가입 페이지 만드는 퀴즈 (2022-09-13) (0) | 2022.09.13 |
| JSP - button태그에 이미지 삽입하기 (2022-09-13) (0) | 2022.09.13 |