CSS

flex기능을 이용하여 메뉴를 만들어보자부모에 display: flex; 를 선언하여 hover시 item이 커지게 설정하면 손쉽게 메뉴를 만들수있다.

부모에 display: flex; 선언후 검색창부분에 flex: 1; 를 해주면 컨텐츠길이에맞춰 자동으로 길이조절이 된다.flex:1 의 의미는flex-grow: 1;flex-shrink: 1;flex-basis: 0%와 같다.

리스트에 display: flex; 선언해준뒤가상선택자에 설정해주면 손쉽게 불릿을 만들수있다.

flex를이용해 메세지 리스트 만들어보기리스트에 display: flex; 선언해준뒤.user-photo 의 이미지가 찌그러지지 않도록flex-shrink: 0; 으로 설정해주면형태가 유지되어 자연스럽게 나오게된다.

말줄임표 만들기

flex 로 모달창 만들기

업로드중.. flex로 3단 반응형 카드리스트 만들기 .card-image에 padding-bottom으로 background가 들어가도록 설정해준다. .card-desc height값이 컨텐츠 내용에 상관없이 균일하게 나오도록 .card-item에 flex 설정

auto-fill을 사용하면 최소 값을 유지하며 화면을 전부 채워주지는 않는다.auto-fit을 사용하면 자동으로 화면을 채워준다.

일반적으로 grid-template-rows 는 설정한값만큼만 적용이 된다.grid-auto-rows를 사용하면, 자동으로 설정 갯수에 상관없이 적용이 되는 모습을 볼수있다.

현재상태에서 셀의 영역지정을 해보자.grid-column-start로 시작할 셀의 라인번호grid-column-end로 끝나는 셀의 라인번호를 입력하여 셀을 합칠 수 있다.grid-row: 3 / 5; 와같이 /로 축약형으로도 입력할수있다.grid-row: 3 / s

각 영역에 이름을 붙이고 그 이름을이용해서 배치하는 방법이다.grid-template-areas: 'header header header' 'sidebar-a main sidebar-b' 'footer footer footer'; 의

margin도 마찬가지이다.aspect-ratioself!codepenbeomhak-lee/embed/gbONExW?default-tab=html%2Cresult그리드를 사용할때 저 더보기버튼을 세로 중앙으로 맞추는 방법이있다.align-self:center; 를 추가

background:linear-gradient를 이용하면 script를 사용하지않아도 transition을 이용해 이런 간단한 애니메이션을 구현 할수있다. 참고하도록하자.