JUST GO

ID 선택자 - ID 선택자(ID Selector)는 CSS 속성(Property)을 적용하기 위해 사용하는 선택자 중 하나로, 태그가 가진 아이디의 이름을 활용하되, 그 이름 앞에 샾(#)을 붙인다. - 다음과 같이 작성한다.("는 없는 것으로 한다.) "#아이디 이름" { "속성" : "속성 값"; "속성" : "속성 값"; "속성" : "속성 값"; } - CSS 스타일을 주기 위해 ID를 부여하는 것은 추 후에 ID가 겹칠 가능성을 제공함으로 사용을 자제한다. DIVDIV

CSS - CSS 속성(Property)은 다음과 같이 작성한다. "속성 이름" : "속성 값"; - CSS 속성은 세미콜론(;)으로 구분하여 여러개 작성할 수 있다. - 겹치는 속성은 아래와 같은 순서로 우선되어 적용된다. 속성 값 뒤에 !important 를 적은 경우.(나중에 CSS가 엄청 꼬이기 때문에 잘 사용하지 않음) 보다 명확하게(복잡하게) 해당 요소를 선택하는 경우.(ID 선택자 > 클래스 선택자 > 요소 선택자) 복잡도가 같다면 보다 아래에 적힌 경우. - 의사 클래스(Pseudo Class)는 어떠한 선택자에 의해 선택된 요소의 상태나 특성에 따라 선택자를 분기하기 위해 사용한다. 콜론(:)을 활용하여 다음과 같이 작성한다. "선택자":"의사 클래스" { ... } 클래스 선택자 - 클..

grid - 획일적인 레이아웃을 구성하기 위해 사용한다. - 그리드 컨테이너가 가지는 자식의 크기가 같거나 최소 크기의 배수 일때 사용한다. (주로) 가령, 유튜브나 에르메스 사이트. - 주의 : 데이터를 담기 위해 그리드를 사용하면 안되며, 레이아웃을 구성하기 위해 테이블을 사용하여서는 안된다. 그리드와 테이블의 역할은 다름. - 그리드화 할 부모 요소의 'display' 속성 값을 'grid'로 지정하면 된다. [속성] grid-template-columns - 그리드 컨테이너에 부여하는 속성으로, 열 크기의 비율을 지정한다. (개수도 동시에 지정함) - 열 크기의 비율은 fr(fraction) 단위를 이용한다. - 가령, 크기가 같은 두 개의 열을 지정하기 위해 아래와 같이 사용한다. - grid-..

flex - display 속성 값이 'flex' 혹은 'inline-flex'인 부모(Flex 컨테이너)가 가지는 자식 요소들의 흐름을 쉽게 설정하기 위해 사용한다. [속성] flex-direction - Flex 컨테이너에 지정하는 속성이다. - 이가 가지는 자식 요소들에 대한 흐름의 방향을 지정한다. - 이때 자식 요소들의 display 값과 관계 없이 정렬한다. - 속성 값 : - row : 행방향(가로방향) 정렬 - row-reverse : 행방향(가로방향) 역정렬 - column : 열방향(세로방향) 정렬 - column-reverse : 열방향(세로방향) 역정렬 [속성] justify-content - Flex 컨테이너에 지정하는 속성이다. - 'flex-direction' 속성 값의 방향과..