공부하는 개발자 핑구 🐧 공부하는 개발자 핑구 🐧

Referecne (CSS) input[type="date"] placeholder 적용 처리 "도움이 되셨다면 공감과 댓글로 지지해주세요!!" 시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다. input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 jobcoding.tistory.com 백 오피스 프로그램의 프론트단을 만들다가 유용한 속성인 attr(#variable)을 찾아 기록한다. 자세한 내용은 윗 블로그 참조! 👍 CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } HTML

# 컴파일러 설치 1. Node.js 사용자 (추천) npm install -g sass 2. MacOS brew install sass/sass/sass # 사용법 1. 단순 컴파일 sass input.scss output.css 2. watch 옵션을 이용한 실시간 컴파일 및 간단한 디버깅 // scss -> css 로 실시간 컴파일 sass --watch 파일명.scss:파일명.css // scss 폴더내의 모든 scss 를 참조하여, css 폴더에 실시간 컴파일 sass --watch scss폴더경로:css폴더경로

Flex 속성에 대해 아주 잘 정리된 글이 있다. * float 속성은 써보면 알겠지만 부모태그를 무시하기때문에 사용안하는게 좋다라는 나의 사견이다. # reference - https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com

# Position 속성 종류 static, relative, absolute, fixed, sticky # Description 1. static (default) - 디폴트 값으로써, top, right, bottom, left, z-index 속성을 사용 할 수 없다. 2. relative - 자신의 static 위치가 기준점 - 다른 sibling 태그의 위치에 영향을 주지 않는다. 3. absolute - 자신의 부모태그가 기준점 (부모태그가 relative를 가져야함, 아니면 body를 기준으로.) - 부모태그가 없는 경우, body가 부모태그역할 4. fixed - 스크린의 viewport 가 기준 (스크롤 시, viewport가 기준이므로 계속 고정된 위치에 존재) - 고정됨 5. stic..

# width, height 사이즈를 유동적으로 관리하기 종종 css 작업을 하다보면 특정구간은 값을 주고, 빈 공간은 그 값의 나머지로 채우고 싶을때가 있다. 이런 작업은 flex-grow로 하면된다. # HTML template div1 div2 div3 # CSS style

# 폰트단위 px 절대값으로 사용 되는 단위. 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않음. em 부모태그의 사이즈를 기준으로 정해지는 길이 단위. rem root(html 최상위 요소)를 기준으로 정해지는 길이 단위. # 미디어 쿼리 주의사항 미디어 쿼리의 중괄호 { } 안에 작성되지않은 css 스타일은 공통 css 스타일로 사용된다. 사용하기 싫다면 재정의 해줘야한다. /* Desktop CSS start*/ body{ display: flex; color : white; } /* .... other css styles */ /* Desktop CSS end*/ /* Mobile CSS start */ /* Destop CSS에 작성된 CSS st..