🔢 자바스크립트로 계산기 만들기 eval() 함수를 이용하여 계산기를 만듭니다. 난이도 ⭐ 예제 Retro Calculator with JS 기능 정의 버튼 클릭 > 클릭 이벤트가 발생한 값 저장 숫자 연산 +, -, /, * 양수/음수 +/- 소수점 . = 버튼 클릭 저장된 값들을 연산 연산된 값들을 출력 A/C 버튼은 현재 값과 저장된 값 모두 삭제, C 버튼은 현재 입력된 값만 삭제하는 기능 기본 구조 테이블 태그를 사용하는 방법도 있지만 모던 웹 방식에 맞추어 flexbox로 레이아웃을 설계했습니다. 기능이 같은 버튼들은 공통 클래스명을 줍니다. AC C +/- / 7 8 9 * 4 5 6 - 1 2 3 + 0 . = 스타일링은 window 계산기 버전, 아이폰 버전 등 원하는 느낌으로 하시면 됩..
⏰실시간 시간 구하기 난이도 ⭐ 예제 Real Time Clock new Date() 현재 날짜와 시간을 반환합니다. const today = new Date(); console.log(today) // Tue Apr 28 2020 14:40:02 GMT+0900 (대한민국 표준시) getMonth() 자바스크립트의 월은 0부터 시작하므로 1을 더해줘야 1~12월로 나옵니다. const month = today.getMonth() + 1; getDay() 요일 정보는 숫자로 이루어져 있습니다. 0 (일요일) ~ 6 (토요일) 2는 목요일이겠죠? const day = today.getDay(); // 2 Intl.DateTimeFormat 언어에 따라 날짜와 시간 서식을 지원합니다. 숫자로 나오는 요일을 ..
이메일 코딩은 보통의 코딩 방식과 다릅니다. 이메일 서비스(아웃룩, 지메일, 네이버 등)마다 아웃룩의 버전마다 렌더링 되는 화면은 상이합니다. 테스트를 하며 디자인과 맞춰야 하기 때문에 생각보다 쉽지 않은 작업입니다. 이 글은 최근에 아웃룩 이메일 템플릿 작업을 하며 느꼈던 특징들을 정리합니다. 👮🏻♀️ 공통 규칙 Inline Style 스타일시트를 별도로 작성하지 않고 인라인 스타일로 작성합니다. Table 가 아니라 로 레이아웃을 설계해야 합니다. 코드가 길어지는 단점이 있지만 대부분의 이메일 서비스들이 를 지원하지 않습니다. border와 table 사이 공간 제거를 해줍니다. Width width는 버전마다 인라인 스타일 적용 여부가 다르기 때문에 table 태그의 속성으로도 기재하여 명확하게 ..
CSS로 탭을 만드는 방법 중 하나는 앵커 태그로 마크업하여 CSS 선택자 :target으로 구현하는 방법이 있습니다. 이 방법은 몇 줄 안되는 CSS로 구현할 수 있지만 URL 해시를 사용하여 스크롤이 점프되는 이슈가 있기에 권장하지 않습니다. 이를 대체해주는 멋진 아이디어는 바로 input의 radio type을 이용하는 것이죵 체크박스, 스위치버튼을 커스텀할 때 label과 :checked를 활용하여 스타일링 하듯이 이 방법 또한 마찬가지입니다. HTML 탭 메뉴와 내용을 같은 div로 감쌉니다. .tab-label이 탭 메뉴의 역할을 합니다 input radio 기본 사용법처럼 name명은 모두 tabGroup으로 통일하고, 각 input id와 label for을 매칭합니다. Tab Menu 1..
Gulp는 node.js 기반으로 개발 프로세스를 자동화시켜 업무 시간 단축에 도움을 주는 도구_task runner_입니다. SCSS를 CSS로 변환할 수 있고, HTML로 작성된 UI를 컴포넌트화 하여 인클루드 할 수도 있습니다. 빌드 도구, 테스크 러너하면 webpack이 제일 많이 알려져 있죠? 많이 사용되는 webpack으로도 작업 할 수 있지만 걸프는 비교적 배우기 쉽고, 무겁지 않습니다. 정적인 화면 작업만 한다면 걸프도 충분합니다. 처음에 저는 gulp와 grunt 중에 무엇을 쓸까 고민하다가 더 대중화된 gulp를 사용했습니다. 걸프 폴더구조 설치할 경로에 폴더를 생성해줘야 합니다. project 폴더를 만들고 그 하위에 추가 폴더를 생성합니다. 저는 gulp-tutorial 폴더 밑에 ..
가뭄에 콩 나듯 사용하는 빈도수는 적지만, 알아두면 유용한 속성입니다. counter 속성은 화면에 자동으로 번호를 그려주는 기능을 합니다. 문법 counter(name, style) name 카운터 이름으로 변수처럼 네이밍합니다. style 기본값은 decimal(십진수)이고 list-style-type에 적용되는 속성들을 선택적으로 사용할 수 있습니다. list-style-type: disc, circle, square, decimal, decimal-leading-zero, lower-roman ... 사용법 1. 부모 요소에서 카운터 초기화 counter-reset: 이름 / 시작숫자 2. 사용할 요소에 카운터 선언 counter-increment: 이름 / 증감숫자 contnet: counter..
