css란
Cascading Style Sheet
html로 작성된 웹 문서가 사용자에게 어떤식으로 보여질지를 결정할 때 사용하는 스타일 시트 언어
css를 사용하는 이유
html만으로 웹페이지를 제작할 경우 많은 시간이 걸리며 유지 보수가 힘들기 때문에 이러한 문제점으로 W3C에서 만든 스타일 시트 언어
World Wide Web Consortium
월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직으로 팀 버너스리를 중심으로 1994년 10월에 설립되었다. W3C는 회원기구, 정직원, 공공기관이 협력하여 웹 표준을 개발하는 국제 컨소시엄
h1 { color: red; }
// h1 선택자
// color 스타일 속성
// red 스타일 값css3.0
CSS3.0은 Cascading Style Sheets의 3번째 레벨
CSS3.0은 이전 버전인 CSS2.1의 기능을 확장하고 새로운 기능과 모듈을 추가하여 더 다양한 스타일링 및 애니메이션 효과 구현
css 3.0 주요 기능
selector
스타일을 지정할 요소를 선택하는 데 사용되는 패턴
div + p
<div> 바로 뒤에 배치되는 첫 번째 <p> 선택
p ~ ul
<p> 앞에 오는 모든 <ul> 선택
[title~="flower"]
단어 "flower"가 포함된 제목 속성을 가진 모든 요소를 선택
[lang|="en"]
lang 속성 값이 "en"과 같거나 "en-"으로 시작하는 모든 요소를 선택
a[href^="https"]
href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택
a[href$=".pdf"]
href 특성 값이 ".pdf"로 끝나는 모든 <a> 요소를 선택
p:empty
자식이 없는 모든 <p> 요소(텍스트 노드 포함)를 선택
p::first-letter
모든 <p> 요소의 첫 번째 문자를 선택
p::first-line
모든 <p> 요소의 첫 번째 라인을 선택
:not(p)
<p> 요소가 아닌 모든 요소를 선택
text
Text Direction
direction 및 unicode-bidi 속성을 사용하여 요소의 텍스트 방향을 변경
direction: rtl;
unicode-bidi: bidi-override;Vertical Alignment
요소의 수직 정렬을 설정
vertical-align: baseline;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: sub;
vertical-align: super;animation
animation-direction
애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정
animation-direction: normal; // 정방향
animation-direction: reverse; // 역방향
animation-direction: alternate; // 첫 번째 정방향, 매 사이클마다 주기 방향 뒤집음
animation-direction: alternate-reverse; // 첫 번째 역방향, 매 사이클마다 주기 방향 뒤집음animation-fill-mode
애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
/* Single animation */
animation-fill-mode: forwards; // 대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지
animation-fill-mode: backwards; // 적용되는 즉시 첫 번째 관련 keyframe에 정의 된 값을 적용하고 animation-delay 기간 동안 이 값을 유지
animation-fill-mode: both; //앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장
/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;