본문 바로가기
IT일반과목/HTML5+CSS3

20180911 CSS 개요 및 선택자

어쩌먼 2018. 9. 12. 00:39




@ CSS란?

-> cascading style sheets의 약자

-> 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일 시트

-> 기존 HTML은 다양하게 설계하고 수시로 변경하는데 많은 제약이 

따르기 때문에 이를 보완하기 위해 만들어진 것이 스타일 시트

-> 문서 내용 작성과 꾸미는 부분을 분리하여 내용을 수정해도 

디자인을 바꿀 필요가 없고, 디자인을 수정해도 글 내용을

바꿀 필요가 없어짐

-> 다양한 기기마다 디자인만 따로 적용하고 구동 시킬 수 있음


@ style 과 stylesheet

-> style은 정해진 속성을 입력하여 웹 페이지를 꾸미는 것

-> stylesheet는 웹 페이지에서 반복적으로 쓰이는 style을 모아 놓은 것



스타일 기본 형식


ex)

p { text-align : center; }


p : 선택자

text-align : style 속성

center : 속성 값


※ css를 잘하기 위해서는 선택자를 잘 사용해야 함



@ 내부 스타일 시트

-> <style></style> 내부에 스타일 정보를 저장하는 방법

-> 문서 내부에 스타일 시트를 정의 하고 사용 하게 됨 

(해당 페이지에서 계속 사용)


ex) <style> p {text-align : center; } </style>


@ 외부 스타일 시트

-> <link> 태그를 이용하여 css 파일을 읽어와서 스타일을 적용

-> 외부에서 가져온 것이기 때문에 다른 페이지에서도 호출해서 사용 가능


ex) <link href="css파일경로" rel="stylesheet" type="text/css">


※ rel은 관계 설명


@ 인라인 스타일 시트

-> 태그 내부에 스타일 정보를 지정하는 방법

-> 해당 내부 태그에 정의 한것이기 때문에 해당 태그만 적용


ex) <span style="color:red;">안녕 </span>


-------------------------------------------------

webContent에다가 css라는 폴더만들기

그후 css파일 만들기





@ CSS 선택자


## 선택자의 종류 ##



전체 선택자 : *

태그 선택자 : 태그 (h1,p,li 등)

아이디 선택자 : #아이디명

클래스 선택자 : .클래스명

후손 선택자 : 선택자 선택자

자손 선택자 : 선택자 > 선택자


속성 선택자 : 선택자[속성=값]/선택자[속성~=값]

선택자[속성|=값]/선택자[속성^=값]

선택자[속성$=값]/선택자[속성*=값]


동위 선택자 : 선택자 + 선택자 / 선택자 ~ 선택자


구조 선택자 : 선택자: first-child/선택자: last-child

선택자: nth-child(수열)/선택자: nth-last-child(수열)

선택자: first-of-type/선택자: last-of-type

선택자: nth-of-type(수열)/선택자:nth-last-of-type(수열)


반응 선택자 : 선택자:active / 선택자:hover


상태 선택자 : :checked / :focus


속성 선택자 : :enabled / :disabled


링크 선택자 : :link / :visited


문자 선택자 : ::first-letter / ::first-line

::after / ::before / ::selection


부정 선택자 : 선택자:not (선택자)


※ ID는 하나의 고유한것을 명시 할때 사용, class는 그룹으로 묶어진

것을 명시 할때 사용

(ID는 고유해야 하나 class는 그룹명이기 때문에 중복해서 사용가능)


http://flukeout.github.io/


## 전체 선택자 ##

 -> <html> 태그안에 있는 모든 태그에 적용되는 선택자


기본 형식


* {설정내용;}


ex) *{color:red;}


##태그 선택자 ##

 -> 특정 태그에 적용되는 선택자


기본 형식


태그명 {설정내용;}


※ 여러개의 태그를 선택시에는 ','(쉼표)로 구별하여 작성


ex) p{color:red;}


## 아이디 / 클래스선택자 ##

 -> 아이디 선택자(#) : 태그 속성에 id를 설정하고 id값을 선택자로 하는것

 -> 클래스 선택자(.) : 태그 속성에 class를 설정하고 class값을 선택자로 하는 것




기본 형식


id : #아이디명{설정내용;} -> 태그를 식별하기 위한것

class : .클래스명{설정내용;} -> 묶어서 그룹단위로 말할때 사용된다.



## 기본 속성 선택자 ##

 -> 태그 선택자와 함께 사용하는 선택자로 선택자 뒤에 [ ] 를 사용하여 속성과 속성값을 사용


기본 형식

선택자[속성] {설정내용;}

선택자[속성=속성값] {설정내용;}



<style>

p[name=n1] {color:red;}

p[id=i2] {color:blue;}

p[class=c1] {background:pink;}

</style>



## 문자열 속성 선택자 ##

 -> 특정 문자열을 확인하여 스타일을 적용하는 방식으로 특별한 경우에만 사용


선택자[속성~=값] : 속성값이 특정 값을 단어로 포함하는 태그 선택(띄어쓰기로 구분)


선택자[속성|=값] : 속성값이 특정 값을 단어로 포함하는 태그 선택

"-"로 구분 (-앞의 내용 값이 동일 해야 함)

 -> name이든, class이든 선언시 -로 구성된 것이여야 함



선택자[속성^=값] : 속성값이 특정 값으로 시작하는 태그 선택

선택자 [속성$=값] : 속성값이 특정 값으로 끝나는 태그 선택

선택자 [속성*=값] : 속성값이 특정 값으로 포함하는 태그 선택



ex)

<style> 


p[id^=id] { color : red;}//id로시작하는

p[class$=c1] { background:pink;}//c1으로끝나는

p[class*=p] { font-weight:bold;}//p를 포함하고있는


</style>

<p name="Test 1" id="i1" class="p-class c1"> Test1 글자 입니다 </p>

<p name="Test 2" id="i2" class="class c1"> Test2 글자 입니다 </p>

<p name="Test 3" id="i3" class="class c2"> Test3 글자 입니다 </p>

<p name="Test 4" id="id4" class="class c2"> Test4 글자 입니다 </p>

<p name="Test 5" id="id5" class="class c3"> Test5 글자 입니다 </p>

<p name="Test 6" id="id6" class="class-p c3"> Test6 글자 입니다 </p>




## 후손 선택자 / 자손 선택자 ##

 -> 후손은 내 아래 모든것

 -> 자손은 내 직속 아래



후손 선택자 기본 형식


선택자 후손 선택자 {설정내용;}


자손 선택자 기본 형식


선택자>자손선택자 {설정내용;}


※ 자손의 자손 선택 가능 (선택자>자손>자손>자손...)




<div>

<p>

<span></span>

</p>

</div>



## 동위 선택자 ##

-> 동위 관계에서 뒤에 위치한 태그를 선택할 때 사용



동위선택자a+동위선택자b : 동위 선택자a의 바로 뒤에 있는 한개의

선택자만 선택


동위선택자a~동위선택자b : 동위 선택자a의 뒤에 있는 선택자

b 모두 선택


※ 같은 자손(형제) 끼리는 동위 관계라고 볼 수 있음


ex)

<div>

<h1></h1>

<p></p>

<p></p>

<p></p>

</div>


※ div 입장에서는 h1와 p태그들은 모두 동위 관계 (형제 관계)



## 반응 선택자 ##

-> 사용자의 움직임에 따라 달라지는 선택자


선택자:active -> 사용자가 클릭한 태그 선택

선택자:hover -> 사용자의 마우스가 올라가 있는 태그 선택


기본 형식


선택자:active{설정내용;} -> 클릭했을때

선택자:hover{설정내용;}




## 상태 선택자 ##

-> 입력 양식의 상태에 따라 선택되는 선택자



ex)

input태그:checked -> 체크 상태의 input태그 선택

(체크가 되었다면)


input태그:focus -> 초점이 맞추어진 input태그 선택

(해당 input에 초점이 맞추어 졌다면!)















<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <style>
	p{color:red;}
        #id2{color:cadetblue; background-color: yellow}
        li[class$=s1] {color:darkorchid; background-color: darkgray}
         li[class$=s2] {color:coral;}
        
     
</style>

 <h1>CSS 기본 선택자</h1>
 <p> 선택자란?<br>
 특정한 HTML 태그를 선택할 때 사용하는 기능으로, 태그를 선택하여 원하는 스타일과 기능을 적용할 수 있다.
 </p>
 <hr>
 <h2>모든 선택자</h2>
 <p>HTML 문서 안의 모든 태그를 선택할 때 적체 선택자를 사용할 수 있다.</p>
 <ul>
	<li>테스트1</li>
	<li>테스트2</li>
	<li>테스트3</li>
 </ul>
 <hr>
 <h2>태그 선택자</h2>
 <p>HTML 문서 내에 같은 태그를 모두 선택할 때 사용한다.</p>
 <pre> - p {color : red;} 와 같은 형태로 사용된다.</pre>
 <hr>
 <h2>아이디 선택자</h2>
 <p>HTML 문서 내에 해당하는 아이디 속성의 값을 가진 태그만 선택할 때 사용한다.</p>
 <pre> - #아이디명 {color : blue;} 와 같은 형태로 사용된다.</pre>
 <ol>
	<li id="id1">아이디 선택자 테스트1</li>
	<li id="id2">아이디 선택자 테스트2</li>
	<li id="id3">아이디 선택자 테스트3</li>
	<li id="id4">아이디 선택자 테스트4</li>
	<li id="id5">아이디 선택자 테스트5</li>
 </ol>
 <hr>
 <h2>클래스 선택자</h2>
 <p>HTML 문서 내에 여러 개의 태그를 동일한 클래스명으로 지정하여 선택할 때 사용한다.</p>
 <pre> - .클래스명 {color : purple;} 와 같은 형태로 사용된다.</pre>
 <ul>
	<li class="class1">클래스 선택자 테스트1</li>
	<li class="class2">클래스 선택자 테스트2</li>
	<li class="class1">클래스 선택자 테스트3</li>
	<li class="class2">클래스 선택자 테스트4</li>
	<li class="class1">클래스 선택자 테스트5</li>
 </ul>
 <hr>
    
    
    
    
</body>
</html>




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <style>
     /*  	p{color:red;}
        #id2{color:cadetblue; background-color: yellow}
        li[class$=s1] {color:darkorchid; background-color: darkgray}
         li[class$=s2] {color:coral;}*/
    
        /*
          p:active{color:blue; background-color: yellow;}
    p:hover{font-size:30px; cursor:pointer;}
    p{border:1px solid black;}
        
        */
        
        
        
        div[name*=name] {color:crimson; background: yellow}
        div>h4 {color:black; background-color: red}
        div>ul {color:red; background-color: yellow}
        div>ul>li{background-color: aqua}
        div+div{background-color: coral; color:azure}
        div[id=div-test1]{color:black; background-color: red}
        div:active[id=active-test]{color:aqua; background-color: crimson; width: 200px; height:200px;}
        div:hover[id=hover-test]{color:darksalmon; background-color: crimson; width: 200px; height:200px;}
        input:checked{height:20px;width:20px}
        input:focus{background-color: skyblue;
        border:3px solid blue;}
        option {background-color:greenyellow}
        option:disabled{background-color:crimson; color:aliceblue}
       
    </style>
    
    
    
    
    
    
     <h2>기본 속성 선택자</h2>
 <p>기본 선택자 뒤에 []를 사용하여 속성과 속성값을 사용한다.</p>
 <pre> 선택자[속성=속성값] {설정내용} 의 형식으로 사용된다.</pre>
  <div name='name1' class='div-class'>div 1</div>
  <div name='name2' class='div-class'>div 2</div>
  <div name='name3' class='div-class'>div 3</div>
  <div name='name4' class='class-div'>div 4</div>
  <hr>
  <h2>후손선택자와 자손선택자</h2>
  <p>자손선택자 : 바로 아래의 요소, 후손선택자 : 하위 요소 전부</p>
  <pre> 자손선택자 : 선택자>자손선택자{설정내용} 의 형식으로 사용, 후손선택자 : 선택자 후손선택자{설정내용}으로 사용</pre>
  <div id='test1'>
	<h4>자손입니다</h4>
	<h4>나도 자손입니다</h4>
	<ul id='testul'>리스트
		<li>나는 ul의 자손이면서 동시에 div의 후손입니다.</li>
		<li>나도 ul의 자손이면서 동시에 div의 후손입니다.</li>
	</ul>
  <div>
  <hr>
  <h2>동위선택자</h2>
  <p>동위 관계에서 뒤에 위치한 태그를 선택할 때 사용한다.</p>
  <pre>바로 뒤의 요소 선택시 : 선택자a + 선택자b {설정내용}으로 사용하며, 뒤에 있는 모두를 선택할 때는 선택자a ~ 선택자b {설정내용} 으로 사용된다.</pre>
  <div id='div-test1'>div test1</div>
  <div id='div-test2'>div test2</div>
  <div id='div-test3'>div test3</div>
  <div id='div-test4'>div test4</div>
  <div id='div-test5'>div test5</div>
  <hr>
  <h2>반응선택자</h2>
  <p>자용자의 움직임에 따라 달라지는 선택자</p>
  <pre> 사용자가 클릭한 태그 : 선택자:active{설정내용}, 사용자의 마우스가 올라가 있는 태그 : 선택자:hover{설정내용}으로 사용된다.</pre>
  <div id='active-test'; width="200px"; height="200px";>active 테스트</div><br>
  <div id='hover-test'; width="200px"; height="200px">hover 테스트</div>
  <hr>
  <h2>상태선택자</h2>
  <p>입력양식의 상태에 따라 선택되는 선택자</p>
  <pre> 체크 상태의 input태그 선택 : input태그:checked{설정내용}</pre>
  <input type='checkbox' id='apple' name='fruits' value='사과'><label for='apple'> 사과</label>
  <input type='checkbox' id='banana' name='fruits' value='바나나'><label for='banana'> 바나나</label>
  <input type='checkbox' id='peach' name='fruits' value='복숭아'><label for='peach'> 사과</label>
  <br>
  <pre> 초점이 맞추어진 input태그 선택</pre>
  <label>아이디 : </label><input type="text" id="userid" placeholder="아이디를 입력하세요" autofocus><br>
  <label>패스워드 : </label><input type="password" id="password" placeholder="비밀번호를 입력하세요"><br>
<pre>사용가능한 input태그 선택 : input태그:enable{설정내용}, 사용 불가능한 input태그 선택 : input:disable{설정내용}</pre>
      <h3>당신의 연령대는?</h3>
  <select>
	<option value="10" disabled>10대</option>
	<option value="20">20대</option>
	<option value="30">30대</option>
	<option value="40">40대</option>
	<option value="50">50대</option>
	<option value="60" disabled>60대</option>
  </select>

      </div></div>
</body>
</html> 


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

'IT일반과목 > HTML5+CSS3' 카테고리의 다른 글

20180910 폼 태그  (2) 2018.09.10
20180907 폼태그(input)  (0) 2018.09.07
20180907 멀티미디어태그 (하이퍼링크 위아래위위아래 왔다갔다하기)  (0) 2018.09.07
20180907 멀티미디어태그 (하이퍼링크 a태그)  (0) 2018.09.07
20180907 멀티미디어태그 (오디오 태그, 비디오 태그)  (0) 2018.09.07

'IT일반과목/HTML5+CSS3' Related Articles

티스토리툴바