정원영

정원영

항상 배우고 싶은 개발자입니다.

Category

CSS 7. CSS란? (2)

업데이트:
1 분 소요

CSS intro

가상 클래스 선택자 (Pseudo-Classes Seletors)

  • 선택한 요소가 특별한 상태여야 만족할수 있음.

구분

동적 가상 클래스 (dynamic pseudo classes)

  • 어떤 상태나 조건이 발생할 때, 사용자의 액션에 따라 스타일이 바뀌는 선택자임.
OOO:hover
  • 선택자 OOO 요소에 마우스 커서가 올라가 있는 동안 선택.
    ...
    <style>
		span { background-color: powderblue;}
		span:hover { background-color: gold;}
	</style>
    </head>
    <body>
	    <span>이 곳에 마우스를 올려보세요.</span>
    </body>
    ...
  • 마우스 대기전

alt

  • 마우스 대기

alt

OOO:active
  • 선택자 OOO 요소에 마우스를 클릭하고 있는 동안에만 선택.
    ...
    <style>
	    button:active { color: lime;}
	    a:active { color:red}

	</style>
    </head>
    <body>
	    <button>클릭하세요.</button>
	    <br />
	    <a href="https://www.apple.com">APPLE</a>
    </body>
    ...
  • 누르기전

alt

  • 누르는 동안

alt

OOO:focus
  • 선택자 OOO 요소가 포커스되면 선택
    ...
	<style type="text/css">
		.red-input:focus{ background: springgreen; color: red;}
		.blue-input:focus{ background: springgreen; color: blue;}
		input:focus { background-color: orange;}
	</style>
    </head>
    <body>
    	<input class="red-input" value="클릭하면 빨갛게 됩니다." />
    	<input class="blue-input" value="클릭하면 파랗게 됩니다." />
    	<input type="text">
    </body>
    ...

alt alt

000:visited
  • 사용자가 이미 방문한 링크를 표시해줌.

	<style type="text/css">
		a:visited { color: coral; }
	</style>
    </head>
    <body>
	    <a href="https://www.google.com">Google Search</a>
	    <a href="https://www.daum.net">Daum </a>
  • 한번 클릭한곳은 coral 색으로 표시됨

alt

OOO:disabled
  • 비활성화된 요소를 나타냄
  • 요소를 비활성화시킴

    ...
	<style type="text/css">
		input:disabled { background-color: coral;}
	</style>
    </head>
    <body>
    	<input type="text" placeholder="이름을 입력하세요." disabled />
    ...
  • 클릭, 글씨쓰기 안됨.

alt

구조적 클래스 선택자 ( pseudo classes )

OOO:first-child
  • 선택자 ooo가 형제 요소 중 첫쨰라면 선택
  • ooo가 형제요소 중 첫번째 요소라면 선택
OOO: last-child
  • 선택자 ooo가 형제 요소 중 막내라면 선택
  • ooo가 형제 요소 중 마지막 요소라면 선택
    ...
    <style type="text/css">
    	.fruits span:first-child {
    		color:red;
    	}
    	.fruits h3:last-child {
    	 	color:blue;
    	}
    	.fruits2 li:first-child {
    		color: orange;
    	} 
    	.fruits2 li:last-child { 
    		color : green;
    	}
    </style>   
</head>
<body>
	<div class="fruits">
		<span>딸기</span>
		<span>수박</span>
		<div>오렌지</div>
		<p>망고</p>
		<h3>사과</h3>
	</div>
	<ul class="fruits2">
		<li>딸기</li>
		<li>사과</li>
		<li>망고</li>
		<li>오렌지</li>
	</ul>
</body>
    ...

alt

OOO:nth-child(n)
  • 선택자 ooo가 형제 요소 중 (n)번째라면 선택.
  • NTH CHILD
  • OOO가 형제 요소 중 n번째 요소라면 선택
    • n 키워드 사용시 0부터 해석(zero-base)
  • nth-child(n+3)
    • 3번째 요소부터 이후 요소들을 선택
    .fruits *:nth-child(2n) {color: aqua;}  // 짝수
    .fruits *:nth-child(2n+1){color:yellow;} // 홀수

alt

가상 요소 선택자 (Pseudo-Elements)

OOO : before, after

  • 선택자 ooo요소의 내부 앞,뒤에 내용(content)을 삽입.
  • 인라인 (글자) 요소
    ...
    <style type="text/css">
		.box::before {
			content:"앞!"
		}    
		.box::after{
			content:"뒤!"
		}
    </style>  
</head>
<body>
	<div class="box">
		Content!!
	</div>
    ...

alt

속성 선택자 (Attribute)

    [ooo]
  • 속성 ooo을 포함한 요소 선택
    [OOO="XXX"]
  • 속성 OOO을 포함하고 값이 XXX인 요소 선택
    ...
    <style type="text/css">
    	[disabled] {
    		color:red; 
    	}
    	[type] {
    		color:green;
    	} 
    	[type="password"] {
    		color:black;
    	}
    </style> 
</head>
<body>
	<input type="text" value="BOB!" />
	<input type="password" value="0824"/>
	<input type="text" value="SEOUl" disabled="disabled" />
</body>
    ...

alt

태그:

카테고리:

업데이트:

댓글남기기

참고