CSS

CSS

CSS(Cascading Style Sheets)는 HTML과 함께 웹 표준의 기본 개념입니다. HTML이 문서의 골격을 이룬다면 CSS는 그 골격에 맞는 디자인 작업 언어라고 생각하면 됩니다.

CSS 선택자

CSS선택자를 통해 요소를 선택하고 속성을 줄 수 있습니다.

기본 선택자

종류	예시	설명
태그 선택자	p {color: #fff}	p태그를 선택해서 글씨 색을 하얀색으로 설정합니다.
클래스 선택자	.class {color: #fff}	class 클래스를 선택하여 글씨 색을 하얀색으로 설정합니다.
아이디 선택자	#id {color: #fff}	id 아이디를 선택하여 글씨 색을 하얀색으로 설정합니다.
그룹 선택자	p,#id {color: #fff}	p태그와 아이디를 선택하여 글씨 색을 하얀색으로 설정합니다.
전체 선택자	* {color: #fff}	전체 태그를 선택하여 글씨 색을 하얀색으로 설정합니다.

• id 선택자
  1. 하나의 태그만 식별하기 위한 선택자입니다.
  2. 하나의 태그에서 하나만 사용할 수 있습니다.
  3. "#"으로 표시합니다.
• class 선택자
  1. 여러개의 태그를 식별하기 위한 선택자입니다.
  2. 하나의 태그에서 여러개를 사용할 수 있습니다.
  3. "."으로 표시합니다.

링크 가상 클래스

종류	예시	설명
:link	a:link {color: #fff}	방문하지 않은 링크의 글씨 색을 하얀색으로 설정합니다.
:hover	:hover {color: #fff}	링크 위에 마우스를 올려 놓았을 경우 글씨 색을 하얀색으로 설정합니다.
:active	:active {color: #fff}	링크가 활성화 되었을 경우 글씨 색을 하얀색으로 설정합니다.

폼(로그인) 관련 클래스

종류	예시	설명
checked	input:checked {color: #fff}	input 태그가 체크되었을 때 글씨 색을 하얀색으로 설정합니다.
focus	input:focus {color: #fff}	태그에 초점이 맞추어 졌을 때 글씨 색을 하얀색으로 설정합니다.
enabled	input:enabled {color: #fff}	input 태그가 사용 가능하면 글씨 색을 하얀색으로 설정합니다.
disabled	input:disabled {color: #fff}	input 태그가 사용 가능하지 않으면 글씨 색을 하얀색으로 설정합니다.

속성 선택자

종류	예시	설명
[attribute]	a[target] { color: red; }	a태그에 target이라는 속성을 가진 요소를 선택한다.
[attribute=”value”]	a[target="_blank"] { color: red; }	a태그에 target=”_blank”라는 속성을 가진 요소를 선택한다. target이 반드시 _blank인 요소만 잡으니 주의!
[attribute~=”value”]	div[class~="apple"] { background-color: red; }	apple이라는 class를 가진 요소를 선택한다. 여러개의 class가 함께 지정되어 있어도, apple을 가졌다면 선택한다.
[attribute|=”value”]	div[class|="layer"] { background-color: red; }	layer라는 class로 시작하는 요소만 선택하되, 하이픈으로 구분해 더 많은, 더 다양한 요소를 선택할 수 있다.
[attribute^=value]	div[class^="minions"] { background-color: red; }	minions라는 class로 시작하는 요소를 전부 선택한다.
[attribute$=value]	div[class$="end"] {background-color: red;}	end라는 class로 끝나는 요소를 선택한다. .pdf등을 값(value)으로 지정해 특정 파일만 선택하는 것도 가능하다.
[attribute*=value]	div[class*="wow"] { background-color: red; }	wow라는 class를 가진 모든 요소를 선택한다. class가 어떻게 조합이 되어도 wow만 완성되면 무조건 선택한다.