Under the Sign of Saturn

타이포그래피 디자인으로 된 포스터를 웹에 띄우게 되어서 세로로 글자를 정렬하는 방법을 찾아보던 중에 writing-mode 속성을 알게 됐다. 기본 정렬만 사용하다보니 해당 속성을 쓸 일이 없었는데, 원래 쓰고자 했던 값은 deprecated되었지만, 추후에 레퍼런스용으로 블로그에 남기기로 했다. Can I use에 검색해보니 2021년 12월 기준 Opera Mini만 제외하고 거의 다 쓸 수 있는데, 그중 sideways-lr, sideways-rl은 파이어폭스만 제외하고 사용할 수 없었다. A B C D E A B C D E 가 나 다 라 마 가 나 다 라 마 .alignment-lr { writing-mode: vertical-lr } .alignment-rl { writing-mode: vert..

CSS 속성 중 fixed와 sticky 활용을 잘 못하는 것 같아서, 다시 한 번 점검용으로 또 면접 준비용으로 기록을 남겨보려고 한다. 우선 CSS의 position property에는 static, relative, absolute, fixed, sticky 다섯 종류가 있다. CSS의 각 속성은 top, right, left, bottom의 속성에 값을 넣어 최종적으로 문서 내 요소가 의도대로 배치될 수 있도록 도와준다. 단, static의 경우에는 해당 속성들은 물론, z-index 같은 속성의 도움을 받을 수 없다. 문서의 원래 흐름에 자연스럽게 위치되기 때문이다. relative 해당 속성을 가지는 요소는 원래의 문서 흐름을 배제하지 않지만, 자기 자신을 기준 삼아 top, bottom, r..

문제 상황 버튼을 클릭하면 바로 위의 문단이 fade out 되면서 사라져야 하는데, 해당 부분을 드래그하면 draggable 하고, 복사까지 된다. 코드 .fade { animation: fade ease 1s forwards; } @keyframes fade { from { opacity: 1; } to { opacity: 0; } } 해결 방법 위 코드를 아래처럼 바꾼다. @keyframes fade { from { opacity: 1; pointer-events: all; } to { opacity: 0; pointer-events: none; } } 더 이상 Clickable 하지 않다. pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 ..

속성을 이용한 CSS 셀렉터는 거의 사용하지 않아서 잊어버렸는데, CSS Diner라는 귀여운 게임을 찾은 김에 Attribute만을 통해 셀렉트하는 방법을 정리해두면 좋을 것 같았다. A[attribute] a[href] input[disabled] input[type='checkbox'] 태그 네임, 클래스 네임, ID 등등 다른 CSS 선택자와 Attribute Selector를 함께 쓰는 방식이다. 위 예시는 href='anything'인 a 태그를 선택하거나 disabled 속성을 가진 input을 선택한다. [Attribute] [value] { .. } value라는 attribute를 가진 요소를 선택한다. ^, $, * [attribute^='value'] .toy[category^='S..

위처럼 텍스트의 path를 따서 애니메이션 효과를 주는 예제를 만들어봤다. 프로토타이핑 툴로 잘 사용하고 있는 figma로 기본이 되는 SVG를 만들고, 간단한 자바스크립트와 CSS로 애니메이션을 만들었다. SVG 태그 생성 figma로 아무 draft나 열어서 캔버스를 만든 다음, T 아이콘을 눌러 텍스트를 생성한다. figma에서 한글은 받침을 타이핑할 때 문제가 있어서, 한국어 텍스트로 SVG 소스를 준비해야 한다면, 포토샵 등 다른 도구를 사용하는 것이 낫다. 이렇게 아무 텍스트 박스가 생성되고, 현재는 Path를 따지 않았으므로 파란색 테투리가 텍스트 박스 전체에 걸쳐 있는 것을 볼 수 있다. 여기서 우클릭 -> outline stroke를 눌러주고, 이 상태에서 오른쪽의 Design 패널의 S..

각 단위를 잘 모르고 px만 주구장창 쓰다가, 생각난 김에 정리할 필요가 있어서, 이런 저런 강의들 모아 보고, 기록으로 남겨봤다. 요약하자면, px은 고정된 값, 비율을 반영하지 못하니 주의가 필요하다. em은 텍스트와 관련이 높은데, 어떤 디자인이 텍스트를 기준으로 삼을 경우 '그 비율을 계산해야 할 필요성이 있을 때 유용'한 단위. rem은 em의 한계를 극복하기 위해 나온 단위로, root인 의 기본 font-size만을 기준으로 계산할 수 있게 도와준다. em(엠)의 어원 - 과거 금속 활자를 찍던 시절, 폰트들의 기준점이 될 하나의 폰트 규격은 알파벳 대문자 M이 맡았다. M이 가장 폭이 넓고, 네모 형태를 띄었으므로, M을 담을 컨테이너는 마찬가지로 다른 알파벳들을 모두 담을 수 있었다. 이..

인터랙티브 웹 기술 관련 비주얼 아티클 강의를 듣고 알게 된 CSS 속성 중 하나인 will-change. 적재적소에 제한적으로 사용했을 때 성능을 올려줄 수 있는 속성이다. 앞으로 일어날 속성 변화를 미리 브라우저에 알려 브라우저가 최적화할 수 있도록 준비시키는 속성이므로, 성능 비용이 클 경우 제한적으로 썼을 때 효과가 크다고 한다. 이미 브라우저는 성능 최적화를 위해 가능한 한 모든 것을 시도 중이므로, 과하게 쓸 경우 오히려 반대 효과가 날 수 있으니 너무 많이 will-change를 쓰지 말 것. 마지막 수단으로 쓰라고 조언이 나와 있다. 21년 1월 확인했을 때, IE 지원이 안 된다고 나와 있다. 참고 developer.mozilla.org/ko/docs/Web/CSS/will-change ..

맨 처음 프론트엔드 공부를 시작할 때는 스프라이트 기법을 경험해보지 못했다가, 학원에서 웹 프로그래밍 미니 프로젝트를 진행할 때 처음 접하고 굉장히 신기했었다. background-image, background-position 프로퍼티를 매번 이용하며, 상당히 귀찮은 방법이라고 생각했는데, 나름 HTTP/1 프로토콜에서 리소스 요청을 덜 하기 위한 나름의 노력으로 탄생한 기법이었던 것이다. 우선 이 세 가지의 관계도를 보기 위해서는 HTTP/2와 HTTP/1의 차이점을 알아야 한다. HTTP는 웹 서비스에서 클라이언트와 웹 서버 간에 정보를 주고 받기 위해 사용되는 네트워크 프로토콜로, 여기에서도 새로운 기술이 기존의 기술을 보완하는 방향으로 발전하고 도입되는 것은 마찬가지다. HTTP/2 역시 HTT..