CRUISEWEB

transition 일반적으로 CSS 속성 값이 바뀔 때, 즉각적으로 바뀌어 렌더링되지만, transition 속성을 사용하여 새로운 CSS 속성 값으로의 전환을 구체적으로 정의할 수 있다. transition-property, transition-duration, transition-delay, transition-timing-function의 단축 속성이다. 애니메이션이 가능한 CSS 속성들만 트랜지션 가능 애니메이션이 가능한 속성 목록 여러개의 트랜지션은 콤마로 분리하여 리스트로 작성 리스트 매칭 : 트랜지션 리스트들이 같은 길이가 아닌 경우, transition-property 리스트의 길이에 따라 각 속성 트랜지션이 시작되는 지점이 결정됨 See the Pen transition-property..

content content 속성을 활용하여 DOM트리가 아닌 스타일시트에서 요소나 가상요소 안의 내용을 렌더링할 수 있다. 콤마로 분리된 URI 리스트를 값으로 할 수 있으며 슬래시(/)로 분리된 문자열은 리더기를 위한 대체 텍스트를 표현한다. 여러개의 URI가 선언될 경우, 폴백으로 적용된다. 항목 내용 초기값 normal 적용대상 :before, :after, :marker, 페이지 마진 박스 / image와 url 값은 모든 요소에 적용 가능 상속 X 1. 값 1) normal 가상요소 :before과 :after는 none처럼 적용된다. 2) none 일반 요소에는 해당 요소의 자식들이 렌더링 되지 않게 함으로써 마치 요소가 비어있는 것처럼 보이게 한다. 가상요소에는 display:none이 선..

transform 항목 내용 적용대상 블럭레벨, 인라인블럭레벨, table-row, table-row,group, table-header-group, table-footer-group, table-cell, table-caption 상속 X % 바운딩 박스 요소의 좌표계에 적용된다. transform function 목록을 포함한다. 최종 변형 값은 행렬로 변환되어 적용된다. 1. 2D transform function 1) matrix() 여섯 개 값의 행렬 형식으로 2D 변형을 지정 matrix( [, ]{5,5} ) 2) translate() X축 벡터, Y축 벡터 값만큼 2D 이동. Y축 벡터값이 없을 경우, Y축 벡터값은 0으로 계산됨 translate( [, ]? ) See the Pen tr..

border border-width, border-style, border-color, border-image의 단축 속성이다. [ || || [ | transparent] || ]| inherit border-color border-top-color, border-right-color, border-bottom-color, border-left-color의 단축 속성이다. border-style border-top-style, border-right-style, border-bottom-style, border-left-style의 단축 속성이다. 1. 값 none 보더가 없다. 즉, width가 0인 보더. border-color와 border-width가 무시된다. hidden 보더를 숨긴다. bo..

linear-gradient 몇개의 색상들이 선형으로 배치되는 선형 그라디언트 양수의 경우, 0도 부터 시계방향으로 적용된다! 음수는 반대. 기본 값 : [to bottom] = linear-gradient( [ [ | to ] ,]? [, ]+ ) = [left | right] || [top | bottom] 1. 파라미터 1) 각도 키워드 방향 0deg to top 위쪽 방향 90deg to right 오른쪽 방향 180deg to bottom 아래쪽 방향 270deg to left 왼쪽 방향 45deg to top right 오른쪽 위 방향 225deg to bottom left 왼쪽 아래 방향 예시 하늘색에서 파란색으로 그라디언트 0deg (to top) 90deg (to right) 180deg..

CSS 선택자 1. CSS1, 2 선택자 * 모든 요소를 선택 E 태그명이 E인 특정 태그를 선택 E F E의 자손 요소인 F를 선택 E > F E의 자식 요소인 F를 선택 E:first-child 첫 번째 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함) IE7에서는 부모와 자식 간에 주석이 있으면 동작 X E:link 아직 방문하지 않은 링크 E를 선택 E:visited 이미 방문한 링크 E를 선택 E:hover 포인팅 디바이스가 요소에 맴돌고 있는 동안 E 선택 (인터랙티브 미디어를 지원하지 않는 환경에서는 이 선택자를 사용할 수 없을 수 있다.) E:active 유저에 의해 요소가 활성화 되있는 동안 E 선택 E:focus 유저에 의해 요소에 포커스가 머물러 있는 동안 E 선택 ..

background 숏컷 속성으로써 color, image, repeat, attachment, position 순서로 선언한다. background-color 속성만 순서에 독립적이다. 콘텐츠, 패딩, 보더 영역에 적용된다. background-color 항목 설명 값 color, transparent 초기값 transparent 적용 대상 모든 요소 상속 X background-image 항목 설명 값 uri, none 초기값 none 적용 대상 모든 요소 상속 X background-image와 함께 background-color를 선언할 수 있다. 특별한 ratio 없이 배경 이미지에 본래 정해진 치수가 있을 경우, background-position 속성을 통해 배경 이미지의 위치를 조절할 수 ..

position 항목 설명 초기값 static 상속 X 1. 값 relative 상대배치방식 : 본래 자신의 위치를 기준으로 지정한 offset 속성의 값만큼 떨어져서 배치되는 방식. 다른 요소의 위치에는 영향을 주지 않음 absolute 절대배치방식 : 요소가 포함된 부모를 기준으로 지정한 offset 속성의 값만큼 떨어져서 배치되는 방식. 문서의 일반적인 흐름을 따라 배치되지 않기 때문에, 다른 요소들의 배치 위치에 영향을 줌 absolute 요소는 가장 가까운 상위 요소가 static이 아닐 경우, 그 요소(containing 요소라고 불림)를 기준으로 배치된다. 상위 요소가 모두 static(기본값)이면 body를 기준으로 배치됨. fixed 고정배치방식 : absolute와 비슷하지만, fixe..

font-family 항목 내용 초기값 user agent에 의존 상속 O 값 순서 문법에 따른 명확한 순서가 있음 폰트 선언 순서 사용자에게 매칭되는 font-face가 없을 경우, 다음 순서의 font-face가 적용됨. 사용자에게 매칭되는 font-face가 있더라도, 알맞은 glyph(자형)이 없을 경우, 다음 순서의 font-face가 적용됨. 사용자에게 매칭되는 font-face가 아무 것도 없을 경우, user agent의 default font-face가 적용됨. 영문과 한글 폰트를 동시에 지정하고자 할때는, 영문폰트를 우선하여 선언한다. 값 폰트명이 한글일 경우 반드시 따옴표로 묶어주어야 함. 폰트명이 공백 없는 영문일 경우 묶지 않음. 폰트명이 영문이지만 공백이나 숫자가 포함될 경우 반..