메인
기술
메인
기술
무료게임
잡담
자유
개인
일정
갤러리
회원가입
계정 찾기
로그인
HOME
기술
CSS Pseudo-classes , Pseudo-elements, 가상 클래스, 가상 엘레멘트
1
목록
작성자
공대여자
작성 : 2018-04-30 17:16
조회 : 165
지남
1일간
2018-04-30
-
2018-04-30
좌표
css_pseudo_elements.asp
🔗 https://www.w3schools.com/css/css_pseudo_elements.asp
#css
#pseudo-classes
#pseudo-elemen
#가상
Pseudo-classes
XXXXX:hover 같은 것으로 : 하나로 시작한다.
보통 대상에 대한 이벤트나 순서나 위치에 대한 CSS를 재정의 할 때 사용한다.
주요 클래스
a 태그(링크) 관련
예전부터 사용되어 왔다.(IE7 부터)
작성시 순서에 주의해야한다. 안그러면 hover 같은건 동작 안할 수도 있다.
a:link , a:visited, a:hover , a:active
순서로 css를 작성하자.
a:active
링크를 클릭하였을 때
a:hover
링크에 마우스를 올릴 때
요즘엔 a태그 외의 다른 태그에서도 사용 가능하다.
a:link
링크 되었을 때 (href가 있어야한다)
a:visited
링크를 방문 하였을 때
input 관련
대부분 input의 attribute나 상태에 따라서 동작한다..
input:checked
checked 애트리뷰트가 설정되어있다면
반대 가상 클래스가 없다!!
input:disabled
disabled 애트리뷰트가 설정되어있다면
input:enabled
input:disabled 의 반대
input:focus
해당 태그에 포커스가 있다면
input 말고도 사용될 수 있다.
input:in-range
input의 type=number에서 min과 max 사이에 값이 있다면
min이나 max 둘 중 하나는 설정이 되어있어야한다.
input:out-of-range
input:in-range 의 반대
input:valid
input의 value가 type의 형식이나 pattern 에 맞을 경우
형식이 있는 type이거나 pattern 애트리뷰트가 설정되어 있어야한다.
input:invalid
input:valid 의 반대
input:required
required 애트리뷰트가 설정되어있다면
input:optional
input:required 의 반대
input:read-only
readonly 애트리뷰트가 설정되어있다면
input:read-write
input:read-only 의 반대
:disabled와 따로 동작한다.
일반
위치 등에 관련된 것 등
selectors:empty
해당 요소 속이 비어있는 경우(tag가 textnode 등이 없어야한다. 심지어 빈칸도)
selectors:nth-child(n)
부모 기준으로 n번째 자식 요소가 셀랙터와 같으면
n 형식
숫자
n번째를 의미 (반본 안 함)
an+b => 3n+1
반복 규칙, 1,4,7.. 번째 마다(반복함)
odd , even
홀수번째, 짝수번째 마다(반복함)
2n+1 , 2n+0 과 같음
selectors:nth-last-child(n)
selectors:nth-child(n)의 반대
즉, 뒤에서 n번째
selectors:first-child
selectors:nth-child(1) 과 같다.
selectors:last-child
selectors:first-child의 반대
selectors:only-child
부모 안에 해당 셀랙터의 요소가 1개만 있는 경우. 다른 자식 요소도 체크한다.
selectors:nth-of-type(n)
부모 기준으로 셀랙터와 같은 자식 요소중 n번째 자식 요소
selectors:nth-last-of-type(n)
selectors:nth-of-type(n) 의 반대
즉, 뒤에서 n번째
selectors:first-of-type
selectors:nth-of-type(1) 과 같다
selectors:last-of-type
selectors:first-of-type 의 반대
selectors:only-of-type
부모 안에 해당 셀랙터의 요소가 1개만 있는 경우. 셀랙터의 요소 외 것은 체크하지 않는다.
selectors:lang(language)
lang 애트리뷰트의 값이 같은 경우
앞의 2글자만 체크한다.
selectors:not(not_selectors)
셀랙터 요소 중 not_selectors 조건이 아닌 것
#ID:target
URL중 #name 부분이 #ID와 같은 경우
북마크 이동에 대한
:root
css용 전역 변수 선언을 해 놓을 수 있다.
링크
(한글)
IE11 지원 안됨, IE 엣지부터 지원
:root {
--bg-color
: brown; }
.xx{ background-color: var(
--bg-color
); }
var ( --key1 , var ( --key2 , black))
--key1 가 있으면 --key1 를 사용 없으면, --key2 를 체크해서 있으면 --key2를 사용, 없으면 black을 사용
if esle 처럼 동작시킬 수 있다.
Pseudo-elements
XXXXX::before 와 같은 모양으로 :: 두개로 시작한다. (IE 호환 때문에 : 하나로 시작하는 경우도 있음)
설정하면 해당 엘레멘트가 생기거나 엘레멘트로 바뀐다.
계속 작성중.
댓글
/
/
답변
수정
삭제
No Nickname
No Comment
새로운 댓글 작성
권한이 없습니다.
{{m_row.m_nick}}
내용이 너무 많습니다!
-
no-star
★☆☆☆☆
★★☆☆☆
★★★☆☆
★★★★☆
★★★★★
확인
게시물 : 113 (8 page)
📅 달력형
📷 갤러리형
RSS
tag
제목
내용
제목+내용
제목+내용+코멘트
작성자
태그
검색
No
제목
작성자
날짜
조회
공지
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
24-02-06
02-06
1236
공지
유용한 리눅스(LINUX) 명령어
#linux
#command
공대여자
11-03-03
03-03
11083
공지
[공지] 기술 게시판
#etc
#공지
mins01
05-06-24
06-24
11293
68
css mix-blend-mode
#css
#isolation
#mix-blend-mode
#레이어
공대여자
18-10-11
10-11
234
67
HSL 색공간
#color
#css
#hsl
공대여자
18-10-11
10-11
182
66
checkboxStyle
1
#check
#css
#input
#radio
#web
공대여자
18-09-11
09-11
379
65
flex 중앙에 표시하기, 한가운데 표시하기 center,middle
#center
#css
#flex
#중앙
공대여자
18-08-10
08-10
239
64
buttonBgAnimation 버튼 배경 애니메이션
1
#css
공대여자
18-07-04
07-04
133
63
css image-rendering 이미지 렌더링 깍두기, 이미지 확대축소 렌터링 동작에 대해서 힌트
1
#css
#image
#image-rendering
#resize
#렌더링
#이미지
공대여자
18-07-02
07-02
794
62
CSS Pseudo-classes , Pseudo-elements, 가상 클래스, 가상 엘레멘트
1
#css
#pseudo-classes
#pseudo-elemen
#가상
공대여자
18-04-30
04-30
166
61
transitionNumber 바뀌는 숫자
#css
공대여자
18-04-18
04-18
121
60
css flex
#css
#flex
공대여자
18-01-02
01-02
191
59
css3 animation library
2
#css
공대여자
17-09-28
09-28
123
58
css3 patterns
1
#css
공대여자
17-09-05
09-05
123
57
CSS3 column 다단, 단 나누기
1
#css
#column
공대여자
17-08-31
08-31
200
56
CSS 웃는얼굴 smile
#css
공대여자
16-08-25
08-25
150
55
page_alert , 에러페이지, 경고 페이지 등등.
#css
공대여자
16-07-14
07-14
137
54
m-onoff 라디오, 체크박스용 스타일
#css
공대여자
16-06-07
06-07
656