Under the Sign of Saturn

전체 동의 우선 제일 먼저 태그의 type 속성을 checkbox로 둔다. 위 코드는 전체 동의를 위한 checkbox input 예제 코드. TailwindCSS와 섞어 써서 몇 가지를 설명하자면, sr-only : 라벨 내 태그 텍스트는 스크린 리더 사용자에게만 읽히도록 한다. rounded-full : border-radius: 50%;와 동일. 체크 박스 이미지를 둥글게 만든다. checked:bg-green-default : green-default라는 변수명으로 tainwind.config.js 파일에 등록해둔 색상으로 background-color를 지정해준다. 단, checked가 true일 때만 활성화하는 코드이다. appearance-none : appearance: none;과 동일한..

타이포그래피 디자인으로 된 포스터를 웹에 띄우게 되어서 세로로 글자를 정렬하는 방법을 찾아보던 중에 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..

반응형 레이아웃을 제작할 때, grid-template-columns의 repeat() 함수의 두 속성값 auto-fill과 auto-fit의 차이점. repeat() 함수 만일, 칼럼 12개를 반복한다고 하면, 우리는 명시적으로 repeat() 함수안에 그 값을 적어줄 수 있다. .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); column-gap: 12px; row-gap: 8px; } 이 가로 단 안에서 칼럼 12개가 미리 지정해준 row-gap, column-gap 값을 유지하며 정렬되어 있다. 브라우저에게 각 row에 컬럼 12개를 정렬하라고 했으므로, 화면 크기..

각 단위를 잘 모르고 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..