flex UI

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 반응형으로 유연하게 늘어나고 줄어드는 검색창 만들기 입니다. 검색 버튼은 고정됩니다.기본적인 htm

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 반응형으로 움직이는 상단 메뉴바로 마우스 호버시 색상과 크기가 자연스럽게 변경됩니다. 우선 htm

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 불릿 리스트를 만들 때 두번째 줄도(앞에 불릿이 없어도) 정렬이 맞도록 하는 간단한 방법입니다.ht

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 프로필 사진과 메시지가 있는 리스트를 만드는 방법입니다.html 마크업은 아래와 같이 작성합니다.이

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 프로필 사진과 이름이 나열된 리스트를 만드는 방법입니다. 이름의 경우 길어지면 말줄임표를 사용합니다

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 가운데 정렬로 뜨는 모달을 만드는 방법입니다. html 마크업은 아래와 같이 작성합니다.이제 CSS

1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 flex를 사용해 크기에 따라 1단, 2단, 3단으로 바뀌는 반응형 카드 리스트를 만드는 방법입니다