■ css 적용방법
◎ html에서 연결방법
| <link rel = "stylesheet" type="text/css" href = "css/style.css" |
■ css 기본단위
| 단위 명 | 대표설명 | 기본 설명 |
| px | 대표 px | 기본수치 값을 입력하며 픽셀의 사이즈로 지정한다. |
| rm | 부모의 px의 배수 | 부모가 16px일 경우 자식의 1.5em은 24px (16+8) 그 다음 자식이 1.5em이면 36px (24+12) |
| rem | 기본문서 px의 배수 | 기본문서는 16px을 기본으로 한다 :root{} 에 기본값을 변경해 줄수 있다. |
| % | 부모의 크기 비율 | 부모에게 받은 px를 기준으로 %비율을 작성한다. |
| vw / vh | 화면의 크기 비율 | vw : 너비, vh : 높이 보여지는 화면을 기준으로 하여 50vw은 50%에 해당된다. 보여지는 화면이 1000px이면 500px이 되는데 %는 보여지는게 1000px이라도 여백에 따라 달라진다. |
■ css 색표현
| 표현법 | 설명 |
| 색상 키워드 표현 | red, black, blue, green |
| rgb표현 (red, green, blue) |
rgb(0, 255, 0) = green // 수치값을 0~255로 넣어준다 |
| hsl 표현 (hue, saturation, lightnees) |
hue 색상환의 각도 0~360표현 (360=red, 120=green, 240 = blue) 채도와 명도는 백분율로 표현 0~100% hsl(240,100%,50%) |
| 16진수표현 | rgb수치값을 16진수로 변경하여 작성함 #00ffee = #0fe 라고 간단히 작성할수 있다. |
■ css 필수 선택자
| 선택자 | 표현식 | 설명 |
| 태그 선택자 <p>, <div>, <h1> |
div{ } | 일반적인 태그 <> 형태로 되어 있는 태그의 이름으로 불러들인다. div 태그 로 되어 있는 것은 모두 적용된다. |
| 전체 선택자 (*) | *{ } div * { } |
모든 태그를 선택해 준다. div 태그 내의 모든 태그를 선택한다. |
| Class 선택자 (.) | .클래스명 {} div.클래스명 {} (태그가 div이면서 클래스명이 같은) |
클래스명이 동일한 태그를 선택한다. 클래스명은 HTML에서 두가지 이상으로 지정해 줄수 있다. ex) <div class = "button line"></div> button과 line으로 접근가능 |
| ID 선택자 (#) | #아이디명 {} | HTML에서 아이디는 두개의 태그가 동일해도 문제는 발생하지 않는다. 하나의 태그에 두가지의 아이디는 넣어 줄수 없다. |
| 자손 선택자 ( ) | div .클래스명 {} (사이에 한칸을 띄어준다.) |
div 내부에 있는 클래스를 선택해준다. div 내부에 p 내부에 클래스가 있어도 선택해준다. |
| 자식 선택자 (>) | div > .클래스명 {} | div내부에 있는 클래스인데 div의 바로 아래있는 클래스만 선택해 준다. |
| 인접 형제 선택자 (+) | div h1+h2 {} div > h1+h2 {} |
div내부에 있는 자손 h1의 바로 밑의 형제 h2를 선택해 준다 div바로 아래 있는 h1의 바로 밑의 형제 h2를 선택해 준다 |
| 그룹 선택자 (,) | .클래스1, .클래스2 {} | 클래스 1과 클래스 2를 모두 선택해 준다. |
| 속성 선택자([]) | [target] {} a[target] {} a [target] {} [target="_blank"] {} [class^="list"] {} 그외 추가적으로 |
속성이 target이 있는 것을 선택 a태그의 속성 target이 있는 a태그 자손중에 속성이 target 이 있는것 target 속성 값이 "_blank"인것을 선택 class 속성의 값이 "list"로 시작하는 값을 선택 (^= 시작하는),(*=포함하는),($=끝나는) (~= 클래스명 중에서 하나가 있다면) |
| 가상 선택자() (pseudo selector) |
:link {} a:hover {} a :active {} a:visited {} a:focus {} |
링크가 되어있는 것을 선택 a태그중 마우스를 올렸을때 a태그 자손중에 마우스를 누르는 순간 a태그중 방문한 사이트 a태그중 focus가 걸릴때 tap하면 (outline: none <-tap 없어짐) |
| 가상요소 선택자 (pseudo element selector) |
h1:before{ content : '우리들의' } |
before 컨텐츠의 앞에 html에 없는 것을 보여준다 after 컨텐츠 뒤에 html에 없는 것을 보여준다 |
| 구조선택자 | li:first-child {} / last li:nth-child(3) {} li:nth-child(2n) {} li:nth-child(n+3) {} |
자식인 li의 첫번째 /마지막 child에 대해서 선택해준다. 자식인 li의 3번째 자식인 li의 짝수번째 자식인 li의 3번째 이후로 |
| 부정선택자 | div>li { color:black; } :not(div>li) { color:red;} |
div의 자식 li를 제외하고 div의 자식 li에 색은 넣어줘야 실행됨 |
■ 선택자 우선순위
| 우선순위 | 예시 | |
| 동일한 급(같은 선택자)일 경우 아래에 있는 것이 우선순위가 높음 |
p{ color = red } p{ color = blue } 우선 |
|
| 자세한 형태일 경우가 우선순위가 높다 | .class p{ color = red } 우선 p{ color = blue } |
|
| id, class, tag, * 순서로 앞이 우선순위가 높다 |
#id{color = black } 우선 .class p{ color = red } p{ color = blue } |
|
■ display 속성
| none | block | inline | inline-block |
| 보이지 않음 | 블럭 | 인라인 | 인라인 블럭 |
■ Inline-block 특징 및 종류
| 형태 | 특징 | 종류 |
| 인라인 요소 Inline Elements |
기본 너비 : 컨텐츠의 너비 한줄에 여러 개 배치 크기값을 가질수 없음 상하 마진은 가질 수 없음 |
span, a, small, big, em, u, ins, i, s, del, br, q, b, strong, mark, sub, sup, label, map, cite, addr, time |
| 블럭 요소 Block Elements |
기본 너비 : 100% 한 줄에 하나만 배치 너비와 높이를 가질수 있음 상하좌우 마진 가질 수 있음 |
div, p, table, ul, ol, li, dl, dd, td, tr, td th, form h1~h6, header, nav, footer, main, section, article, fiure figcaption, symmary, details, address, blockquote, aside |
| 인라인 블록요소 (Inline Block Elements) |
기본 너비 : 컨텐츠의 너비 값 한 줄에 여러개 배치 크기값을 가질수 있음 상하좌우 마진 가질수 있음 |
img, button, select input, textarea, video, audio 대부분의 font icon 태그 |
■ position 기본속성
| 속성 값 | 의미 |
| static | 기본값, 요소를 일반적인 문서 흐름에 따라 배치 |
| relative | 일반적인 문서 흐름에 따라 배치 상하좌우 위치에 따라 오프셋 적용 |
| absoulute | 일반적인 문서 흐름에서 제거 가장 가까운 position 지정요소에 대해 상대적으로 오프셋 적용 상위에 position 지정요소가 없을때는 화면의 기준으로 적용 |
| fixed | 일반적인 문서 흐름에서 제거 화면의 지정 위치에 고정 |
| sticky | 일반적인 문서 흐름에서 제거 스크롤 동작이 존재하는 가장 가까운 요소에 대해 적용 |