연습풀어보기 사이트
☆css
웹페이지 구성 = html + style(디자인)
style : 정해진 속성을 입력 웹페이지 꾸미기
stylesheet : 웹 페이지에서 쓰는 style 모음
p{text-align: center} : 선택자{style속성:속성값}
내부 스타일 시트 : <stlye> p{text-align: center} </stlye>
외부 스타일 시트 : 헤드부분 <link href="css 파일경로" rel="stylesheep" type="text/css"
인라인 스타일 시트
: <html> <head></head> <body><p style="스타일정보"></body> </html>
＠css 선택자
☆전체 선택자
* : <html>에 있는 모든 태그에 적용(<head><body>)
☆태그 선택자
태그(h1, p, li등) : 특정 태그 적용(중복적용 ' , ' 쉼표 사용)
☆아이디 선택자 : 중복허용x
#아이디명 : 태그에 지정한 id값을 선택자로 사용
☆클래스 선택자 : 중복허용o
.클래스명 : 태그 속성을 class 설정 class값을 선택자로 사용
☆후손 선택자 : A B -> 공백사용
☆자손 선택자 : 여러 자손 선택 가능 A>B ex)선택자 >div>ol>li
☆기본속성 선택자 : 선택자[속성]{설정내용}, 선택자[속성=속성값]{설정내용}
★속성 선택자 : 특정 문자열을 확인하여 스타일 적용 ( =, ~=, |=, ^=, $=, *=)
☆동위 선택자 : 동위관계 위치한 태그
선택자a + 선택자b : 동위선택자 a의 바로 뒤에있는 한개의 선택자
선택자a ~ 선택자b : 동위 선택자 a의 뒤에 있는 모든 선택자
☆ 일반 구조 선택자
first-child : 형제 관계 태그 중 첫번째 태그
last-child : 형제 관계 태그 중 마지막 태그
nth-child(수열) : 형제 관계 태그 중 앞에서 수열 번째 태그
nth-last-child(수열) : 형제 관계 태그 중 뒤에서 수열 번째 태그
☆ 형태 구조 선택자
first-of type : 형제 관계 태그 중 첫 번째 태그
last-of-type : 형제 관계 태그 중 마지막 태그
nth-of-type(수열) : 형제 관계 태그 중 앞에서 수열번째 태그
nth-last-of-type(수열) : 형제 관계 태그 중 뒤에서 수열번째 태그
☆반응 선택자
선택자 : active 사용자가 클릭한 태그
선택자 : hover 사용자의 마우스가 올라가 있는 태그
☆상태 선택자
:checked 체크상태의 input태그
:focus 초점이 맞추어진 input태그
:enabled 사용 가능한 input태그
:disabled 사용 불가능한 input태그
☆링크 선택자 : link , visited
☆문자 선택자
::first-letter : 첫 번재 글자를 선택
::first-line : 첫 번째 줄 선택
::after : 태그 뒤에 위치하는 공간 선택
::before : 태그 앞에 위치하는 공간 선택
::selection : 사용자가 드래그한 글자 선택
☆부정 선택자
선택자:not(선택자) : 선택자를 반대로 적용하여 선택
css 우선순위 : 태그 스타일 > class스타일 > id스타일 > 인라인 스타일 > !important
소스 순서에 따른 순위 : 나중에 작성된 스타일 적용
기본속성
☆ 상대 크기
em : 부모 요소의 크기가 기준. 배수를 의미, 1배=1em=100%
rem : 최상위의 부모 요소(기준)의 크기의 배수
% : 기본 설정 크기에 대한 상대적 크기 설정(초기설정100%)
☆ 절대 크기 : px ,pt 기본 지정된 크기
6pt = 8px = 0.5em = 50%
12pt = 16px = 1em = 100%
font-family : 폰트의 글꼴을 설정 선택자{ font-family: 글꼴[글꼴2, 글꼴3]; }
font-size : 글자의 크기 조절 em, px, pt 선택작{font-size: 숫자단위}
font-weight : 글자 굵기 조절 100~900 미세 조정 가능
normal(기본 400), bold(굵게 700), bolder(기본보다 굵게), lighter(기본보다 가늘게)
font-variant : 영어를 작은 대문자로 표시
선택자{font-variant: normal or small-caps;}
font-style
선택자{font-style: normal or italic or oblique;}
* italic : 기울어진 문자열(글자)
* oblique : 기본 글자를 기울여 표시
font: font-style font-variant font-weight font-size/line-height font-family
: 글꼴 속성을 모아서 표현 할수 있는 스타일 속
☆ 텍스트 스타일
선택자{color: 색상;} *색 지정 방법 : rgb(000, 000, 000) / red / #ff000
text-decoration : 글자에 줄 표시
★none밑줄 삭제, underline밑줄 표시, overline윗줄 표시, line-through취소선 표
text-transform : 영문자를 표시할 때 대소문자를 속성을 변경
★none변환 없이, capitalize 첫 번째 글자 대문자, uppercase 모든글자 대문자 ,lowercase 모든글자 소문자
text-shadow : 텍스트 그림자 효과 선택자{text-shadow: none or 가로 세로 번짐 색상;}
white-space : 공백을 처리 선택자{white-space: normal or nowrapor pre or pre-line or pre-wrap}
normal 여러 개의 공백 하나로 표시
nowrap 여러 개의 공백 하나로 표시, 줄 바꾸지 않고 한 줄 표시
pre 여러 개의 공백 그대로 표시
pre-line 여러 개의 공백 하나로 표시, 영역 넘어가면 자동 줄 바꿈
pre-wrap여러 개의 공백 그대로 표시, 영역 넘어가면 자동 줄바꿈
letter-spacing : 날개 글자 간격 조정/ 선택자{letter-spacing: 숫자(단위);}
word-spacing : 단어와 단어 사이 간격 조정/ 선택자{word-spacing: 숫자(단위);}
☆문단 스타일
선택자{direction: ltror rtl;} 글자 쓰기 방향 ltr(왼>오), rtl(오>왼)
선택자{text-align: left or right or center or justify;} 문자위치 조정(정렬) justify(좌우 정렬)
선택자{text-indent: 숫자(단위);} 문장 들여쓰기
선택자{line-height: normal or 숫자(단위);} 문장끼리 줄 간격 조정
선택자{text-overflow: clip or ellipsis;} 영역을 벗어나는 텍스트 표시
clip 영역을 넘어가는 텍스트 자름, ellipsis 말 줄임으로 잘린 텍스트 표현
☆목록 스타일
list-style-type : 목록 기호의 스타일 지정
ul -> disc : 흑색원형, circle : 흰색 원형, square : 흑색 사각형, none : 표시 안 함
ol -> decimal 1시작 십진수, decimal-leading-zero : 앞에 0이 붙은 십진수
lower-roman/upper-roman : 소문자/대문자 로마자
lower-alpha/lower-latin : 소문자 알파벳
upper-alpha/upper-latin : 대문자 알파벳
선택자{list-style-image: url(이미지 경로);} 기호 대신 이미지 삽입
선택자{list-style-position: inside or outside;} 목록 기호 들여쓰기
inside : 블릿/숫자 안쪽 outside : default/블릿/숫자 밖으로
선택자{list-style: type값 position값 image값;} 목록 스타일 한번에 지정
☆레이아웃스타일
선택자{width: 숫자(단위) or auto(default); height: 숫자(단위) or auto(default);}
: 콘텐츠(내용) 영역의 크기 조절
블록 레벨 요소 : 한 줄 전체 차지 (박스모델), 한줄에 여러요소가 올수 없다
※<div>, <p>, <hn>, <ul>, <ol>, <blockquote>, <form>, <hr>,<table>, <fieldset>, <address>
인라인 레벨 요소 : 한줄의 일부분 차지 요소, 한줄에 여러 요소가 올수 있다
※<img>, <object>, <br>, <sub>, <sup>, <span>, <input>,<textarea>, <label>, <button>
선택자{display: 속성 값;} 화면 배치 변경, 박스레벨 이라인 레벨 요소의 변경이 가능
none 화면에 표현되지 않고 공간 차지 않함
block block 레벨 요소로 변경, inline을 block처럼 배치 가능
inline inline 레벨 요소로 변경, block을 inline처럼 배치 가능
inline-block inline레벨이면서 content에는 block에 대한 속성 지정
☆테두리 스타일
border-style 테두리 스타일
none 테두리가 나타나지 않음 default값
hidden 테두리가 나타나지 않음
dashed 짧은(dotted보다 길은 점선) 선으로 표시
dotted 점선으로 표시
double 이중 선으로 표시
groove 홈이 파인 것처럼 테두리를 창에 조각한 것처럼 표시
inset border-collapse설정 groove와 같거나(collapse), 테두리가 창에 박혀 있는 표시(separate)
outset border-collapse설정 ridge와 같거나(collapse), 전체 박스 테두리가 창에서튀어 나온 것처럼 표시(separate)
ridge 테두리가 튀어나 온 것처럼 표시
solid 테두리를 실선으로 표시
선택자{border[-위치]-width: 숫자(단위) or 속성 값;} 테두리 굵기
thin 얇게, medium 중간 크기, thick 두껍게, 숫자 : 두께 정도 표시
위치를 설정 없이 전체 테두리 작성 시 시계 방향(위-우-아래좌)으로 위치(top, right, left, bottom)별 설정 가능
선택자{border[-위치]: 두께스타일 색상값;} 테두리 두께, 스타일, 색상을 한 번에 지정 가능
border-radius : 박스 모서리를 둥글게
(위치: top-left, top-right, bottom-left, bottom-right)
선택자{border[-위치][-위치]-radius: 숫자(단위);}
선택자{border[-위치][-위치]-radius: 숫자숫자(단위);} : 비대칭 원 그리기
box-shadow : 박스 영역에 그림자 효과
선택자{box-shadow: 수평거리 수직거리 흐림정도 번짐정도 색상 [inset];}
☆여백 스타일
padding : 테두리와 콘텐츠 영역사이의 공간/ 선택자{padding[-위치]: 숫자(단위);}
margin : box레벨이나 inline레벨의 요소들간의 간격을 조절/ 선택자{margin[-위치]: 숫자(단위);}
☆포지셔닝 : box모델, inline모델을 페이지 상 배치
(페이지 안 요소을 원하는 위치에 배치 / position 속성, float 속성)
선택자{position: 속성 값; [top: 숫자(단위);] [left: 숫자(단위);] [right: 숫자(단위);] [bottom: 숫자(단위);]}
페이지의 요소를 자유롭게 배치
static 요소를 문서의 흐름에 맞춰 (default)
relative 이전 요소와 자연스럽게 연결 배치, 위치 지정 가능
absolute 원하는 위치를 지정해 배치 (* 부모/조상 요소의 position속성이 반드시 relative)
fixed 지정한 위치에 고정 배치
선택자{visiblility: 속성 값;} 페이지에 특정 속성을 보이거나 보이지 않게 하는 속성
visible default,요소가 화면에 보임
hidden 요소를 화면에 안 보이게 / 페이지 공간은 차지
collapse 행, 열, 행 그룹, 열 그룹 등에서 지정 서로겹치도록(이외 영역에서는 hidden)
선택자{z-index: 속성 값;} 페이지의 요소들을 순서대로 위에 쌓는 속성
(* 요소가 항상 맨 위에 위치해야 하면 값을 999 또는 1000 등 큰 값으로 설정)
선택자{clear: 속성 값;} 페이지에 float설정되면 속성이 그대로 다음 요소에 영향을 준다 이를 초기화시키는 속성
☆다단스타일
column-width : 단의 너비 고정하고 다단 구성
* 너비를 기준으로 다단 개수를 나눔
선택자{-접두사-column-width: 숫자(단위) or auto;
column-width: 숫자(단위) or auto;
}
column-count : 단의 개수를 지정하여 다단을 나눔
선택자{-접두사-column-count: 숫자(단위) or auto;
column-count: 숫자(단위) or auto;
}
column-gap : 다단 사이의 여백 설정
선택자{-접두사-column-gap: 숫자(단위) or normal;
column-gap: 숫자(단위) or normal;
}
column-rule : 다단 사이의 효과를 주는 속성
column-rule-color 색상 값
column-rule-style 다단 사이의 선 효과 지정
none,hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
column-rule-width 너비를지정하는 속성
숫자(단위) or thin, medium, thick
column-rule 효과를 한 번에 설정하는 속성, 너비 스타일 색상
column-span : 단을 합치는 속성
선택자{column-span: 속성 값;}
1 : default,합치지 않은 것과 동일
all : 전체를 합치는 것과 같음
☆표 스타일
caption-side : 테이블 캡션에 대한 위치를 지정하는 속성
선택자{caption-side: top or bottom;}
선택자{height: 숫자(단위); width: 숫자(단위);} : 표 높이/너비를 지정 속성
선택자{border: width style color;} : 표의 테두리 스타일 지정 속성
선택자{border-collapse: 속성 값;} : 테두리 스타일 변경 속성
separate : 테두리 따로 표시(두 개3로 표시)
collapse : 테두리 합쳐서 표시(한 개로 표시)
선택자{border-spacing: 가로 세로;} : 가까운 쪽 테두리 간 거리 지정 속성
선택자{empty-cells: 속성 값;} : 빈셀의 표시여부 결정 속성
show : default,빈 셀 표시
hide : 표시하지 않음
선택자{table-layout: fixed or auto;} : <td>의 크기를 width로 고정하는 속성
선택자{text-align: left | center | right;} : <td>안의 텍스트를 수평 정렬
선택자{vertical-align: top | bottom | middle;} : <td>안의 텍스트를 수직 정렬
☆CSS의 색상 표현
영문 색 이름, #16진수 3자리, rgb(0~255, 0~255, 0~255, 0~1)
hsl(색상 값, 채도 값(%), 명도 값(%)), hsla(색상 값, 채도 값(%), 명도 값(%), 투명도)
선택자{background-color: 색상표현;} : 배경색을 지정
선택자{background-clip: 속성 값;} : 배경 범위 조절
border-box 박스모델의 가장 외곽인 테두리까지 적용
padding-box 테두리 제외한 패딩 범위까지 적용
content-box 내용부문만 적용
선택자{background-image: url(경로);} : 배경에 이미지 설정
선택자{background-repeat: 속성 값;} : 배경 이미지 반복 출력
repeat 브라우저에 가득 찰 때까지 가로/세로 반복
repeat-x/repeat-y 넓이/높이만큼 반복
no-repeat 이미지 한 번만 출력
선택자{background-size: 속성 값;} : 배경 이미지 크기를 조절하는 속성
auto 원래 배경 이미지 크기만큼 표시
contain 요소 안으로 이미지가 들어갈 수 있게 확대/축소
cover 요소 범위를 이미지가 덮을 수 있도록 확대/축소
크기 값(px)/백분율 수치화된 값으로 표현(가로, 세로)
선택자{background-position: 속성 값;} : 배경 이미지 위치를 조정하는 속성
선택자{background-origin: 속성 값;} : 배경 이미지 배치할 때 기준 지정 속성
border-box 테두리 기준
padding-box 테두리를 뺀 패딩이 기준
content-box 내용 부분이 기준
선택자{background-attachment: 속성 값;} : 웹 페이지가 위아래로 움직여도 배경은 고정
scroll default,배경 이미지가 움직이게 설정
fixed 배경 이지미가 움직이지 않게 설정
선택자{background: image값 repeat값 attachment값 position값
clip값 origin값 size값;} : 배경 이미지 한 번에 설정
☆변형/애니메이션
선택자{-접두사-transform: 변형함수; transform: 변형함수;}
페이지 요소들을 변형시키려면 transform 속성과 변형 함수 이용
변형 함수는 2차원 함수와 3차원 함수 구분
★2차원 변형 함수
translate(x, y) 지정한 크기만큼 x축, y축으로 이동
translateX(tx) 지정한크기만큼 x축(가로)으로 이동
translateY(ty) 지정한 크기만큼 y축(세로)으로 이동
scale(sx, sy) 지정한 크기만큼 x, y축으로 확대/축소
scaleX(sx) 지정한 크기만큼 x축(가로) 방향으로 sx만큼 확대/축소
scaleY(sy) 지정한 크기만큼 y측(세로) 방향으로 sy만큼 확대/축소
rotate(각도) 지정한 각도만큼 회전
skew(ax, ay) 지정한 각도만큼 x축과 y축으로 요소 변형
skewX(ax) 지정한 각도만큼 x축으로 요소 요소 변형
skewY(ay) 지정한 각도만큼 y축으로 요소 요소 변형
★3차원 변형 함수
matrix3d(n [,n]) 4*4행렬로 이동과 확대/축소, 회전 등 변환
translate3d(tx,ty,tz) 지정한 크기만큼
translateZ(tz) 지정한 크기만큼 z축(세로)으로 이동
scale3d(sx, sy, sz) 지정 크기만큼 x,y, z축 방향으로 x,y, z만큼 확대/축소
scaleZ(sz) 지정한 크기만큼 z축 방향으로 z만큼 확대/축소
rotate3d(rx, ry, rz, 각도) 지정한 크기만큼 회전
rotateX(각도) 지정한 각도만큼 x축으로 회전
rotateY(각도) 지정한 각도만큼 y축으로 회전
rotateZ(각도) 지정한 각도만큼 z축으로 회전
perspective(길이) 입체적으로 보일 수 있는 깊이 값을 지정
선택자{transform: 함수명(이름);} 요소를 페이지의 일정 좌표로 이동
* 3D효과를 내기 위해서는 perspective함수를 사용
2차원 -> translate : x,y translateX : x translateY : y
3차원 -> translate3d : x,y, z translateZ : z
선택자{transform: 함수명(이름);} : 요소를 일정 페이지만큼 확대/축소
2차원 -> scale : x,y scaleX : x scaleY : y
3차원 -> scale3d : x,y, z scaleZ : z
선택자{transform: 함수명(이름);} : 지정각도 만큼 요소를 시계방향(양수)이나 반대방향(음수)으로 회전
2차원 -> rotate각도(deg)
3차원 -> rotateX(deg), rotateY(deg), rotate3d(x,y,z,각도(deg)) ,rotateZ(deg)
선택자{transform: 함수명(이름);}
2차원 -> skew : (deg), (deg) skewX : (deg) skewY : (deg)
☆기타변형속성
선택자{transform-origin: x y z;} : 기존 변형 기준 x, y, z축이 아닌 특정 지점 기준 변형 속성
x축 x좌표 값/ left center right
y축 y좌표 값 / top center bottom
z축 z좌표 값
선택자{perspective: 숫자(단위);} : 화면에서 원근감을 갖게 하는 속성
선택자{transform-style: 속성 값;} : 여러 변형을 동시에 하는 경우 부모 요소 적용한 3D변형을 하위 요소에 적용
flat 하위 요소를 평면으로 처리
preserve-3d 하위 요소들에 3D효과 적용
선택자{backface-visibility: 속성 값;} : 회전하여 뒷면을 보이게 할 것인지 안 보이게 할 것인지 설정
hidden 뒷면이 보이지 않게 설정
visible 뒷면이 보이게 설정
