CSS

margin : 1px; /위=아래=왼=오 여백/ margin : 1px 2px; /위=아래, 왼=오 여백/ margin : 1px 2px 3px; /위, 왼=오, 아래 여백/ margin : 1px 2px 3px; /위, 오, 아래, 왼 여백 (시계방향)/

display : flex가 적용된 element는 flex container, display : flex가 적용된 element의 children element는 flex item이 된다.rowrow-reversecolumncolumn-reverse: nowrap :

임계값은 top, right, bottom, left로 지정할 수 있다.

ex) : hover, : active, : focus, : nth-child()translate : element를 각각 x축과 y축으로 지정한 값만큼 이동시킨다.(단위 : px, %)scale : element를 x축과 y축으로 지정한 값만큼 크기를 변경한다.(단위

max-width : 뷰 영역에서의 최대 넓이, 즉 지정한 사이즈보다 작은 경우 적용min-widht : 뷰 영역에서의 최th 넓이, 즉 지정한 사이즈보다 넓은 경우 적용max-device-width : 디바이스 사이즈의 최대 넓이. 지정한 사이즈보다 작은 경우 적용m

상대 길이 단위는 다른 요소(상위 요소의 글꼴 크기 또는 viewport 크기)와 관련이 있다.상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다.상대 단위를 사용하면, 디바이스의 크기에 따라 레이아웃

pseudo selector(의사 클래스=가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있다.:hover:focus:active:root:first-child:last-child:nth-child()Pseudo element(의사

Attribute selector는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다.attrattr 이라는 이름의 특성을 가진 요소를 선택한다.attr=valueattr 이라는 이름의 특성값이 정확히 value인 요소를 선택한다.attr~=valueattr 이

인접 형제 결합자( + )는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택한다.former_element + target_element { style properties }자식 결합자( > )는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가

align-self는 align-items와 비슷하지만, align-items는 모든 item에 해당되고, align-self는 하나의 box에만 해당된다.align-content는 cross axis 방향으로 움직인다. 즉, cross axis가 row면 row 방향

grid도 flex와 마찬가지로 grid를 주고자 하는 자식 요소의 부모 요소에 display: grid; 를 주어야 한다.gird의 row(column)를 정의할 때 사용하는 property.grid-template-rows(columns) 에 원하는 만큼의 row(

grid-container(부모 요소)는 모두 grid child(자식 요소)를 갖고 있으며, 자식들을 늘려서 본인을 채우게 한다.(= cell을 채운다.)stretch 속성값은 grid-container가 grid child를 늘려서 grid를 채우도록 한다. (이때

SCSS 폴더에 variable 파일 생성.(파일 생성시, 파일 이름 앞에 "\_" 넣기)ex) \_variables.css이때, "\_"는 CSS로 변하는 걸 원치 않는 다는 의미이다.즉, SCSS만을 위한 파일이라는 의미이다.$variable name: value;