viscachas

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

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 속성을 반영할..

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 단위를 사용하여 그리드의 행, 열을 가변적으로 조정가능 함- 각 인자마다 공간의 비율을 나..

호버, 액티브, 포커스 정리하자호버로 했을 때 겹치는 영역이 있으면 밑에 영역에 속하게해서 안바뀌게함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..