본문 바로가기
반응형

css124

[css3] :last-of-type 가상 클래스 [css3] :last-of-type 가상 클래스 어젠 :first-of-type 선택자를 배웠습니다. :first-of-type 가상 클래스 :first-of-type은 같은 유형의 첫번째 형제를 선택합니다. :last-of-type은 같은 유형의 맨 마지막 형제를 선택 합니다. :nth-last-of-type(1)와 정확히 일치 합니다. :nth-last-of-type 가상 클래스 :nth-last-of-type(n)은 마지막부터 계산하여 같은 유형의 n번째 형제를 선택하는 선택자. 예: 내용1 내용2 메뉴로 가기 p:last-of-type{color: red;} 혹은 p:nth-last-of-type(1){color:red;}라고 하면 내용2가 빨간색 글씨로 표시 됩니다. ▶html/css 작성 예.. 2014. 11. 18.
[css3] :first-of-type 가상 클래스 [css3] :first-of-type 가상 클래스 날씨가 많이 쌀쌀해졌네요. 불과 며칠 전에 패딩을 입어야 하나 말아야 하나 고민했는데 이제는 아무렇지 않게 걸치고 다닐 수 있는 계절입니다.^^ 모두들 감기 조심하시고요.... 요즘엔 계속 선택자에 관한 글만 쓰고 있어서, 지루하실 수도 있을 것 같아요.ㅎㅎ 전 이렇게 정해진 주제에 따라 글을 쓰는 게 편하긴 해요. 글감을 따로 걱정할 필요가 없으니까요.... 그리고, 언제는 써야 할 주제니까요.ㅎ 이제 남은 선택자는 서너개 정도예요. 선택자가 끝나고 나면 좀 더 흥미 있을 주제를 다루어 볼게요^^ 오늘 배울 선택자는 :first-of-type 가상 클래스입니다. 지난 시간에 배운 :nth-child와 :nth-of-type와 비슷한 부분이 있습니다. .. 2014. 11. 17.
[css3] :nth-last-of-type 가상 클래스 [css3] :nth-last-of-type 가상 클래스 :nth-last-of-type 가상 클래스는 :nth-of-type 와 한 가지만 빼고 동일 합니다. :nth-of-type() 가상 클래스 잠깐 복습해 보면 :nth-of-type은 같은 유형의 n번째 형제인 요소를 선택합니다. :nth-last-of-type(n)은 맨 마지막부터 순서를 계산합니다. n값은 다른 가상 클래스와 마찬가지로 정수, 키워드, 공식이 들어갑니다. 정수- 음수, 양수, 0 예> :nth-last-of-type(5) 맨 마지막부터 계산하여 5번째 형제만을 선택함. 키워드- even (짝수), odd(홀수) 예> :nth-last-of-type(even) 맨 마지막부터 계산하여 홀수 형제를 선택함. 공식-an+b a와 b .. 2014. 11. 14.
[css3] :nth-last-child 가상 클래스 [css3] :nth-last-child 가상 클래스 :nth-last-child 가상 클래스 :nth-child 와 한 가지만 빼고 동일 합니다. :nth-child (n)는 같은 부모의 n번째 자식인 요소라면 :nth-last-child(n)는 맨 마지막에서부터 순서를 계산 합니다. n값 역시 키워드, 정수, 공식이 들어갑니다. 키워드 - even, odd 정수 - 음수, 양수, 0 공식- (an+b) a와 b는 정수값(양수, 음수, 0) a는 선택할 숫자 간격, b는 선택할 시작 숫자값 n은 카운트 입니다. 첫번째는 0으로 시작하여 1, 2, 3 순으로 카운트 됨. an+b는 (a x n)+b 라고 풀어 이해하면 됩니다. (2n+3) 라고 했을 때 컴퓨터는 아래와 같이 계산합니다. (2 x 0) +.. 2014. 11. 13.
[css3] :nth-of-type() 가상 클래스 [css3] :nth-of-type() 가상 클래스 지난 시간에 :nth-child() 가상 클래스를 배웠습니다. :nth-child() 가상 클래스는 부모의 n번째 자식인 요소를 선택하는 선택자입니다. :nth-of-type()은 같은 유형의 n번째 형제를 선택합니다. n값에는 :nth-of-type 가상 클래스 에서 배운 것처럼 동일 합니다. 키워드, 정수, 공식(an+b 같은)이 들어갈 수 있습니다. 1. 키워드 - even은 짝수값, odd는 홀수값 2. 정수- 양수, 음수, 또는 0 3. 공식 (예: an+b) ▶브라우저 지원: ie 9.0+, chrome 4.0+, firefox 3.5+, safari 3.2+, opera 9.6+ :nth-child와 :nth-of-type 가상 클래스는 때.. 2014. 11. 12.
[css3] :nth-child() 가상 클래스 [css3] :nth-child() 가상 클래스 가상 클래스 중 구조적 가상 클래스를 배워보고 있습니다. 구조적 가상 클래스란 문서 구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택 하게 해주는 선택자입니다. :nth-child() 가상 클래스는 문서 구조에서 부모의 n번째 위치에 있는 자식을 선택합니다. n값에는 키워드, 정수, 공식(an+b 같은)이 들어갈 수 있습니다. 1. 키워드 - even은 짝수값, odd는 홀수값 예> li:nth-child(even){color:red;} 목록 중 2,4,6 등의 짝수 값이 빨간색으로 칠해짐 2. 정수- 양수, 음수, 또는 0 가능 예> li:nth-child(5){color:red;} 목록 중 5번째만 빨간색으로 칠해짐 3. 공식 (예: an+b) .. 2014. 11. 11.
[css3] :root 가상 클래스 [css3] :root 가상 클래스 오늘부터는 가상 클래스 중 구조적 가상 클래스를 배워 보겠습니다. 우선, 가상 클래스란? +, > 같은 조합자나 id, class 같은 단순 선택자로 선택할 수 없는 것들을 선택하게 해주는 선택자입니다. 가상 클래스는 요소의 속성, 상태, 상대적인 위치 등에 기반하여 요소를 선택하게 해줍니다. 구조적 가상 클래스(structural pseudo-classes)란? 구조적 가상 클래스란 문서 구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택 하는 선택자 [구조적 가상 클래스 종류] :root :only-child :nth-child(n) :nth-last-child(n) :first-of-type :last-of-type :only-of-type :nth-of-t.. 2014. 11. 10.
[css2] :lang 가상 클래스 [css2] :lang 가상 클래스 :lang() 가상클래스는 요소가 특정 언어를 사용할때 적용됩니다. 주로 언어에 따라, 글꼴, 글꼴 크기 등을 다르게 적용하기 위해 사용 합니다. :lang()의 괄호 안에는 언어코드가 들어갑니다. :lang(en)처럼... 언어 코드는 html4.0명세에 지정되는데 보통 2 문자의 약자입니다. 예: fr=French, ca=Canadian, de=German, en=English, kr=Korean 문서의 언어는 lang=" " 속성이나 , 요소 정보, 또는 http header같은 프로토콜의 조합으로 결정됩니다 ▶ :lang 가상클래스 문법 :lang(언어 코드){속성:속성값;} ▶ 브라우저 지원 여부 ie8.0+, chrome 4.0+, ff 2.0+, safar.. 2014. 11. 7.
[css3] :checked 가상 클래스 [css3] :checked 가상 클래스 :checked 가상 클래스는 요소가 checked (선택) 상태일 때 적용하는 선택자입니다 그리고 요소에 적용할 수 있습니다. [html] option 태그 [html] input type 속성 ▶문법 :checked {속성:속성값;} 예> option:checked {color: red;} ▶브라우저 지원: ie 9.0+, chrome 4.0+, ff 3.5+, safari 3.2+, opera 9.6 ▶html/css 작성 예를 보겠습니다~ html option 요소 20대 30대 40대 Type = "checkbox" 과일 해조류 육류 Type = "radio" Internet Explorer Google Chrome FireFox css option:ch.. 2014. 11. 6.
[css3] :enabled :disabled 가상 클래스 [css3] :enabled :disabled 가상 클래스 오늘 배울 부분은 가상 클래스인 :enabled 와 :disabled 선택자 입니다. 우선 두 단어의 뜻을 볼게요 *enabled : 가능한, 이용할 수 있는 *disabled : 이용 불가능한, 비활성화 된 :enabled 와 :disabled는 주로 html form 요소에 적용 하는데, form 태그(html 양식 만들기) form 요소는 기본값으로 enabled 상태입니다. (선택, 클릭, 입력, 포커스 가능) enabled 상태에 있는 요소로는 , , , , 등이 있습니다. 이 요소에 disabled 속성을 사용하면 disabled(비활성화) 상태가 됩니다. 비활성화 상태는 선택, 클릭, 입력, 포커스가 되지 않는 상태입니다. ▶ 브라우.. 2014. 11. 5.
반응형

티스토리툴바