콘요맘떼 개발일지

웹 페이지의 컨텐츠와 스타일링을 분리하기 위해 등장한 CSS는 여러 가지 문제점을 가지고 있었다. 그 중 대표적인 문제점들은 다음과 같았다. (1) Global namespace : 모든 스타일이 Global로 처리되기 때문에 중복되지 않는 클래스명을 사용해야 함 (2) Dependencies : CSS 파일 사이의 의존 관계를 관리하기 힘듦 (3) Dead code elimination : 기능을 추가, 삭제, 변경할 때 관련된 CSS 코드를 처리하는 것이 번거롭다. (4) Sharing constants : CSS와 JS간 값을 공유할 수 없는 문제 (data 속성을 활용하는 방법이 있기는 하지만 현실적인 사용을 위해서는 제약이 많다.) (5) Non-deterministic Resolution : ..

z-index는 매우 간단하게 활용할 수 있는 CSS 속성이다. 어떠한 element에 position과 z-index를 지정해주면 z-index값이 높은 element는 위로, z-index값이 낮은 element는 아래로 내려가게 된다. 매우 간단하면서도 이 정도만 알아도 꽤 많은 프로젝트들을 진행하는 데에는 문제가 없었을 것이다. 그런데 opacity를 적용해서 z-index가 제대로 적용되지 않는 순간부터 문제가 발생한다. opacity는 투명도를 처리하고 z-index는 element의 layer를 다루는데 왜 서로 영향이 있는 것일까? 그에 대해 이해하기 위해서는 Stacking Context, Stacking Order 두 가지 개념에 대한 이해가 필요하다. Stacking Order (쌓임..

css를 활용해서 특정 element가 텍스트를 n줄까지만 보여주고 그 이상은 ellipsis(...) 처리하고 싶다면 아래와 같이 코드를 작성해주면 된다. 예시에서는 2줄을 기준으로 설정하였으며 빨간색으로 밑줄 친 부분에 n줄에 해당하는 값을 넣어주면 된다. 참고로 line-height를 지정해준 것은 텍스트가 2줄 이상인 경우 잘림 현상이 발생하는 것을 방지하기 위함이다. line-height를 지정해주지 않으면 g와 같은 일부 글자가 잘림 현상이 발생하기 때문에 루트 단에서 기본적으로 line-height를 normal로 지정하는 방법이 개인적으로 좋은 것 같다. 'n줄까지만 보여준다'는 단순한 기능인데 코드가 생각보다 길다. 만약 scss를 활용한다면 mixin을 만들어서 해당 기능을 보다 편리하..

현재 반응형 웹을 구현하는 가장 핵심 방법은 미디어쿼리를 사용하는 것이다. 그러나 미디어 쿼리는 한 요소에 대해 여러 화면에 대한 CSS 코드를 작성하기 때문에 전체적인 코드량이 매우 증가한다는 단점을 가진다. 만약 최소 크기, 최대 크기를 지정하는 정도의 간단한 반응형 스타일링이라면 css의 clamp 함수를 활용하는 것도 하나의 방법이다. clamp(min, preferred, max) clamp는 세 개의 값을 인자로 받는다. 첫 번째는 최소값, 두 번째는 일반적으로 적용되는 값, 마지막은 최대값이다. 즉 두 번째 값을 적용하되 그것이 최소값과 최대값의 범위를 벗어나지는 않는다. 일반적으로 두 번째 인자인 선호값(preferred value)에는 vw, vh 등 viewport를 기준으로 한 값이 ..

웹 클라이언트를 개발하다 보면 콘텐츠의 양에 따라 스크롤바의 유무가 변경되는 경우가 존재한다. 이렇게 되는 경우 스크롤바의 유무에 따라 내부 content 사이즈가 변경되기 때문에 UI적으로 변화가 발생한다. 이는 사용자 입장에서 매우 보기가 안 좋다. 스크롤바가 존재하던 존재하지 않던 동일한 레이아웃을 보여줄 수 있다면 편리하지 않을까? 이 때 사용할 수 있는 CSS 속성이 바로 scrollbar-gutter이다. scrollbar-gutter은 스크롤바가 할당될 위치를 미리 점지해줄 수 있다. scrollbar-gutter에 일반적으로 지정해줄 수 있는 값은 세 가지가 있다. (1) auto 기본값이다. overflow가 scroll이거나 auto이면서 해당 element가 overflow중이라면, ..

attr( )을 활용하면 다른 attritube와 마찬가지로 data-attribute에 담긴 값을 가져올 수 있다. 그러나 이전에 data-attribute를 소개하는 포스트(링크)에서 해당 방법은 content를 제외한 경우에는 사용을 지양해야 한다고 언급했다. 분명 값은 가져올 수 있는데 왜 사용하면 안 된다고 하는 것일까? 문제의 원인은 attr( )가 가져오는 값은 string이라는 점이다. 따라서 content를 제외한 경우에는 값을 가져와도 쓸모가 없다. 예를 들어서 color을 지정해주기 위해서 "#FFFFFF"라는 값을 data-attribute로 전달해줘도 이것은 헥스 코드가 아닌 문자열로 인식되기 때문에 색상이 적용되지 못한다. 마찬가지로 10, 5px, 3rem, 100vw와 같은 ..

특정 element의 위치를 이동시키는 방법에는 대표적으로 두 가지가 있다. 하나는 translate( )을 활용하는 것이고 다른 하나는 top, left, bottom, right의 offset을 지정하는 positioning 방식이다. 둘은 위치를 재조정한다는 점에서 동일한 결과를 수행하지만 근본적으로 다른 성격을 지닌다. transform( )은 좌표 공간의 변형을 통해 이동하기 때문에 다른 element에 영향을 끼치지 않는다. 하지만 positioning의 경우 해당 element를 여기다 '위치시키겠다'는 뜻이기 때문에 다른 element들에게도 영향을 끼치게 된다. 즉 transform( )은 모션을, positioning은 위치 지정을 위한 개념이기 때문에 그 목적이 다르다. 다른 elem..

currentColor은 색상과 관련된 css 속성 값에 넣어줄 수 있는 키워드이다. 만약 값으로 currentColor을 넣어주게 된다면 현재 color 속성에 지정된 색상을 대입할 수 있다. 만약 color 속성의 값으로 currentColor을 사용하게 된다면 상속받은 color 값을 사용하게 된다. 이번에 프로젝트 진행하면서 알게된 키워드인데 element 트리 내에서 특정 테마 색상 하나를 자꾸 사용하는 경우에 variable을 사용하는 것보다 관리 측면에서 더 좋게 사용할 수 있는 방법 같다.

CSS Grid Grid는 현 시점에서 가장 궁극적인 형태의 레이아웃을 제공해준다. 이미 Flex만으로도 레이아웃을 잘 짤 수 있는데 Grid를 공부해야 하는 이유는 무엇일까? Flex는 1차원의 개념에서 그치지만 Grid는 2차원의 레이아웃을 표현할 수 있다. Grid를 활용하게 되면 여러 라인의 아이템을 표현할 때 불필요한 row 혹은 column 컨테이너를 만들어주지 않아도 된다. 물론 Grid가 Flex보다 무조건 좋은 것이라고 볼 수는 없다. Grid는 전체적인 레이아웃을 잡아주거나 2차원의 레이아웃을 표현할 때 강점을 지닌다. 하지만 1차원의 레이아웃을 표현할 때는 단순한 Flex를 활용하는 것이 훨씬 효과적이다. 따라서 상황에 따라 Flex와 Grid 중 필요한 것을 적절히 활용할 수 있는 ..

1. 반응형 웹 (Responsive Web) - 하나의 HTML 파일과 하나의 URL로 각 기기 혹은 환경에 최적화된 웹페이지를 제공하는 것 - 모바일 기기 발전 초기에는 별도의 모바일 페이지를 운영하였는데 PC/모바일 두 가지 웹을 동시에 제작/관리해야 하는 문제가 발생해야 함에 따라 반응형 웹이 등장하였다. - 장점 (1) 유지보수가 간편하다 : 모바일, 태블릿, 데스크톱 등 다양한 환경에 대한 디자인을 하나의 파일에서 관리 (2) 마케팅에 용이하다 : 웹 마케팅에서는 접근성이 중요하기 때문 (3) SEO에 유리하다 : 반응형 웹은 하나의 주소와 하나의 파일만을 가지기 때문에 검색 엔진에 더 많이 노출되고 광고 비용을 줄일 수 있다. (PC/모바일 웹을 각각 운영하는 경우 무슨 정보가 정확한지 판단..