CSS

# Grid 2차원 레이아웃으로 수직, 수평 정렬을 동시에 할 때 사용 📍 용어 정리 Track : 행(row) 으로 된 한 줄, 열(column)로 된 한 줄을 의미한다. Line : 트랙과 트랙 사이의 간격을 의미한다. Cell : 하나의 칸, 즉 아이템이 배치되는 최소단위의 영역을 의미한다. Area : 여러개의 칸, 즉 하나 이상의 셀로 이루어진 영역을 의미한다. span : 그리드 선을 기준으로 확장하는 것을 의미한다. # Grid Container (부모요소에 적용) 1. display grid inline-grid 💡이 때, 그리드를 설정했다고 끝나는 것이 아닌 몇 개의 열과 몇 개의 행을 만들어 줄 건지 결정해줘야 한다. 2. grid-template-rows, grid-template-c..

# Flex 1차원 레이아웃으로 수직, 수평 정렬 둘 중 하나만 할 때 사용 flex요소는 계속 중첩해서 사용할 수 있음! 주 축으로 정렬하던 교차 축으로 정렬하던 여백이 있어야 사용 가능하다. # Flex 구분하기 container (부모 요소) item (자식 요소) 정렬을 하기 위해서는 자식 요소를 부모 요소로 감싸주어야 한다. # Flex Container (부모요소에 적용) 1. display flex inline-flex 2. flex-direction (방향) row : Itmes을 수평으로 표시한다. (✨기본값) row-reverse : 수평에서 Itmes의 순서를 역방향으로 표시한다. column : Itmes을 수직으로 표시한다. column-reverse : 수직에서 Itmes의 순서..

주차별 멘토링 미션 시작! 앞으로 있을 클론과제를 위해 사용해 보면 좋을 거 같은 CSS를 모아봤다. 근데 내가 쓸 수 있을지는 모르겠네..^^ 아냐 할 수 있어ㅎ 1. button See the Pen Button Hover Effects by Kyle Brumm (@kjbrum) on CodePen. See the Pen CSS BUTTONS!! by Derek Morash (@derekmorash) on CodePen. - 가상선택자 hover 와 가상요소 before, after를 사용해서 버튼에 다양한 효과를 준다. - 나는 뭔가 어떤 사이트에 들어갔을 때 간단해도 버튼에 간단한 효과가 있으면 계속 마우스를 올리게 되는 거 같음...!😋 See the Pen Confetti Button by M..