frontend3 setInterval로 타이머 만들기 setInterval 1초당 타이머의 1초가 증가하게 만들었는데 타이머가 오작동한다는 문의가 들어왔다. 내 컴퓨터에선 항상 잘 작동하는데 신기할 노릇이다. 결론부터 말하자면 setInterval 1000ms는 1000ms가 아니라는 것. updateStopwatch메서드가 동작할 때마다 현재시간과 시작시간의 차이를 계산하여 해결했다. 시간을 200ms로 한 이유는 너무 짧으면 컴퓨터에 부하가 걸리게 되고 길면 빠트리는 초가 발생했기 때문이다. 100ms부터 50ms씩 늘려 시간을 빠트리지 않는 시간이 200ms였다. 평소에 getTime()을 이용해 시간을 구했었는데 valueOf()도 똑같이 동작하는걸 확인했다. // stopwatch 시작 function startStopwatch() { stopwa.. 2023. 6. 13. 시맨틱(Semantic Elements)에 대해 알아보자 처음 이 단어를 들었을 때 흔히 아는 공사장에서의 시멘트(cement)를 생각했었지만, 아쉽게도 의미론(semant)이라는 뭔가 철학적인 단어인 반면 어렵지 않은데 브라우저와 개발자에게 요소자체로 의미가 있으면 semantic, 그렇지 않으면 non-semantic으로 정의된다. 요소들은 html상에서 태그로 구분되어지기 때문에 시맨틱 태그로 불리기도 한다. 대표적으로 html에서 영역을 나눌 때 쓰는 는 자체적으로는 의미가 없어 id나 class를 부여하여 추가적인 설명이 필요하므로 non-semantic태그이다. 반면, 는 웹페이지의 헤더를 나타낸다는 것을 알 수 있기 때문에 semantic태그이다. Semantic Tag 문서 또는 섹션의 헤더를 지정 탐색 링크를 정의 문서의 주요 내용을 지정 독립.. 2023. 2. 23. CSS Flexible Box(Flexbox)를 쉽게 배워보자: Flexbox Froggy Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com CSS 페이지 레이아웃에 유용한 Flexible Box에 대해 배울 수 있는 사이트이다. 작성하는 코드에 따라 우측에 즉각적으로 변경되는 화면이 있고 한글 지원도 잘 되어있어, 처음 배우는 사람도 쉽게 알아 볼 수 있다. 총 24단계의 문제풀이 형식으로 되어있고, 각 문제 당 css property 1개에서 많게는 3개정도 적는 문제라 문제수에 비해 짧은 시간 안에 배울 수 있다. 처음 익힐 때에는 30분정도, 어느정도 숙련된 후에는 10분정도 걸렸던 것 같다. 2023. 2. 15. 이전 1 다음
