viscachas

transform- 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있음 1. translateX(), translateY(), translateZ()- 축 이동- translate의 %는 부모가 아니라 나를 기준으로 적용함 (top, width는 부모가 기준임) 2. rotateX(), rotateY(), rotateZ()- 축 회전 3. skew- 기울기 4. scaleperspective- z=0인 평면과 떨어진 거리를 나타내며, 원근감을 줌- 값이 작을수록 가까이서 보이고, 클수록 멀리서 보임- 회전하는 것은 멀리서 보면 더 회전 각도가 잘 보-  transform 속성을 적용한 요소의 부모 요소에게 perspective 속성을 줌  응용: 카드 뒤집기svg는 반응형이라 사이즈가 유동..

Pseudo Element- 일반적으로 CSS 선택자로는 지정할 수 없는 미세한 영역을 선택하기 위해 사용됨ex) ::before, ::after, ::first-letter, ::first-line, ::selection, ::marker, ::backdrop 등 ::before / ::after- 선택된 요소 앞 or 뒤에 content가 삽입됨 (콘텐츠를 비우려면 content: ""으로 설정)- content에는 특수 기호가 주로 삽입됨 (스타일 목적이라 복사가 안됨)- ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, 나 등 대체 요소에 적용할 수 없음 (= 닫을 수 없는 요소에는 넣을 수 없음)- postion으로 적용하는 것은 비포로 만듦 (우선순위..

transition- 애니메이션 속도를 조절하는 방법- 요소에 스타일의 변화를 일정 시간애 걸쳐서 부드럽게 나타나게 함- transition은 hover할 원래 요소에 적용함 1. transition: 아래 4가지 송겅을 한 번에 지정 가능 2. trainsition-property: 트랜지션을 적용할 속성 이름div { transition-property: opacity, left, top, height; transition-duration: 3s, 5s;} 3. transition-duration: 스타일 변화가 일어나는 기간transition-duration: 0.5s 4. transition-timing-fuction: 스타일 변화를 일으키는 방식- ease, linear, ease-in, e..

display- 요소의 내부, 외부 디스플레이 타입을 설정1. 요소 본인의 display가  block, inline, inline-block인지 설정하거나(일반 흐름 속에서 요소가 동작)2. 요소의 자식들에게 적용할 레이아웃(flow layout, grid, flex 등)을 설정(전체 레이아웃 메서드) 1. block- 다른 요소 아래 하나씩 표시되는 요소ex) , ,  2. inline- 요소들이 나란히 표시되는 요소- width, height 속성 설정 불가- margin, padding 속성은 좌우 간격만 방여되고, 상하 간격은 반영 안됨ex) , ,  3. inline-block- inline 처럼 요소들이 나란히 표시되지만, width, height, margin, padding 속성을 반영할..

Flexbox 구성 요소- 하나의 Flex container와 여러 개의 Flex item으로 구성- 부모 요소에 flex를 적용하면 모든 직계 자식이 플렉스 항목이 됨 1 2 3.container { display: flex;}.item { flex: 1;}container에 적용할 수 있는 속성1. flex-direction: 기본값은 row이며, 좌우로 배치됨 (row면 main axis는 좌우, column이면 상하)- row-reverse로 설정하면, 반대쪽 구석에서 시작하여 역방향 대열이 됨 2. justify-content: main axis를 기준으로 정렬, flex-direction가 row면 좌우로 정렬- 기본값은 flex-start로 item을 main axis의 맨 앞으로 ..

Grid- display의 속성값 중 하나인 이차원 레이아웃- columns, rows로 구성되며, 공백은 gutters라고 부름- 상품 페이지에 주로 쓰임 Creating your grid in CSS1. 그리드 정의하기- .container의 직계 자식들은 item이 됨.container { display: grid;} 2. 그리드 열 추가하기- 하나의 인자가 1 column이 되어, 총 200px column이 3개가 됨- 길이와 백분율을 사용하여 그리드를 생성할 수 있음.container { display: grid; grid-template-columns: 200px 200px 200px;} - fr 단위를 사용하여 그리드의 행, 열을 가변적으로 조정가능 함- 각 인자마다 공간의 비율을 나..

position- position 속성을 통해 요소를 배치 방법을 지정하고, top, left, bottom, right, z-index에 따라 오프셋 적용하여 을 통해 최종 위치 결정- 부모 중 제일 가까운 포지션에 기준하며, 포지션이 없으면 클래스 배너를 기준으로 함1. static: 기본값, 블록- top, left, bottom, right, z-index 설정 안됨 2. relative: 자신의 원래 위치(static 위치) 기준으로 배치- top, bottom을 같이 쓸 수 없음 (왜 안되는지는 모르겠음)ex) top: -50px; botttom: 50px-  이때는 상대단위, 퍼센트로 하는 건 좋지 않음 => 차라리 위치 변경은 translate를 사용하자 3. absolute: 가장 가까운..

호버, 액티브, 포커스 정리하자호버로 했을 때 겹치는 영역이 있으면 밑에 영역에 속하게해서 안바뀌게함Pseudo-classes- A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). - 클래스 이름:수도 클래스() 형식(인자가 있는 수도 클래스는 괄호가 있음) 너무 많아서 일단 배운 것만 했다. 나중에 다 차차 써먹으면서 채워갈 것임.Element display state pseudo-classes- 디스플레이 상태에 따라1. :fullscreen : 풀 스크인 모드일 때Input pseudo-classes- form과 관련된, 인터렉션 전후의 필드 상태에 따라..

Syntax1. [attr] : attr의 이름을 가진 속성이 있는 요소/* elements with a title attribute */a[title] { color: purple;} 2. [attr=value] : 속성 attr 값이 value과 같은 요소/* elements with an href matching "https://example.org" */a[href="https://example.org"]{ color: green;} 3. [attr~=value]  : 속성값을 공백으로 분리하였을 때, value 문자와 일치하는 문자가 있는 요소/* elements whose class attribute contains the word "logo" */a[class~="logo"] { ..

Anatomy of a CSS ruleset Selecting multiple elements- 선택자는 ,로 여러개를 선택할 수 있음.p { color: red; width: 500px; border: 1px solid black;}p,li,h1 { color: red;} Different types of selectors1. 요소  => p2. 아이디 => #id3. 클래스 => .class4. 특정 속성 선택자 => a[href="https://example.org"], img[src]    - 자세한 내용은 https://viscachas.tistory.com/entry/CSS-2-Attribute-selectors%EC%86%8D%EC%84%B1-%EC%84%A0%ED%83%9D%EC%9..