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