허도경, limewhale

이전에 누구나 쉽게 가로 스크롤 메뉴 적용하기라는 주제로 글을 작성한 적이 있습니다. 그곳에 어떤 분이 댓글로 질문을 해주셨는데요. 질문의 내용은 스크롤을 없애고 싶다는 것이 요점이었습니다. 우선 스크롤바를 사라지게 하는 방법으로는 스크롤 기능을 유지할 것인지, 스크롤 기능이 적용되지 않게 해서 스크롤을 없애달라는 것인지에 따라 방법이 나뉘게 됩니다. 스크롤 자체를 막고 싶다면 CSS 속성 overflow: hidden을 사용하면 스크롤 기능이 사라지게 됩니다. 아마 저분의 질문은 모바일이 아닌 웹에서 스크롤 기능은 유지하면서 스크롤 바의 모양만 없애고 싶었던 것 같습니다. 그 경우에는 아래 속성을 적용해 주면 됩니다. ul { scrollbar-width: none; -ms-overflow-style:..

GUI 작업을 진행하면서 간격에 대한 정의는 CSS에 정의하는 게 가장 좋다고 생각합니다. 하지만 유지보수와 CSS로 대응이 어려울 때, 개발 화면에서 직접 수정이 필요할 때 등 다양한 상황이 발생할 수 있는데 이럴 때 유용하게 사용할 수 있는 게 클래스로 간격을 만들어서 사용하는 것입니다. as-is to-be 코드도 간결해졌고 클래스명도 직관적이기 때문에 CSS를 잘 모르는 개발자분들과 협업을 진행할때도 유용하게 사용할 수 있습니다. /**************************************** * Padding, Margin 정의 * p는 padding, m은 margin을 나타냄. * t는 상단 b는 하단 l은 왼쪽 r은 오른쪽의 방향 * ex : * pt10 => padding-to..

CSS 그리드 레이아웃이란? CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. Flex와 지금 공부할 Grid의 가장 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Gri..

CSS에서 한번 익혀두면 두고두고 사용할 수 있는 Flexbox를 알아보려고 합니다. 지금 당장 본인의 코드에서 사용하고 있지 않다고 하더라도 이번만큼은 반드시 알아두면 도움이 될 거라 생각합니다. 그럼 지금부터 같이 Flexbox를 알아볼게요. 물론 Flexbox를 모른다고 해서 레이아웃 구성을 못 하는 것은 아니지만 확실히 알고 있으면 우리에게 많은 이점을 주는 것은 사실입니다. 밥을 숟가락을 이용해서 먹는 것과 손으로 먹는 느낌이랄까요? 한 번만 시간 내서 천천히 읽다 보면 어느 순간 Flexbox는 이미 내 코드가 되어 있을거에요. 그럼 우리는 이렇게 외치겠죠. Flex 해버렸잖아~~ 그럼 지금부터 진짜 Flexbox에 대하여 알아보도록 하겠습니다. 전체적인 내용은 참조 내용에 제가 읽기 편하도록..

요즘은 워낙 다양한 웹 폰트가 있고 각 회사마다 자신들의 회사에 맞는 아이덴티티를 갖는 폰트도 직접 제작해서 사용하는 회사도 생기고 있습니다. 가장 대표적인 예가 현대카드입니다. 동일한 사이트라도 폰트의 적용 여부만 다르게 해도 사이트의 느낌과 톤 앤 매너, 콘텐츠의 가독성이 변한다는 것을 쉽게 알 수 있습니다. 💡 웹 폰트란? 정확히 무엇일까요? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. ✔ typeface와 font 구분하기 typeface: 한글로는 서체라고 하며 공통 디자인을 공유하는 글꼴 전체를 의미합니다. 이 서체에는 굵기나 스타일 등이 포함될 수 있습니다. 예를 들어 Helvetica는 서체의..

안드로이드(Android)와 아이폰의 운영체제(IOS)의 차이점은 여러 가지가 있지만 그 중 대표적으로 UI 측면에서 구분되는 차이점이 화면 스크롤(Scrolling)입니다. 💡모멘텀 스크롤이란? 안드로이드는 모바일에서 화면을 스크롤(Android)링 하게 되는 상황을 예로 들어볼게요. 손가락으로 화면을 터치를 한 후 위나 아래로 손가락의 제스처를 주게 되면 사용자가 움직인 화면의 방향으로 일정 영역만큼 스크롤에 가속도가 생기면서 이동되었다가 서서히 가속도가 줄어들면서 스크롤링이 멈추는 스크롤링을 볼 수 있는데 이것을 모멘텀 스크롤이라합니다. 우리말로 바꾸면 관성 스크롤 또는 가속도 스크롤이라고 말할 수도 있을 거 같습니다. 💡 근데 모멘텀 스크롤을 왜 아이폰(IOS)에 적용해야 하나요? 안드로이드에는 ..

요즘 웹 사이트들이 사용자의 편의성을 위해서 웹 화면의 모드 변경(*다크 모드) 기능을 제공하고 있습니다. 또는 하나의 프로토타입 구조에 마크업이나 별도의 구조 변경 없이 컬러 값, 배경색의 변경을 통해서 다양한 테마형태로 전혀 다른 분위기의 화면을 연출하고 싶은 경우도 생기게 됩니다. 이를 CSS로 제어하기 위해서 모든 태그에 적용되는 CSS에 해당 테마에 맞는 컬러 값을 정의하는 것은 매우 힘든 작업이 됩니다. 이를 조금은 효율적으로 활용하기 위한 방법을 공유합니다. 그것은 :root 속성을 활용하는 방법입니다. CSS의 :root는 문서 트리의 루트 요소를 선택합니다. HTML의 루트 요소는 요소 선택자를 나타냅니다. :root { background: yellow; } CSS의 :root 선택자에..

프로젝트 작업을 진행하다 보면 같은 디자인인데 색상 컬러값만 다른 경우가 발생합니다. 이렇게 아이콘이 추가될 때마다 동일한 요소임에도 이미지는 계속해서 추가되는 문제가 발생하게 됩니다. 또 화살표(꺽쇠) 아이콘은 디자인을 하는 사람에 따라 크기나 색상이 차이가 발생하는 경우도 있습니다. 이런 꾸밈요소들이 이미지가 아닌 코드로 관리된다면 수정도 편하고 범용적으로 사용도 쉽게 됩니다. 이를 도와주는 것이 Svg입니다. SVG란? SVG(Scalable Vector Graphics)는 '벡터 그래픽'을 표현하기 위한 XML 기반의 포맷입니다. JPEG, PNG 등 픽셀 기반 이미지와 다르게 SVG는 '읽을 수 있는 코드'이므로 정보 접근성이 좋습니다. SVG 가져오기 - 포토샵 포토샵의 경우 벡터 도형(pat..

Sass(Syntactically Awesome Style Sheets)의 3 버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합입니다. SCSS는 CSS에서 사용하던 비슷한 문법으로 Sass 기능을 사용할 수 있습니다. Sass와 Scss의 눈에 보이는 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다. sass .list float: left li color: red &:first-child margin-right: -10px scss .list { float: left; li { color: red; &:first-child { margin-right: -10px; } } } Sass는 선택자의 유효 범위를..

이전에 CSS 방법론 중 하나인 BEM에 대해서 정리를 한 적이 있습니다. 현재 CSS방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 자세한 방법론에 대한 서술보다는 해당 방법론이 어떻게 다른지 또 어떠한 장점과 단점을 가지고 있는지 알아보도록 할게요. 3가지 방법론 중 무엇하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는 게 더 중요하다고 생각합니다. 그럼 우선 원론적인 질문을 하나 드릴게요. 왜 CSS방법론을 사용하는 걸까요? 잠깐씩 생각해보고 마저 아래의 글을 읽어가면서 본인의 생각과 일치하는지 보세요. 우선 제가 생각하는 방법론을 사용하는 이유는 나열해 보자면 협업 시 ..