개발이야기/Html&CSS 썸네일형 리스트형 CSS Flexbox: 웹 디자인을 위한 궁극의 가이드 CSS Flexbox 소개 CSS Flexbox, 즉 유연한 박스 레이아웃은 웹 페이지의 요소를 효율적으로 배치하고 조정할 수 있는 강력한 CSS 도구입니다. 이는 복잡한 레이아웃을 간단하고 유연하게 구현할 수 있게 해줍니다. Flexbox의 작동 원리 Flexbox는 flex-container와 flex-item으로 구성됩니다. 컨테이너 내의 아이템들은 주어진 공간에 따라 유연하게 크기가 조정되고 정렬됩니다. 주요 속성과 사용 예시 flex-direction: 아이템의 배치 방향을 결정합니다. (row, column) .container { display: flex; flex-direction: row; } justify-content: 주 축(메인 축)에 따라 아이템을 정렬합니다. (flex-star.. 더보기 마우스로 이미지 그리기 (canvas, drag, drop, css, html 코드) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 마우스 드래깅으로 캔버스에 그림 그리기 마우스를 누른 채 드래깅하여 그림 그려 보세요 var canvas, context; function init() { canvas = document.getElementById("FRESH"); context = canvas.getContext("2d"); context.lineWidth = 2; // 선 굵기를 2로 설정 context.strokeStyle = "#FF007F"; // 마우스 리스너 등록. e는 MouseE.. 더보기 Material Design Lite Color 색상표 This is the complete list of classes you can give to your elements, enjoy!text classbackground classhex.mdl-color-text--red.mdl-color--red#f44336.mdl-color-text--red-50.mdl-color--red-50#ffebee.mdl-color-text--red-100.mdl-color--red-100#ffcdd2.mdl-color-text--red-200.mdl-color--red-200#ef9a9a.mdl-color-text--red-300.mdl-color--red-300#e57373.mdl-color-text--red-400.mdl-color--red-400#ef5350.mdl-.. 더보기 Material Design DatePicker 사용하기 (날짜 선택기) Material Design DatePicker 사용하기 (날짜 선택기) 최근 웹개발의 편의를 위해 웹디자인 관련 프레임워크(Framework)가 많이 출시 되었는데요, 그 중에 구글(Google) 에서 즐겨 쓰는 매테리얼 디자인(Material Design)을 이용하여 날짜선택기(Datepicker)를 사용하는 방법을 알려드리겠습니다. [공식 홈페이지 : https://getmdl.io] 공식홈페이지 명세를 찾아보면 날짜선택기(Date Picker)은 없는데요, 구글링을 통해 정보를 찾았습니다.좌표는 https://github.com/UgoSansH/mdl-datepicker 이곳입니다. 완벽한 일반 웹개발용이 아닌 노드서버(NodeJS) 전용으로 나와있는데, 약간의 코어소스 수정으로 일반 웹에서도 사.. 더보기 미적감각 없는 개발자를 위한 반응형 프레임워크(FrameWork) 미적감각 없는 개발자를 위한 반응형 프레임워크(FrameWork) 디자인은 해야하는데 직접 해보니 미적감각 없어서 10여년전 홈페이지를 연상하게 하는 나의 디자인 실력...... 그래서 저도 이런 반응형 프레임워크를 즐겨 쓰는게 제가 찾은 괜찮고 깔끔한 프레임워크를 몇개 소개 해볼까 합니다. 1. https://mdbootstrap.com무료와 유료 버전이 있고, 최신 트렌드인 리엑트(React)와 앵귤러(Angular) 등 Javascript 기반 언어를 지원하는 프레임워크. 최근 찾은거 중에 가장 깔끔하고 이쁘고 세련되어 있습니다. 메뉴얼이 전부 영어고 자세한 예제가 없어 초보 개발자분들이 사용하기엔 약간 난이도가 있습니다. 2. https://getmdl.ioMATERIAL 디자인으로 유명한 프레임.. 더보기 이전 1 다음
