bright jazz music

그리드 레이아웃( 여기서는  grid 요소를 말하는 것이 아님. 웹에서 자주 사용하는 격자 형태의 화면 구조를 말하는 것임)  See the Pen Untitled by Philip Ottam (@Philip-Ottam) on CodePen.

https://github.com/hojuncha997/Responsive-css GitHub - hojuncha997/Responsive-cssContribute to hojuncha997/Responsive-css development by creating an account on GitHub.github.com 추후 학습 내용은 위 리포지토리에 남긴다. 참고로 이 repo에 저장된 프로젝트는 순수 HTLM + CSS + JS로 구성돼 있다.    1. 플렉스박스 레이아웃은 반응형 웹 디자인에 적합한 그리드 레이아웃을 만드는 방법 가운데 하나이다플렉스 박스 레이아웃 용어 플렉스 컨테이너(부모 박스)플렉스 박스 레이아웃을 적용할 대상을 묶는 요소플렉스 항목(자식 박스)플렉스 박스 레이아웃을 적용할 대상..

materia ui 스타일의 textfield 만들기 label 태그의 for속성은 input 태그의 id 속성과 같아야 효과가 적용된다. See the Pen Untitled by Philip Ottam (@Philip-Ottam) on CodePen.

1. CustomTextField.js       CustomTextField type="text" name="password" placeholder="Contract code"/> import PropTypes from 'prop-types';import './CustomTextField.css';CustomTextField.propTypes = { type: PropTypes.string, name: PropTypes.string, placeholder: PropTypes.string, value: PropTypes.string,};export default function CustomTextField({ type, name, placeholder, value }) { return ( ..

https://www.youtube.com/watch?v=oSkDGtoY83A ≡ --> sidebar Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor, nisl quis facilisis consectetur,..

* { margin: 0; /* 브라우저 기본 마진 리셋 */ padding: 0; /* 브라우저 기본 패딩 리셋 */ box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */}#container { width: 100%; /* 내용 전체의 너비 */ margin: 20px auto; /*내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */ /* 추가 */}#header { width: 85%; /* 부모 요소의 너비와 똑같게 */ height: 120px; /* 헤더의 높이 */ background-color: #acacac; float: right;}#lefsidebar { /* width: 300px; 사이드바의 너비 */ width..