CSS3 01

2017. 2. 18. 22:44Work/CSS

728x90

CSS3 선택자 기본

<style></style>

// 여러가지 선택자가 있음 *, 태그, #아이디, .클래스 등등

// 선택자는 직접 선언 할 수 있음

ex)  ro.classor{background-color: yellow;}

<ro class="classor">Create Tag</ro>

- 클래스 선택자 & 다중 선택자 지정

ex) .select{color: fuchsia;}

     .idclassed{background-color: red;}

<h2 class="select idclassed">CSS3 Selector Basic</h2>

- 아이디 선택자

ex) #box1{ width:80px; height: 80px; margin:0px; padding:0px; background-color: cyan}

<div id="box1">[0,0]</div>

-> 아이디 선택자는 중복이 가능 하다.

ex) <h1 id="box1"></h1> <h2 id="box1"></h2> ...

- 속성 선택자

선택자[속성], 선택자[속성=값][속성=값]

ex) input[type=text]{background: red;}

           input[type=password]{background: green;}

     input[type=ro]{background: black;}

     <input type="text">

     <input type="password">

     <input type="ro">

- 문자열 속성 선택자

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

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

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

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

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

ex)  img[src$=jpg]{border : 3px solid blue;}

<img src="weare.jpg">

- 후손 선택자 & 자손 선태자

<body>

<!--후손-->

<ul>

<!--자손-->

        <li class="select">asddd</li>

        </ul>

</body>

-- 후손 선택자

#roing h6{color:deepskyblue;}

<div id="roing">

        <h6>후손 선택자</h6>

        <h6>후손 선택자</h6>

        <div>

            <h6>후손 선택자</h6>

            <h6>후손 선택자</h6>

        </div>

    </div>

-- 자손 선택자

#roinged > h6{color:darkviolet;}

<div id="roinged">

        <h6>자손 선택자</h6>

        <h6>자손 선택자</h6>

        <div>

            <h6>자손 선택자</h6>

            <h6>자손 선택자</h6>

        </div>

    </div>

- 동위 선택자

- 선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택

A + B {background-color: chartreuse;}

- 선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 선택

A ~ B {background-color: coral;}

<A>Step's A</A>

<B>Step's B</B>

<A>Step's A</A>

<B>Step's B</B>

<B>Step's B</B>

<B>Step's B</B>

- 반응 선택자

- :active : 사용자가 마우스로 클릭한 태그

act:active{color: deeppink;}

- :hover : 사용자가 마우스를 올린 태그

hov:hover{color: aqua;}

<hov>hover set</hov>

<act>active set</act>

- 상태 선택자

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

input[type=checkbox]:checked + div{height: 50px;}

<input type="checkbox" />

    <div>asdasd</div>

- :focus : 초점이 맞추어진 input 태그 선택, 웹 페이지 하나당 한개의 focus 유지됨

input:focus{background-color: orangered;}

- :enabled : 사용 가능한 input 태그 선택

input:enabled{background-color: deepskyblue;}

<input enabled>

- :disabled : 사용 불가능한 input 태그 선택

input:disabled{background-color: darkred;}

<input disabled>

- 구조 선택자

-- 일반 구조 선택자

--- :first-child : 형제 관계 중에서 첫 번째에 위치하는 태그 선택

li:first-child{border-radius: 10px 0 0 10px;}

--- :last-child : 형제 관계 중에서 마지막에 위치하는 태그 선택

li:last-child{border-radius: 0 10px 10px 0;}

--- :nth-child(수열) : 형제 관계 중에서 앞에서 수열 번째에 태그를 선택

li:nth-child(2n){background-color: #FF0003;}

--- :nth-last-child(수열) : 형제 관계 중에서 뒤에서 수열 번째에 태그를 선택

li:nth-last-child(2n+1){background-color: #800000;}

<ul>

        <li>First</li>

        <li>Second</li>

        <li>Third</li>

        <li>Fourth</li>

    </ul>

-- 형태 구조 선택자

--- :first-of-type : 형제 관계 중에서 첫 번째로 등장하는 특정 태그 선택

h1:first-of-type{color:red;}

--- :last-of-type : 형제 관계 중에서 마지막으로 등장하는 특정 태그 선택

     h2:last-of-type{color:blue;}

--- :nth-of-type(수열) : 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그 선택

h3:nth-of-type{color:fuchsia;}

--- :nth-last-of-type(수열) : 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그 선택

h4:nth-last-of-type{color:fuchsia;}

<h1>Head 1</h1>

    <h2>Head 2</h2>

    <h3>Head 3</h3>

    <h4>Head 4</h4>

    <h4>head 4</h4>

    <h3>head 3</h3>

    <h2>head 2</h2>

    <h1>head 1</h1>

- 문자 선택자

-- 시작 문자 선택자

--- ::first-letter : 첫 번째 글자를 선택

p::first-letter{color:brown;}

--- ::first-line : 첫 번째 줄을 선택

p::first-line{color:royalblue;}

-- 전후 문자 선택자

--- ::after : 태그 뒤에 위치하는 공간을 선택

p::after{content:counter(rint) ".";}

--- ::before : 태그 앞에 위치하는 공간을 선택

p::before{content:counter(rint) ",";}

<p>Flet Set</p>

 <p>Fline Set</p>

- 반응 문자 선택자

-- ::selection : 사용자가 드래그한 글자를 선택

Draging::selection{background: black; color:red;}

 <Draging>Drag Line</Draging>

- 링크 선택자

-- :link : href 속성을 가지고 있는 a 태그 선택

a:link::after{content : '-' attr(href);}

-- :visited : 방문했던 링크를 가지고 있는 a 태그 선택 

a:visited{color:aqua;}

 <a href="http://www.w3.org/">W3C</a>

- 부정 선택자

-- :not(선택자) : 선택자를 반대로 적용

input:not([type=password]){background: red;}

  <input type="password">

  <input type="text">

<style> 

        h1{color:red; background-color: orange;}

</style>

h1(선택자{color(스타일 속성):red(스타일값;}

-> style 태그 내부에 사용

728x90

'Work > CSS' 카테고리의 다른 글

CSS3 06  (0) 2017.02.23
CSS3 05  (0) 2017.02.23
CSS3 04  (0) 2017.02.22
CSS3 03  (0) 2017.02.22
CSS3 02  (0) 2017.02.21
CSS3 01  (0) 2017.02.18