Side Project9 HTML, CSS, JavaScript로 Calendar 만들기 - 2 < > body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.calendar-cont.. 2024. 7. 14. HTML, CSS, JavaScript로 Calendar 만들기 - 1 body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;}.wrap { width: 300px; border: 1px solid #000; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}#year, #month { text-align: center; margin: 10px 0; font-size: 20px;}.week { display: grid; grid-template-columns: repeat(7, .. 2024. 7. 13. HTML, CSS, JavaScript로 Calendar 만들기 - 기획 존댓말하는 거 성격 상 안되겠다. 이제부터라도 반말로 하겠다. 그림판으로 간단하게 틀을 잡았다. 디자인도 내가 만드는 것도 내가 하는 거라 특별히 요구사항 명세서가 필요하지 않지만 시작과 끝을 명확히 할 필요가 있으므로 구현하고자 하는 기능들을 명시하는게 좋은 것 같다. 디자인 요소1) 폰트( 각 숫자와 날짜, 글 데이터가 가지는 글씨체)- 날짜( 월, 년, 날짜)- 글씨( 제목, 요일)2) 섹션(달력을 구분 짓는 사각형 모양의 구분선)3) 양 옆으로 화살표 모양 버튼4) 아무 것도 없으면 밋밋하니 간단한 디자인적 요소( ex 이미지 )를 넣으면 좋을 것 같다. - 중요하지 않음 5) 요일 순서로 - 일요일부터 시작 토요일 끝기능적 요소1) 월, 년 (슬라이드나 직접입력 방식으로 숫자를 조절했으면 좋겠다.. 2024. 7. 11. HTML, CSS, JavaScript로 To Do List 만들기 - CSS로 꾸미기 조금 휑한 것 같아서 살짝 꾸며보기로 했습니다. 작년인가 재작년에 뉴모피즘이 인기였습니다. 한 번 도전~! 그림자는 이 사이트의 도움을 받았습니다.https://getcssscan.com/css-box-shadow-examples CSS Scan - The fastest and easiest way to check and copy CSSGoodbye to "Inspect Element" — Visualize the CSS of any element you hover over, instantly, and copy its entire rules with a single click.getcssscan.com 와! 근데 이러면 구분이 잘 안가나? 뉴모피즘은 병원 타일을 보는 기분인 것 같습니다. 2024. 7. 8. 이전 1 2 3 다음
