Web/Css

CSS 선택자

💗 선택자 우선 순위

!important > 인라인 스타일 시트 > 아이디 선택자 > 클래스/속성 선택자 > 태그 선택자 >전체 선택자

 

 

💗 전체 선택자

전체 선택자(Universal Selector)는 *로 선택자이다. 와일드(Wild) 선택자라고도 하며 모든 HTML 태그를 선택한다.

* { 속성: 값; } *{ font-family:"Comic Sans MS"; }
더보기 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>전체 선택자</title>
		<style type="text/css">
			*{ font-family:"Comic Sans MS"; }
		</style>
	</head>
	<body>
		<h1>Web Programming</h1>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

 

 

💗 타입(태그) 선택자

타입 선택자(Type Selector)는 HTML의 특정 태그를 선택하여 스타일을 적용한다.

태그명 { 속성: 값; } h1{ font-family:"Comic Sans MS"; color:green; }
더보기
타입 선택자

Web Programming

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>타입 선택자</title>
		<style type="text/css">
			h1{ font-family:"Comic Sans MS"; color:green; }
		</style>
	</head>
	<body>
		<h1>Web Programming</h1>
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
	</body>
</html>

 

 

💗 아이디(id) 선택자

아이디 선택자(ID Selector)는 특정 id 속성값을 가지고 있는 태그를 선택한다.

id 속성값 앞에 #을 붙여서 아이디 선택자임을 표시

태그명#id명 { 속성: 값; }
#id명 { 속성: 값; }		 #text{ font-weight: bold; }
<div id="text">Have a nice day</div>
더보기
id 선택자 확인
Have a nice day
좋은 하루 되세요
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id 선택자 확인</title> <style type="text/css"> #text{ font-weight: bold; } </style> </head> <body> <div id="text">Have a nice day</div> <div>좋은 하루 되세요</div> </body> </html>

 

 

💗 클래스(class) 선택자

클래스 선택자(Class Selector)는 특정 class 속성값을 가지고 있는 태그를 선택한다.

class 속성값 앞에 . 을 붙여서 클래스 선택자임을 표시

태그명.class명 { 속성: 값; }
.class명 { 속성: 값; }
 .word{color:blue; font-weight:bold;}
<div class="word">이번주 한 주도 화이팅 합시다~~!</div>
더보기
class 선택자 확인
Have a nice day
좋은 하루 되세요.
이번주 한 주도 화이팅 합시다~~!
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>class 선택자 확인</title>
		<style type="text/css">
			.word{color:blue; font-weight:bold;}
		</style>
	</head>
	<body>
		<div class="word">Have a nice day</div>
		<div>좋은 하루 되세요.</div>
		<div class="word">이번주 한 주도 화이팅 합시다~~!</div>
	</body>
</html>

 

참고 id와 class 선택자는 유일한 요소에 스타일을 적용한다.
한문서 내에서 id는 한번만 사용 가능하다.
상단 메뉴바, 하단 정보, 홈페이지 로고 등처럼 유일한 요소들을 선택할 때 사용한다.
클래스는 복수 요소에 스타일을 적용한다.
한 문서에서 여러 번 사용 가능하다.
소제목처럼 반복되는 요소에 사용한다.

 

 

💗 속성 선택자

속성 선택자(Attribute Selector) 특정 속성을 가지고 있거나 특정 값을 가지고 있는 요소를 선택한다.

타입태그뒤에 [속성]을 붙여서 속성 선택자임을 표시

태그명[속성명] { 속성: 속성값; }
 input [type="text"]{ width: 100px; margin-right: 10px; } 
input [type="password"] { width: 100px; margin-right: 10px; }
input [type="submit"] { color:white; font-weight:bold; }
<input type="text" name="id" id="id" /> 
<input type="password" name="pwd" id="pwd" />
<input type="submit" value="로그인" /> 

 

선택자 설명
tag[attr]{속성: 값} "attr" 속성이 포함된 태그를 선택.
tag[attr=value]{속성: 값} "attr" 속성값이 "value"와 일치하는 태그를 선택.
tag[attr~=value]{속성: 값} "attr" 속성값이 "value"를 단어를 포함하는 태그를 선택.
tag[attr|=value]{속성: 값} "attr" 속성값이 "value"이거나 시작하는 태그를 선택.
tag[attr^=value]{속성: 값} "attr" 속성값이 "value"로 시작하는 태그를 선택.
tag[attr*=value]{속성: 값} "attr" 속성값이 "value"을 포함하는 태그를 선택.
tag[attr$=value]{속성: 값} "attr" 속성값이 "value"로 끝나는 태그를 선택.
더보기
속성 선택자 확인
[로그인 화면]
아이디와 비밀번호를 입력하시오

회원가입 
<!DOCTYPE html>
<html>
    <head>
	<meta charset="UTF-8">
	<title>속성 선택자 확인</title>
	<style type="text/css">
		a[target="_blank"] { color: green; } 
		div[class^="first"] { color: red; } 
		div[class$="text"] { font-style:italic;} 
            
		input {border:1px solid black;}
		input[type="text"]{ width: 100px; margin-right: 10px; background-color: #D5D5D5; } 
		input[type="password"] { width: 100px; margin-right: 10px; background-color: gray; }
		input[type="submit"] { color:white; font-weight:bold; background-color: #000; }
	</style>
    </head>
    <body>
	<div class="first_text">[로그인 화면]</div> 
	<div class="second_text">아이디와 비밀번호를 입력하시오</div><br />
	<form name="input" method="get"> 
		<label>아이디</label><input type="text" name="id" id="id" /> 
		<label>비밀번호</label><input type="password" name="pwd" id="pwd" />
		<input type="submit" value="로그인" /> 
		<a href="../member.html" target="_blank">회원가입</a>
	</form>
    </body>
</html>

 

 

💗 가상 클래스 선택자

가상 클래스(pseudo class)는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 가상의 선택자를 지정해서 사용하는 것이다.

가상(Pseudo) 클래스는 클래스, 또는 태그명 선택자 뒤에 콜론(:) 을 붙여서 표시하고 스타일을 설정 할 수 있다

태그명:패턴{ 속성: 속성값 } p:first-letter{ font-size: 25px; background-color: gray; color:white; font-weight:bold; }
h1:before{ content: "☆"; color: blue; }
h1:after{ content: "★"; color: blue; }
<h1>Famous Saying</h1>
<p>The world is a beautiful book, but of little use to him who cannot read it.</p>

 

분류 패턴 설명
문자 블록 tag : first-line{속성: 값} 태그의 첫번째 라인을 선택
tag : first-letter{속성: 값} 태그의 첫번째 문자를 선택
tag : first-child{속성: 값} 태그의 첫번째 자식 요소를 선택
tag:  nth-child(n){속성: 값} 태그의 odd/even/n번째 요소를 선택
콘텐츠 tag : before{content: 값;} 선택한 태그 앞에 지정한 콘텐츠를 삽입
tag : after{content: 값;} 선택한 태그 뒤에 지정한 콘텐츠를 삽입
하이퍼 링크 tag : link{속성: 값} 하이퍼링크 태그에 방문하지 않았을 경우
tag : visited{속성: 값} 하이퍼링크 태그에 방문했을 경우
마우스 tag : hover{속성: 값} 마우스 커서가 태그에 올라와 있는 동안
tag : active{속성: 값} 태그를 클릭하였을 때
tag : focus{속성: 값} 태그에 포커스가 머물러 있는 경우
더보기 
<!DOCTYPE html>
<html>
    <head>
	    <meta charset="UTF-8">
	    <title>가상 클래스 선택자 확인</title>
	    <style type="text/css">
		    p:first-letter{ font-size: 25px; background-color: gray; color:white; font-weight:bold; }
		    h1:before{ content: "☆"; color: blue; }
		    h1:after{ content: "★"; color: blue; }
	    </style>
    </head>
    
    <body>
	    <h1>Famous Saying</h1>
	    <p>The world is a beautiful book, but of little use to him who cannot read it.</p>
    </body>
</html>

 

 

💗 후손(하위) 선택자 / 자식 선택자

1) 후손(하위)선택자는 특정 태그의 후손(하위) 태그를 선택한다

2) 자식 선택자(Child Selector)는 특정 태그의 자식 태그를 선택한다

선택자 선택자 { 속성: 속성값 }
 #header h4{ color: green; }
#footer > h4{ color: blue; }    /**자식선택자는 자식태그 아래의 손자태그는 해당 X**/
<div id="header">        <div class="text">
<h4>HTML</h4>           <h4>HyperText Markup Language</h4>   </div></div>

<div id="footer">        /**<div class="text">
<h4>CSS</h4>             <h4>Cascading Style Sheets</h4>**/   </div></div>

 

선택자 설명

1. 후손(하위) 선택자는 자식과 손자 모두 해당한다. 형식은 선택자와 선택자 사이에 공백이 포함되어야 한다.
2. 자식 선택자는 자식 태그 아래인 손자 태그는 해당되지 않는다.
tag1 tag2 tag1 태그의 후손인 tag2 태그를 선택
tag1 > tag2 tag1 태그의 자식인 tag2 태그를 선택
더보기
후손(하위) 선택자와 자식 선택자 확인 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>후손(하위) 선택자와 자식 선택자 확인</title>
		<style type="text/css">
			#header h4{ color: green; }
			#footer > h4{ color: blue; }
		</style>
	</head>
	<body>
		<div id="header">
			<h4>HTML</h4>
			<div class="text">
				<h4>HyperText Markup Language</h4>
				의 약어로 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어이다.
                </div>
		</div>
		<div id="footer">
			<h4>CSS</h4>
				<div class="text">
					<h4>Cascading Style Sheets</h4>
					의 약어로 HTML이 정보를 표현한다면 CSS는 HTML을 시각적으로 꾸며주는 역할을 한다.
				</div>
		</div>
	</body>
</html>

 

 

💗 형제 선택자 / 인접 형제 선택자

1. 형제 선택자는 특정 태그의 형제 태그를 선택한다

2. 인접 형제 선택자는 특정 태그의 형제 태그 중 첫번째 태그를 선택한다.

예를 들어 선택자 A + 선택자 B인 경우 선택자 A 바로 뒤에 위치하는 선택자 B를 선택한다.

선택자 ~ 선택자 { 속성: 속성값 }
선택자 + 선택자 { 속성: 속성값 }		 h1+h2{ color: red;}
h1~h2{ background-color: yellow;}
h1~h2:hover{ color: blue;}
<h1>Have a nice day</h1>
<h2>Have a nice day</h2>
<h2>Have a nice day</h2>
<h3>Have a nice day</h3>
<h2>Have a nice day</h2>
더보기 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>형제 선택자와 인접 형제 선택자</title>
		<style type="text/css">
			h1+h2{ color: red;}
			h1~h2{ background-color: yellow;}
			h1~h2:hover{ color: blue;}
		</style>
	</head>
	<body>
		<h1>Have a nice day</h1>
		<h2>Have a nice day</h2>
		<h2>Have a nice day</h2>
		<h3>Have a nice day</h3>
		<h2>Have a nice day</h2>
	</body>
</html>

 

 

💗 그룹 선택자

선택자, 선택자 { 속성: 속성값 } h1, div{ color: green; font-size:25px; font-weight: bold; font-family: "나눔고딕"; }
<h1>보두앵(Baudjuin)</h1>
<div>성공하려고 아무리 열심히 노력해도 실패에 대한 ...</div>
더보기 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>그룹 선택자 확인</title>
		<style type="text/css">
			h1, div{ color: green; font-size:25px; font-weight: bold; font-family: "나눔고딕"; }
		</style>
</head>
	<body>
		<blockquote>
			<h1>보두앵(Baudjuin)</h1>
			<div>성공하려고 아무리 열심히 노력해도 실패에 대한 두려움이 마음에 가득하다면, 노력하지 않게 되고 정진이 허사가 되어 성공은 불가능해질것이다.</div>
			<p>No matter how hard you work for success if your thought is saturated with the fear of failure, it will kill your efforts, neutralize your endeavors and make success impossible.</p>
		</blockquote>
	</body>
</html>
저작자표시

'Web > Css' 카테고리의 다른 글

CSS 적용법  (0) 2022.04.24

티스토리툴바