13개정도가 추가되었다. 많이 사용되는 것은 4,5개 정도.
태그뒤에 대괄호([ ]) 를 사용한다.
^ $ * 유사클래스 (특정의 문자열을 포함하면 일치하지 않아도 타겟한다.)
아래 예제를 두고 설명한다.
<div class="box1">
<ul>
<li class="hana dul set">배분 대표사업의 핵심 브랜드화</li>
<li class="net daseot yuseot">창의적 배분구조/사업/플랫폼의 인큐베이팅</li>
<li class="ilgop yudeop ahop">공익단체 역량의 집중 강화(교육,컨설팅)</li>
<li class="yul yulhana yuldul">사회이슈에 대한 전자구적 인식과 대응</li>
<li class="yulset yulnet yuldaseot">창의적 참여적 시민기부모델 개발</li>
</ul>
</div>
<div class="box2">
<p>창립 10주년 기념 사이트 "나눔으로 함께 만든 10년"사이트 오픈</p>
<address>서울시 강남구 역삼동 000-000번지 tel:00-000-0000</address>
[^]
프래그래밍에서 프론트 앞이라는 뜻을 가지고 있다
단어를 포함하고 있으면 적용된다.
클래스 이름을 포함하는 요소
[$]
프로그래밍 에서 end 끝이라는 뜻을 가지고 있다.
앞자리가 아닌 뒷자리에 단어가 일치하면 적용된다
[*]
모든 이라는 뜻을 가지고 있다.\
앞에 있던 뒤에 있던 중간에 있던 모두 포함된다
ㅡㅡㅡㅡㅡㅡㅡㅡㅡ
child / of-type 에대해서.
태그 :nth-child(숫자) / 태그 :nth-last-child(숫자)
노드차일드
해당되는태그에 순번을 타겟할 수 있다.
이게 없을때는 클래스를 잡아줘야 했다.
밑에서부터 순번을 타겟할 수 있다.
사용하면 헷갈릴 여지가 있다. 클래스 네임은 정확하게 잡는게 좋다. 타입시리즈를 잡는게 더 낫다.
j쿼리에서 차일드 시리즈가 스크리트에 추가된다. 스크립트에는 타입이 없다.css에만 존재. 그해서 정확히 알아야한다.
태그 :last-child / 태그:first-child
보통 처음과 마지막을 타켓하는 경우가 많기때문에 아예 처음과 마지막을 타겟하는 태그도 만들어졌다.
태그 li:nth-of-type(숫자) / 태그:nth-last-of-type(숫자)
li:first-of-type / 태그 li:last-of-type
child 시리즈와 of-type 을 잘 구분해야 한다.
개념을 알면 타입을 더 많이 사용한다.
해당태그에 동일종류의 태그만 나열되어 있을 때는 상관없지만 다른 태그가 섞여 있으면 답이 달라집니다.
태그가 섞여있지않으면 결과는 같다.
태그가 섞여 있는 경우가 더 많다.
여러계층의 태그가 프로그래밍 되어있는 경우
child 태그는 전체 계층을 카운팅하여 적용한다.
of-type 태그는 타겟한 태그만 카운팅하여 적용한다..
차일드의 단점을 보완해서 나중에 타입태그가 나왔다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
:only-child
잘 사용하지 않는다.
차일드 시리즈는 다른 태그를 다 따진다. 타겟한 태그가 only, 혼자 있을 때 만 잡는다. 같은 종류의 태그가 있으면 적용되지 않는다.
유일한 자식이면 선택.
* 외동아들, 독자일경우만. 조건 if문에서 간혹 사용하게 된다.
:only-of-type
타입 시리즈는 해당태그만 계산한다. 같은 종류의 태그가 있어도 적용 같은 종류의 태그가 있으면 적용되지 않는다.
태그1:not(태그2)
태그1과 태그2가 존재하는 조건에서 태그2가 아닌태그를 잡는다
더 편하게 잡을 수 있는 태그가 있어서 거의 사용하지 않는다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
테이블 처리- (odd:홀수, even:짝수)
태이블 태그 리스트 태그에 많이 사용한다.
자바 스크립트에도 추가되었다. ex) QnA
백그라운드 칼라를 교대로 적용시킨다.
ex)
태그:nth-child(odd) {background:#eee;}
태그:nth-child(even) {background:#666;}
클래스를 덜 사용하기 위해서 만들어 졌다.
프로그래밍 방법은 다양하지만 자주 사용되는 것은 이것이 더효율적이니까.
태그:nth-of-type(odd) {background:#eee;}
태그:nth-of-type(even) {background:#666;}
차일드는 다른 태그도 카운팅 개판5분전된다
of-type은 적용한 태그만 카운팅.
보통리스트나테이블에 사용하기 때문에 계층이 섞이는 일이 적다. 사용되는 곳을 보면.
n시리즈
배수. 4n 은 4배수로 적용된다.
n은 곱하기 0부터 적용되는 배수
테이블을 쓸 때 유용하다.
:nth-of-type(4n) :nth-of-type(4n+1)
테이블 컬러 맞출때 사용한다.이게 없으면 클래스 이름을 다주어야 한다.
열마다 색깔이 들어가면...
j-query에 그대로 흡수된다.
차일드 타입 시리즈가 활용이 많이 된다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
target
스크립트로 구현되야 하는 것을 target 선택차로 만들었다.
탭기능 많이 사용하기때문에... 자바스크립트프로그래밍이 되어있는 태그이다. 스크립트 복잡한 태그이다.
정석코드로 짜면 복잡하다.
태그 {dispaly:none}
태그 :target {dispaly:block}
display none 안보이게한다,
display block 보인다.
기능만 나왔다고 ok하면 안된다.
target는 접근성이 좋지 않다.
직접짜자.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
scoped 지원 브라우져가 없으며 곧 사라질 예정
Media Query
모바일과 반응형의 주인공이 될것 같다. 뒷단에 심화해서 설명
미디어 쿼리는 웹을 접속하는 기기의 화면 해상도에 따라 각각 다른 CSS를 적용해 주는 기능.
같은 Screen이라도 해상도에 따라 CSS를 다르게 지정해 줄 수 있게 되었다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡ
color
*이전버전 => RGB
- red, green ...
- #00 00 00 (웹안전컬러 #000
- rgb (0~255, 0~255, 0~255,)=>이것이업그레이드되었다.
1)rgba([r],[g],[b],[a]) / hsla([h],[s],[l],[a]) => 색값에 투명도(opacity)를 처리하는 색값
a= alpha
rgba([r],[g],[b],[a]);
r: 빨간색의 수치 0~255
g: 녹색의 수치 0~255
b: 파란색의 수치 0~255
a: 투명도 0~1
hsla([h],[s],[l],[a]);
h: 색상 값 0~360
s: 채도 0~100%
l: 명도 0~100%
a: 투명도 0~1
색 자체에 투명도
hsla 값은 잘 사용하지 않는다.
- 프로그램에서 0은 생략해서 사용한다. ex) .1 = 0.1, .4 = 0.4
-배경뿐 아니라 모든 색상속성을 지정하는 곳이면 어디든 사용 가능 (color, background-color, border-color)
opacity
박스 전체에 투명도를 줄 수 있다.
hover 효과를 줄 때 많이 사용된다.
opacity: fx ;
요소의 투명도 지정속성 값
fx: 요소의 투명도 지정 0 ~ 1 사이 값
opacity 무겁다.
hover은 a태그에만 사용할 수 있었는데 모든 태그에게 열어주었다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
gradient
단계적 색 적용.
모든 브라우져 지원한다.
포토샵에는 5가지 종류가 있다.
웹에는 *라인 그라이언트 *원형 그라이언트
background-color 에만 적용된다 글자나 border에는 적용되지 않는다
확장 접두사 밴더 프리픽스 =브라우져를 돌리는 엔진이름.
잘못이해하거나 모르고 사용시 낭패...
지금은 많이 개선되었다
webkit = 크롬 사파리
moz - 모질라
o - 오페라
익스 - ms
확장 접두사를 앞에 써줘야 브라우져에 맞게 돌아가더라.
문제가 많아서 사이트에서 카피해서 사용할 수 있게 만들었다.
www.colorzilla.com/gradient-editor/
글자에도 그라디언트를주고싶은 사람들이 많다.
글자 처음과 마지막에 지정함으로 그라이언트 효과를 줄 수 있다.
-webkit-background-clip: text;
background-clip: text;
color: transparent;
익스는 지원하않는다
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
border
border-radius
둥근 모서리를 사각형 만들기
네 꼭지점에 곡률을 준다.
border-radius:[length];
Box Model 외각선의 곡률 지정
네 꼭지점에 모두 곡률을 준다.
border-top-left-radius / border-top-right-radius / border-bottom-left/ border-bottom-right으로 개별 지정 가능하다
이제 최진 브라우져는 벤더를사용하지 않아도 지원이 된다.
문제는 다 구버전이 있다.
벤더를 사용하지 않아도 브라우져가 해석할 수 있게끔 스크립트를 짜서 제공하고 있다.
그래서 벤더를 사용하지 않아도 된다.
http://leaverou.github.io/prefixfree/
파일을 다운받는다.
<style> 태그아래 <srcipt>태그로 연결해준다.
최근에 생기는 태그들은 벤더를사용해야 한다.
border-image
이미지에도 적용도니다
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
background
font&text