사이드바 영역으로 건너뛰기

FIANL ㅜㅡ

CSS 가상 선택자

* 선택자 일람표: http://htmlcss.kr/css/css-selector/

 

선택자 설명 CSS
.class class=”class”의 모든 요소를 선택 1
#id id=”id”의 모든 요소를 선택 1
* 전체 선택자 – 모든 요소를 선택 2
element 요소 선택자 – 지정된 요소를 선택 1
element,element 요소 선택자 – 선택할 요소를 여러 개 지정 1
element element 자손 선택자 – 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택 1
element>element 자식 선택자 – 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택 2
element + element 인접 선택자 – 지정된 요소와 같은 레벨의 바로 다음 요소 선택 2
[attribute] 속성 선택자 – 지정된 속성 가진 요소를 모두 선택 2
[attribute=value] 속성 값 선택자 – 지정된 속성의 값을 가진 요소를 모두 선택 2
[attribute~=value] 속성 값 선택자 – 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 2
[attribute|=language] 속성 값 선택자 – 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 2
:link 링크 선택자 – 모든 링크를 선택 1
:visited 링크 선택자 – 방문된 링크만 모두 선택 1
:active 링크 선택자 – 활성화된 링크만 모두 선택 1
:hover 링크 선택자 – 마우스오버된 링크만 모두 선택 1
:focus 링크 선택자 – input 요소의 포커스 된 요소를 선택 2
:first-letter 가상 선택자 – 지정된 요소의 첫 번째 문자를 선택 1
:first-line 가상 선택자 – 지정된 요소의 첫 번째 줄을 선택 1
:first-child 가상 선택자 – 지정된 요소의 첫 번째 하위(자식) 요소를 선택 2
:before 가상 선택자 – 지정된 요소의 앞 부분을 선택 2
:after 가상 선택자 – 지정된 요소의 뒷 부분을 선택 2
:lang(language) 가상 선택자 – 지정된 요소 중 언어가 괄호 안의 지정된 언어로 시작되는 요소를 선택 2

 

트위터 위젯 퍼오기

https://twitter.com/settings/widgets

 

트위터 버튼, 페이스북 좋아요 버튼 달기

 

반응형 웹

1. <head> 부분에 다음 태그를 넣는다.

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

2. CSS에서는

  • @media only screen and (min-width: 481px) and (max-width: 768px) {

이 사이에 css 코드 막 넣음...< }

 

**대응할 스크린 사이즈**

자기 맘이지만 대체로..

구분

화면 너비

격자 열 너비

격자 열 간격 너비

스마트폰

480px 이하

고정되지 않은 가변 폭

세로 모드 태블릿 PC

767px 이하

고정되지 않은 가변 폭

가로 모드 태블릿 PC

768px 이상

42px

20px

기본

980px 이상

60px

20px

와이드 모니터

1200px 이상

70px

30px

 

기타 CSS 트릭

진보블로그 공감 버튼트위터로 리트윗하기페이스북에 공유하기딜리셔스에 북마크
  • 태그
  • 글쓴이
    뎡야핑
  • 등록일
    2013/04/02 15:48
  • 수정일
    2013/04/17 17:27
  • 분류
    분류없음
  • 트랙백
    0개
  • 댓글
    1개