CRUISEWEB

multi-column layout 1. columns column-width와 column-count의 단축 속성이다. 다른 단축속성들과 마찬가지로, 생략된 값은 초기값으로 설정된다. 2. column-width length 혹은 auto로 정의할 수 있다. 실제 너비는 가능한 공간에 맞추기 위하여 넓어지거나, 좁아질 것이다. 3. column-count 정의한 수만큼 요소의 컨텐츠 안의 컬럼의 갯수를 지정한다. 해당 값이 없거나, column-width가 auto가 아닌 경우, 컬럼의 갯수는 허용 가능한 최대 수가 된다. 4. column-gap column들의 사이 값으로 브라우저의 기본 간격 값이 사용된다. 멀티 컬럼 레이아웃에서 해당 값은 1em으로 정의된다. %값은 부모 요소의 너비를 기준으로..

flex main-axis : 플렉스 아이템들이 놓여지는 주축 cross-axis : main-axis에 수직인 축 main-start, main-end : 플렉스 아이템이 놓여지는 시작과 끝 cross-start, cross-end : 1. flex container display 속성을 사용하여 블럭 레벨, 인라인 레벨의 플렉스 컨테이너 박스를 만들 수 있다. display:flex; display:inline-flex; flex vs inline-flex See the Pen LxgWmZ by yura (@yulrang) on CodePen. 1) flex formatting context 플렉스 컨테이너는 내용에 블럭 레이아웃 대신 플렉스 레이아웃을 사용하는 새로운 플렉스 포맷팅 컨텍스트를 설정한..

문법과 기본 데이터 형식 1. 문법 모든 레벨의 CSS는 똑같은 핵심 문법을 준수한다. 이것은 UA가 생성된 시점에 존재하지 않았던 레벨의 CSS가 제대로 파싱되도록 하기 위해서이다. 1. 토큰 CSS는 토큰들의 연속으로 이루어진다. 토큰 목록 보기 2. 키워드 따옴표로 묶여진 것이 아닌 문자열 red : 키워드 / “red” : 문자열 3. 문자와 대소문자 CSS 스타일시트는 대소문자 구별이 없다. (HTML요소 이름은 대소문자 구별이 없으나, XML에서는 대소문자를 구별한다) 식별자(셀렉터안의 요소 이름, 클래스, 아이디들)는 유니코드(ISO 10646), 영문자, 숫자, 하이픈(-)만을 포함할 수 있다. 이스케이핑 문자로 \를 사용할 수 있다. 4. 문장 CSS 스타일시트는 문장의 목록으로 구성됨...

animations 어느 시간 동안의 CSS 속성 변화를 키프레임의 집합으로써 정의할 수 있다. transition과 비슷하나, 속성 값의 변화를 명시적으로 하는데에 차이점이 있다. 애니메이션은 키프레임을 사용한 명시적 값을 필요로 한다. 반복 횟수, 시작과 끝 값의 대체가 있을 것인지, 정지여부, 시작 시간의 딜레이 등 애니메이션의 많은 부분을 조정할 수 있다. 1. 특징 한 시간 지점에 똑같은 속성에 대해 여러 애니메이션이 적용된 경우, 마지막으로 선언된 애니메이션의 것이 적용된다. See the Pen animation multiple by leeYura (@2yulrang) on CodePen 애니메이션은 애니메이션 적용 전, 딜레이 시간 만료 전, 적용 후의 계산값에 영향을 미치지 않는다. 애니..

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 선택 ..