profile
https://jungsikjeong.github.io/ 이곳으로 옮겼습니다!
post-thumbnail

Flex 카드리스트

카드리스트 컨텐츠 높이조절 부모컨테이너에 flex하고, 내용이 들어가는곳에 아래 코드를 입력해주면 (flex-grow) 높이가 다른 문장이여도 박스가 자동으로 늘어난다.

2020년 2월 24일
·
0개의 댓글

rem과 em차이..

rem : html 폰트사이즈 기준em : 현재부모의 폰트사이즈 기준

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Flex 유연한 검색창

창을 늘렸다 줄였다하면 찾기 버튼은 위치가 고정되어있고 검색창만 줄어들었다 늘어났다함.부모가 flex속성이여서 자식들은 flex 아이템이된다.flex의 기본속성은 align-items:stretch 이다. (세로로 늘어남)=> 부모속성에 height:40px을 줄경우

2020년 2월 23일
·
0개의 댓글
post-thumbnail

Flex 메뉴

padding:1rem => 현재 폰트사이즈만큼 패딩을주겠다.font-size:1rem => 현재 html에 설정된 폰트 사이즈를 1rem으로

2020년 2월 22일
·
0개의 댓글
post-thumbnail

Flex 유용한 기법들

왼쪽 결과물에서 보다시피 C만 맨 끝으로 떨어트리고싶을때 사용하는 기법.으로는 구현이 어려울때 사용함왼쪽 결과물이 사진으로는 짤려보이지만 왼쪽에서부터 1:8:1 비율이라고 보면 된다. (총합 10)각 끝의 컬럼들은 width(사이트 크기)가 바뀌어도 고정되어있고 ( f

2020년 2월 21일
·
0개의 댓글
post-thumbnail

Flex 이미지 버튼 정렬 팁

위 사진과 똑같이 padding으로 이미지를 가운데 정렬 할 수 있겠으나,padding으로 할 경우 svg로 만든 폰트어썸과 같은것 들은 각기 크기가 달라 붕 뜨는 경우가 생김 그래서 flex사용을 권장함

2020년 2월 21일
·
0개의 댓글