안녕하세요.
이번에는 CSS 선택자에 관하여 정리합니다.
우선 HTML 작성시 <head></head>사이에 css 스타일을 적용합니다.
스타일 적용 방식은 3가지로 나뉘어 지게 됩니다.
1. 링크 스타일 방식 < link href ="./my.css" rel="stylesheet" >
- 홈페이지 제작시 하나의 css파일을 만들고 주소로 불러 오는 방식입니다.
2. 임베디드 스타일 방식 < style type="text/css" >
h1{color:red;font-size:100px } < /style >
- html 작성 페이지 <head></head> 부분에 직접 css 스타일을 입력하는 방식입니다.
3. 인라인 스타일 방식 < h1 style="color:blue; font-size:100px" >
- html 코드안에 직접 스타일을 포함 시키는 방식입니다.
1번 방식이 가장 많이 사용되며 보통 common 폴더를 만들고 그안에 css파일과 js파일(자바스크립트) 파일을 같이 넣게 됩니다.
css 파일을 어떤 스타일 방식인지 이름을 알 필요는 없습니다.
단지 css 파일을 따로 만들어서 연결할수도 있고, html 파일 만들때 head안에 만들어도 되며 아니면 그냥 html 코드안에 만들어 넣어도 되는구나! 정도만 기억하시면 됩니다.
선택자
먼저 css는 선택자{속성:값;}을 기본 형식으로 가지며 속성이 많을 경우
세미콜론(;) 으로 구분합니다
선택자는 html 코드의 어떤 부분을 선택하여 어떻게 변경을 하겠느냐 정도로 이해하시면 됩니다.간단합니다.
선택자는 기본선택자와 응용 선택자로 나뉘어 집니다.
- 기본 선택자
1. 태그 선택자 : html을 구성하는 태그를 바로 선택하여 동일한 효과를 입힐때 사용 합니다.
div{속성:값;}
2. 아이디 선택자 : 태그안에 아이디를 설정하여 선택되어진 아이디만 효과를 나타낼때 사용합니다.
하나의 html의 하나의 id만 사용하게 됩니다.
#아이디명{속성:값;}
3. 클래스 선택자 : 태그안에 클래스를 설정하고 선택되어진 클래스만 효과를 나타낼때 사용합니다.
class는 반복 사용이 가능합니다.
.클래스명{속성:값;}
4. 전체 선택자 : 키보드 숫자 8위의 *로 문서내 모든 태그를 선택하게 됩니다.
*{속성:값;}
- 응용 선택자
html 코드를 작성하면서 코드 한줄한줄에 전부 id나 class를 주는 것도 일입니다.
그부분을 해결하는 것이 응용선택자인데 우선 주로 사용되는 것만 보겠습니다.
1. 가상선택자 : 마우스의 움직임 혹은 클릭에 따라 반응하는 선택자입니다.
먼저 a태그를 잠시 설명드리면 링크를 걸어주는 태그라고 생각하시면 됩니다.
1> a:link : a태그의 방문하지 않은 링크 스타일을 선택합니다.
2> a:hover : a태그가 걸린 글자에 마우스를 올릴때를 선택합니다.
3> a:visited : a태그를 클릭하고 난후를 선택 (즉 방문후 링크의 변화) 합니다.
4> a:active : 마우스를 클릭하려고 누르고 있을때를 선택합니다.
2. 자식선택자 : 태그의 후손(자식) 객체를 선택하게 합니다.
예문 <ul class="nav">
<li><a href ="#">가나다</a></li>
<li><a href ="#">나다라마</a></li>
<li><a href ="#">다라마바사</a></li>
<li><a href ="#">다라마바사아</a></li>
<li><a href ="#">다라마바사자차</a></li>
<li><a href ="#">다라마바사아자차카타</a></li>
</ul>
1> 부모>자식 : 직계자손의 자식들을 선택하게 됩니다.
ex> .nav>li{속성:값;} : 클래스 명이 nav인 바로 아래의 li 태그를 선택
.nav li {속성:값;} : 클래스 명이 nav인 아래의 모든 li 태그를 선택
li태그 아래 또다른 자식 li가 있는 경우 같이 선택합니다.
2> 구조선택자
- ul:first-child : ul태그 아래의 첫번째 자식을 선택
- ul:last-child : ul태그 아래의 마지막 자식을 선택
- ul:nth-child(수열) : ul태그 아래의 (수열)번째 자식을 선택합니다.
3. 형제 선택자
1> 인접형제 선택자 : a+b : a바로 뒤에 있는 b를 하나 선택
2> 일반형제 선택자 : a~b : a바로 뒤에 있는 b를 모두 선택
4. 가상클래스 선택자
1> li:nth-child(odd) : 태그안의 홀수 번째를 선택
2> li:nth-child(even) : 태그안의 짝수 번째를 선택
3> p:first-line : p태그안의 내용이 많은 경우 p태그안에 첫번째 라인을 선택
예문
<h1>서울특별시</h1>
<p>대한민국</p>
4> h1:before{content:"대한민국 "; color:red;} : h1태그앞에 대한민국을 삽입 선택
p:after{content:"만세"; color:red; font-size:20px} : p태그 뒤에 만세를 삽입 선택
선택자 역시 위의 작성 글처럼 다닥다닥 나열해서는 눈에 안들어오죠
이해도 잘안되구요 ...... OTL
그냥 이런게 있다 정도로 보시고 역시 소스를 같이 봐야 쉽게 이해가 됩니다
선택자가 중요한것은 html문서를 작성시 css로 디자인을 한다는 이유도 있지만
자바스크립트(JQuary)를 작성시에도 같은 선택자가 사용된다는 점때문에
반드시 알아두셔야 한다는 것입니다.
간단하게 선택해서 적는다는 것이 생각보다 길어졌네요 ~
글로만 적다보니 봐도 이해가 잘 안가시죠 역시 코드를 같이 보면 이해가 빠른데
다음 장에서는 하나하나의 선택자를 코드와 같이 작성해보도록 하겠습니다.
선택자는 중요합니다 반드시 알아두세요 ~
'프로그램언어 > HTML | CSS' 카테고리의 다른 글
| HTML 기본 태그 (0) | 2017.02.01 |
|---|---|
| CSS 의 text 속성값 (0) | 2017.02.01 |
| CSS의 font 속성 값 (0) | 2017.01.31 |
| CSS 선택자 소스와 같이 (0) | 2017.01.25 |
| HTML5 언어에 대하여 (0) | 2017.01.24 |
