본문 바로가기
코딩 공부/CSS

CSS

Largomaru 2022. 10. 18. 18:00

CSS

*{

color : red;

background-color : yellow;

font-size:14px;

font-weight:normal;

}

 

*는 모든곳에 적용(universal selecter)

 

태그별로 스타일 적용

 

<style type="text/css">
h1{ background-color:yellow;}
h2{ background-color:green;}
p{ background-color:skyblue;}
</style>
<p>tag selector</p>
<h1>서로다른 색상</h1>
<h2>태그별로 다른 스타일 적용 시 사용</h2>
<p>tag를 지정해서 적용하기에 동일한 tag에 모두 적용</p>

 

아이디별로 스타일 적용

 

<style type="text/css">
#id{ background-color:yellow;}
#id1{ background-color:green;}
#id2{ background-color:skyblue;}
</style>
<p id="id">tag selector</p>
<h1 id="id1">서로다른 색상</h1>
<h2 id="id2">태그별로 다른 스타일 적용 시 사용</h2>
<p id="id1">tag를 지정해서 적용하기에 동일한 tag에 모두 적용</p>

 

클래스별로 스타일 적용

 

<style type="text/css">
.class1{ background-color:yellow;}
.class2{ background-color:green;}
.class3{ background-color:skyblue;}
</style>
<p class="class1">tag selector</p>
<h1 class="class2">서로다른 색상</h1>
<h2 class="class3">태그별로 다른 스타일 적용 시 사용</h2>
<p class="class2">tag를 지정해서 적용하기에 동일한 tag에 모두 적용</p>

 

임의로 속성값을 만들어 사용할 수 있다.

 

<style type="text/css">
h1[align]{color:orange; background-color:gray;}
h1[m]{color:red; background-color:blue;}
h1[m="표현내용"]{color:red; background-color:pink;}
h1[text="attr3"]{color:purple; background-color:yellow;}
p[text]{color:green; background-color:gray;}
</style>
<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>

 

가상클래스(마우스 이벤트)

<style type="text/css">
/*가상클래스*/
a:link{color:pink; text-decoration:nane;}
a:visited{color:blue;}
a:hover{color:black; text-decoration:underline;}
a:active{background-color:yellow;}
</style>
<h2>Pseudo Class</h2>
<p>
<a href = "ex05.jsp" target="_blink"> test </a>
</p>
<p>
<a href = "ex08.jsp" target="_blink"> test </a>
</p>
<hr>
link : 웹문서에서 사용자가 방문핮지 않았던 곳을 표시한다.
<br>visited : 웹 문서에서 사용자가 방문한 곳을 표시한다.
<br>hover : 웹 문서에 사용저거 링크에 마우스 포인터를 올리는 순간을 나타낸다
<br>active : 웹문서에서 사용자가 링크를 클릭하는 순간을 나타낸다.

마우스 위치에 따른 변화주기

div.d1{border:3px solid red; width:400px; padding: 10px;}
div.d1:hover{background-color: yellow;}
div.d2{border:3px double green; width:400px; padding: 10px;}
div.d2:hover{background-color: green; border:3px dotted black;}
<h2>Pseudo Class</h2>
속성값 : dotted,solid,double<br>
<div class="d1">
<h3 style="background:gold">가상 클래스 영역 1</h3>
마우스 위치에 따른 박스의 스타일 변화
</div>
<div class="d2">
<h3 style="background:gold">가상 클래스 영역 2</h3>
마우스 위치에 따른 박스의 스타일 변화
</div>


마우스를 올렸을때

 

Hidden

앞내용을 넘지 못한다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex09</title>
<style type="text/css">
/*가상클래스*/
div{background-color:blue; height: 100px; overflow: hidden;}
div div{background-color:red; height: 200px; width: 200px; overflow: hidden;}
</style>
</head>
<body>
<div>hello
<div>css</div>
</div>
<h1>다음내용</h1>
</body>
</html>

폰트지정하기

<style type="text/css">
h2,p{ color:red; font-family: "Lucida Console"}
</style>
</head>
<body>
<h2>Group Selector 1</h2>
<p>스타일 지정을 그룹으로 적용</p>
<div><h2>Group Selector 2</h2></div>
</body>

저작자표시 비영리 변경금지

'코딩 공부 > CSS' 카테고리의 다른 글

CSS 예제들  (0) 2022.10.23
CSS Table  (0) 2022.10.22
CSS header session footer등의 구조  (0) 2022.10.21
CSS 예제 (clear, overflow, box-sizing)  (0) 2022.10.20
CSS 예제 (ul, li, border, margin, position)  (0) 2022.10.19

'코딩 공부/CSS' Related Articles

티스토리툴바