1분 코딩 Flex, Grid 인프런 강의를 듣고 만들어 봤습니다. 강의에서는 더 멋진 3D 보드판을 만드니, 관심있으신 분은 강의 영상(유료)을 참고하세요.그리드를 이용해 레이아웃을 만든 후 input, label 태그를 사용해 해당칸을 클릭할 수 있게 했습니다. 이
위코드 파운데이션 과정을 들으며 정리한 내용입니다.css 속성의 작성 순서는 동작이나 성능향상에 영향을 주지 않지만, 유지보수를 고려해 연관관계를 파악하기 쉽게 작성하는 게 좋습니다. 레이아웃에 영향을 많이 주는 순서대로, 인접 속성끼리 묶어서 작성합니다. 권장하는 속
위코드 파운데이션 과정을 들으며 정리한 내용입니다.기존 CSS 문법의 불편함을 개선하고자 나온 기술이 CSS 전처리기입니다. CSS 전처리기의 문법으로 파일을 작성하면, 실제 실행 전 브라우저가 읽을 수 있는 CSS 파일로 변환해줍니다. CSS 전처리기에는 많은 종류가
wecode 레플릿 과제를 풀며 정리한 내용입니다.input 과 textarea 태그로 사용자가 직접 텍스트를 입력할 수 있는 영역을 만들 수 있습니다.input 태그는 type 과 placeholder 라는 속성을 가집니다.type="text" 는 텍스트를 입력하는
CSS 의 display 속성은 웹 상에서 각 요소들이 어떻게 보여주고 서로 상호 배치되는지를 결정합니다. 여러가지 속성이 있는데 inline inline-block block 이 대표적입니다.display: inline - 문자 처럼 한줄에 가로로 배치되는 요소dis
CSS position 속성은 웹 문서 상에서 요소의 위치를 지정해주는 태그입니다. positon 속성에 relative absolute fixed 등의 값을 적용한 후 top right bottom left 를 사용해 최종 위치를 지정할 수 있습니다. 적절히 섞어서
노마드코더 크롭 앱 만들기 강의를 보고 만들어본 시계 앱입니다. 초 단위로 배경 컬러가 랜덤하게 바뀌는 Color-Clock 을 만들었습니다. 정해진 시간마다 함수를 반복하는 setInterval 과 현재 시간을 나타내는new Date() 를 사용해 시계 동작을 만듭니
위코드 사전스터디 과제로 자기소개 페이지를 만들며 정리한 내용입니다. flex 와 media query 를 활용한 반응형 다단구조를 만든는 연습을 하였고, 들어가는 이미지는 서버에서 불러오는 것을 고려해 html 태그에 스타일 속성으로 넣었습니다. 사이트 링크 깃허
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 flex를 사용해 크기에 따라 1단, 2단, 3단으로 바뀌는 반응형 카드 리스트를 만드는 방법입니다
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 가운데 정렬로 뜨는 모달을 만드는 방법입니다. html 마크업은 아래와 같이 작성합니다.이제 CSS
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 프로필 사진과 이름이 나열된 리스트를 만드는 방법입니다. 이름의 경우 길어지면 말줄임표를 사용합니다
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 프로필 사진과 메시지가 있는 리스트를 만드는 방법입니다.html 마크업은 아래와 같이 작성합니다.이
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 불릿 리스트를 만들 때 두번째 줄도(앞에 불릿이 없어도) 정렬이 맞도록 하는 간단한 방법입니다.ht
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 반응형으로 유연하게 늘어나고 줄어드는 검색창 만들기 입니다. 검색 버튼은 고정됩니다.기본적인 htm
1분코딩, 인프런 강의 CSS Flex와 Grid 제대로 익히기를 공부하며 기록한 내용입니다. flex 를 활용해 가장 기본적인 UI 형태를 만들어 봅니다. 아래 내용은 반응형으로 움직이는 상단 메뉴바로 마우스 호버시 색상과 크기가 자연스럽게 변경됩니다. 우선 htm