블로그 더욱 견고한 타입스크립트 타입스크립트로 전환할 때 일단 귀찮아서 any로 처리해뒀던 블로그 JSON 구조를 interface로 제작하기 시작했습니다.또한 return이 있는 함수들은 무엇을 return 해야 하는지 표시도 하는 등, 좀 더 깐깐한 검사를 할 수 있도록 업데이트하는 중입니다. 헤더 디자인 업데이트 제목 등을 아래로 내리고, 배경 불투명도를 0.5에서 1로 올리고, 배경에 그래디언트를 추가해 글자가 보이게 업데이트했습니다.이미지 자체를...
사용자의 스크롤, 클릭 등에 반응하는 페이지를 만들면, 1초에도 몇십 번씩 특정 함수가 동작해야 할 때가 많습니다.간단한 애니메이션을 출력하는 정도라면 상관없겠지만, 복잡한 그래픽 연산이 들어가는 작업을 아무런 최적화 없이 이벤트 리스너만 추가해두면 시스템 자원을 갉아먹고 디스플레이의 주사율보다 더 많이 실행되어 오히려 프레임 방어를 못 해주는 상황까지 발생하기도 합니다. 이렇게 무거운 함수를 돌리는 와중에도 event.preventDefault() 사용 여부를...
지난번엔 외적인 변화가 많았다면, 이번엔 외적인 변화는 크게 없이 내적인 변화가 많습니다. Typescript! 블로그에 사용하는 메인 자바스크립트 파일을 타입스크립트로 전환했습니다.별다른 오류도 없고, 혼자 하는 프로젝트에다 규모가 아직은 코드를 거의 다 외울만한 수준이기에, 필요성이 높진 않습니다. 하지만 뭘 어떻게 개떡같이 써도 오류 없이 실행되게 하는 인자한 자바스크립트는 작은 실수를 쌓아가기 쉽고, 작은 실수들이 모이고 모여 결국...
가끔 웹사이트에 투명한 배경화면을 넣고 싶을 때가 있는데, 웹에 널리 쓰이는 mp4는 알파 값(rgba 할 때 a)이 없어 투명한 색을 넣을 수 없습니다.mp4는 IE 9부터 어지간한 브라우저는 다 지원하는 반면, webm은 지원하는 브라우저는 좀 적어도(Can I Use), 훨씬 높은 압축률과 알파 채널이 있어 투명한 색을 넣을 수 있단 장점이 있습니다. 이번엔 간단하게 크로마키 등을 이용해...
접근성 높은 웹사이트를 만들기 위해 고려해야 하는 것 중 하나는 키보드 '만' 이용해도 사이트를 정상적으로 이용할 수 있어야 한단 것입니다. 시각장애나 신체장애를 가진 사용자는 키보드(혹은 그와 비슷한 장치)만 이용해 웹사이트를 이용해야 하는 경우가 많기에, 키보드로 선택한 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focus-visible이란 의사 클래스(가상 클래스 / pseudo class)를 통해 이를 디자인을...
다크 모드(다크 테마)란, 밝은 배경에 어두운 글자 대신 어두운 배경에 밝은 글자를 사용하는 것입니다. 눈의 피로를 줄이기 위해 선호하는 사람이 꽤 있고, 콘트라스트(Contrast)가 높아지기에 텍스트나 이미지를 강조하는 데도 효과적입니다만, 긴 글을 표시해야 할 땐 독이 될 수 있으며, 난시 등의 이유로 어두운 배경에선 글자를 읽기 어려워하는 사용자도 있어 호불호도 꽤 갈리는 편입니다.그럼에도 Windows 10, MacOS,...
최근 블로그의 JS, PHP 파일보다 CSS 파일에 훨씬 많은 시간을 할애했습니다.커밋 메시지도 훑어보면 죄다 디자인 관련된 내용입니다. 기능 구현 등은, '그 기능이 정확하게 동작하는가?' 혹은 '그 기능이 얼마나 빨리 동작하는가?' 등의 채점할 수 있는 기준이 분명히 있고, 정답에 가까운 코드가 분명 있는데, 디자인은 그런 게 없어서 굉장히 고통스럽네요.물론 제가 보는 눈도, 만드는 손도 없다는 게...
종종 이 더 보기 / 접기를 위해 자바스크립트(특히 jQuery)를 이용하는 케이스가 꽤 많습니다.하지만 화려한 효과 없이 이를 구현하는 건 HTML과 CSS만으로 충분합니다. HTML <details> <summary>Click me</summary> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia eum fugiat, dignissimos exercitationem, dicta quidem iste quia voluptatum iusto vel, eius maiores distinctio cupiditate optio laborum natus architecto...
Github 요즘 간간이 포토샵도 만지작거리는데, 보정 열심히 끝내면 원본이랑 비교해보는 재미가 쏠쏠하더라고요. 그러다 이미지 비교엔 슬라이더만 한 게 없단 생각에, 슬라이더를 한 번 제작해봤습니다.이래저래 찾아보니 죄다 jQuery로 만든 것뿐이더라고요. 외부 라이브러리에 의존하지 않게 제작해봤습니다. HTML <div class="comparison-slider"> <figure> <img src="./images/before.jpg" alt="before" /> <figcaption>Before</figcaption> </figure> <figure> <img src="./images/after.jpg" alt="after" /> <figcaption>After</figcaption> </figure> </div> .comparison-slider 안에 두 개의 figure를 추가하고, 그 안에 img와 figcaption을...
