CSS 기초

 CSS3 : Cascading Style Sheets Level 3

HTML 구조 위에 시각적 표현을 정의하고, 우선순위 규칙(cascade)과 모듈화된 기능들로 동적,반응형 UI를 구현하는 스타일 언어 규격

 

-우선순위: !important > 인라인 스타일 > ID > 클래스/속성/의사클래스 > 태그

-소스순서 : 나중에 선언된 규칙이 우선

 

h1 { color : red; }

선택자 {스타일속성 : 스타일값;}

 

 

선택자의 종류:

전체 선택자 - HTML 페이지 내부의 태그를 모두 선택

태그 선택자 - HTML 페이지 내부의 특정 태그를 모두 선택

아이디 선택자 -특정 id 속성이 있는 태그 선택

클래스 선택자 - 특정 클래스가 있는 태그 선택

속성 선택자

후손 선택자

자손 선택자

반응 선택자

상태 선택자

구조 선택자

 

• first-child : 가장 위에 위치한 자식
• last-child : 가장 마지막에 위치한 자식
• 선택자: nth-child(2n) : 짝수번째에 위치한 자식/ 해당 자식이 선택자와 일치할 경우만 적용
• nth-last-child(2n+1): 마지막 위치를 기준으로 마지막위치의 자식을 제외한 홀수번째에 위치한 자식
• 선택자:nth-of-type(2n) :선택자와 일치한 자식중 짝수번째에 위치한 자식 
•  

 

동위 선택자: 

• 선택자A + 선택자B : 선택자 A바로 뒤에 위치하는 선택자 B를 선택
• 선택자A ~ 선택자B : 선택자 A 뒤에 위치하는 모든 선택자 B를 선택

 

 

크기단위: %, em(배수), cm, mm, inch, px

 

색상단위: 

background-color: red;

background-color: rgba(255,255,255,0.5);

background-color: #00FF00

background-color: hsl(360, 100%, 50%); - 색상,채도,명도 / 색상 0~360

 

url단위:

background-image: url('경로');

 

 

 

속성:

margin : 바깥쪽 여백

padding : 안쪽 여백

border : 테두리

width, height ; 크기

 

margin 20px : 모든 방향

margin 20px 10px : 위 아래 20px, 좌우 10px;

margin 1px 2px 3px  : 위 1px, 좌우 2px, 아래 3px;

margin 1px 2px 3px 4px : 상우하좌 순서대로

 

박스테두리:

border-width

border-style

border-color

 

가시속성:\

display: none - 안보임/ block - 블록/ inline - 인라인 / inline-block - 둘다 합친거

 

배경속성:

-image 이미지삽입

-size ; 크기

-repeat :반복여부

-attachment : 부착형태

-position : 위치/ top left면 상단좌측

 

 

글자속성:

font-size 폰트크기

font-family 글꼴, 'A','B'형식이면 A글꼴없으면 B로

 

글꼴종류:

serif : 끝에 장식이 있는 전통적인 인쇄체

sans-serif : 장식없는 현대적인 글꼴

monospace : 고정폭 글꼴

cursive : 필기체

fantasy : 장식적, 창의적인 글꼴, 판타지

 

글자 정렬:

text-align

 

요소 위치:

position, /absolute relative 절대위치/상대위치

top,

bottom, left, right 등..

z-index 깊이

hidden 영역 벗어나면 숨김

scroll 벗어나면 스크롤

overflow-y : scroll 위와 동일

float : left / 왼쪽에 요소 붙힘

 

그림자:

text-shadow: 1px 2px 3px black / 오른쪽 아래 흐림도 색상

 

그레이디언트: -moz-linear-gradient(top, 색상 0%, 색상 50%, 색상 ~ 100% . . .)

 

 

부정선택자:

not