CSS 클래스 네이밍 시 container vs wrapper 차이 구분하기 콘테이너로 정할까, 랩퍼로 정할까... container와 wrapper 모두 일반적으로 엘레먼트를 포괄하는 요소로서의 의미를 지니고, 클래스 이름으로 많이 사용되는 단어들입니다. 무언가를 포함한단는 데에서 같은 의미의 단어로 사용할 수 있고, 작성자와 해독자 입장에서 구분 없이 해당 내용을 받아들이는 데에 큰 문제가 없을 것입니다. 다만 보다 엄격하게 두 단어를 구분하여 사용한다고 하면 다음과 같은 내용을 참고하여 의미 구분을 할 수 있을 것으로 보입니다. 본 내용은 스택오버플로우에서 2010년 논의된 'CSS Language Speak: Container vs Wrapper?'의 내용을 기반으로 작성되었습니다. 해당 논의 내용을 보면, 기보적으로 차이를 두지 않고서 사용해도 무방하지만, 엄격하게 구분.. Border 속성이 부여된 박스 내부에 absolute 포지션 사용하기 Border는 CSS 박스의 콘테이닝 영역에서 제외되는 특징을 지닙니다 Border 속성은 CSS 박스 모델에서 별도의 고유 구성체계를 지니는 것처럼 보입니다. 값이 지정되면 border가 속하는 박스의 width와 height 값에 상관없이 영역을 차지하지만, 박스에 종속된 것이 아닌 별도의 개체처럼 활용이 됩니다. Border 속성의 개별성이 가장 잘 드러나는 특징은 border가 속하는 박스의 실제 콘텐츠를 감싸는 콘테이닝 영역에서 제외된다는 점입니다. 100px x 100px의 박스를 만들고 2px의 border를 부여한 박스가 있다고 했을 때 border는 콘테이닝 영역에서 분리됩니다. 이것은 박스 내부에 자식 엘리먼트의 위치를 정하는 데에 불편요소로 작용할 수 있습니다. Absolute 등의 .. 간단한 pure JS & CSS와 AJAX 활용 페이지 트랜지션 페이지 트랜지션을 만드는 방법에 있어서, swup 같은 라이브러리를 이용할 수도 있고 GSAP과 같은 advanced한 애니메이션 라이브러리를 활용할 수 있을 것입니다. 이 포스트에서는 기초 학습 차원에서 pure JS, CSS, AJAX(xhttp)를 이용해서 간단한 페이지 트랜지션을 만드는 방법을 학습하고자 했으며, 이를 구현해 보았습니다. 기본적인 원리는 overlay-screen이라는 클래스의 z-index 최상위 값을 갖는 요소를 width와 height를 0으로 숨겨 놓습니다. AJAX 콜을 날릴 때 overlay-screen에 width와 height을 변경시키는 애니메이션을 classList.add()를 통해 걸어 줍니다. animationend 이벤트를 받아서 classList.remov.. 색 (Color) 색은 다루기가 매우 힘든 디자인 요소 중에 하나입니다. 무한에 가까운 색 조합 패턴 속에서 적절하지 못하거나 일관성 없는 색상 사용으로 이어지기도 매우 쉽습니다. 색에 대한 이론적 이해나 실용적 활용법 등은 이미 다른 수없이 많은 자료들이 있기에, 이 부분들은 제하고 디자인 시스템 제작 관점에서 색을 시스템화하는 일반적인 패턴과 관련 지식을 알아 보고자 합니다. 디자인 시스템의 색 체계화: 디자인에 최적화된 컬러 팔레트를 구축하는 과정디자인 시스템에서 색을 정의한다는 것은 디자인에 활용할 컬러 팔레트를 정의하는 과정이라고도 볼 수 있습니다. 이 과정에서 단순히 주관적인 판단이 아닌, 브랜드와 서비스 특성 및 사용자 등 복합적인 디자인 제반 요소들을 고려하여 최적의 효율/효과성을 지닐 수 있는 컬러 팔레트.. 라디오 버튼 (Radio Button) 라디오 버튼? 라디오 버튼 역시 명칭과 기능이 현실에서의 메타포를 기반으로 합니다. 지금 세대는 모를 수 있지만, 과거 라디오 플레이어의 주요 버튼들의 의 동작은 하나의 버튼을 누르면 다른 버튼들은 모두 비활성 상태로 튀어 나오는 형태를 갖고 있었습니다. 아래 이미지를 참고하시면 이해가 편하실 수 있습니다. 이 버튼들은 라디오 주파수를 기억하는 Preset을 저장하는 데에 사용되거나, 아니면 카세트 테이프 이후 시대에는 카세트 테이프를 조작하는 용도로 사용되었는데, 공통적으로 하나의 선택값만을 활성화할 수 있다는 특징이 있었습니다. 하나의 선택값만을 활성화하는 속성을 그대로 유지하면서, 이와 같은 기능을 하는 GUI 상의 컨트롤 타입을 라디오 버튼이라는 이름으로 부르기 시작했습니다. 동그란 형태의 라디오.. 메뉴 (Menu) 메뉴란? 디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다. GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다. '선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항.. display: none에 애니메이션 추가하기 display: none을 활용한 element의 숨김/표시는 가장 기본적인 방식의 show/hide 처리방법입니다. 다만 CSS transition이 적용되지 않기 때문에 자연스러운 애니메이션을 구현하기 위해서는 약간의 추가적인 작업을 필요로 합니다. 간단한 클래스 추가 과정을 통해서 display: none을 활용한 show/hide 처리에 애니메이션을 추가하는 방법을 알아보고자 합니다. 기본적으로 animation을 display 개체에 추가해서 애니메이션을 추가함과 함께 display: none 속성을 애니메이션 재생 이후에 딜레이를 주어 추가함으로써 자연스러운 트랜지션이 가능하게 하는 방식입니다. [2022-02/2022-06 내용 추가] 본 내용은 display: none에 애니메이션을 추가하.. [MacOS] 언어전환(한영전환) 단축키 shift + space로 변경하기 2022년 07월 07일 추가 내용: 최신 MacOS 버전 업그레이드 이후 아래 기재한 Shift를 통한 키맵핑 방법은 작동하지 않습니다. 다른 키보드 맵핑 프로그램을 활용하거나, 시스템 설정을 변경하는 등의 방법을 취해야 합니다. 2016년경부터 맥OS에서 언어전환 단축키 기본값은, 영문의 대문자 고정용으로 사용되던 CAPS LOCK키가 사용되기 시작했습니다. 버튼의 위치나 크기는 큼직해서 누르기 좋아 보일 수 있으나, 어떤 이유에서인지 CAPS LOCK키를 사용하는 경우에는 언어전환에 있어서 딜레이가 발생하는 이슈가 있었습니다. 이것은 아마 오래 누르고 있으면 대문자 고정 기능을 수행해야 되는 기능 중복으로 인한 문제가 아닌가 싶습니다. 그래서 예전부터 사용되어 오던 CMD + Space 나 CTRL.. 이전 1 ··· 6 7 8 9 10 11 12 ··· 21 다음
