이 기술 블로그를 만들기 위해 5년을 미뤘다.

css 작성시 특정 클래스를 갖는 요소에만 스타일을 적용하고 싶다면 아래와 같이 작성하면 된다./* nav, active 클래스를 동시에 갖는 요소에만 css 적용 */.nav.active { background-color: #0f1720;} 클래스 외 특정 속성을 갖는지에 대한 여부, 특정 속성이 갖는 값을 기준으로 css를 작성하는 방법도 있다.  HTML 요소가 특정 속성을 가지고 있을 때 스타일 적용선택자 뒤에 [속성명]을 붙여주면 해당 속성을 갖고 있는 경우에만 css가 적용되도록 작성할 수 있다./* data-cell-index 속성을 갖는 요소에만 css 적용 */div[data-cell-index] { background-color: #1187cf;}  HTML 요소의 특정 속성 값이..

간혹 처음 방문하는 페이지에 들어가면 아래처럼 가이드 영역이 보이는 경우가 있다. 필자는 심심할 때마다 위시캣을 자주 방문하는데, 종종 저런 화면이 뜨는 것을 볼 수 있었다. 과연 저런 가이드 영역은 어떻게 만들 수 있을까? 간단히 생각하면 HTML, CSS를 사용하여 특정 영역을 제외한 나머지 영역을 어둡게 처리하면 될 것이다. 위시캣은 tutorial-wrapper라는 반투명한 어두운 박스로 화면 위를 덮고, 강조하고자 하는 텍스트 영역을 하나 더 만들어서 해당 영역만 밝아보이는 것처럼 보여준다. 이 방법은 불필요한 DOM 요소가 추가되며, 중복된 텍스트 요소도 하나 더 생기는 단점이 있다. CSS의 mix-blend-mode 속성을 사용하면 불필요한 요소 추가 없이도 가이드 영역을 만들수 있다.  ..

@mixin & @include 디렉티브를 사용한 스타일 재사용 mixin은 CSS 내에서 공통으로 사용되는 스타일을 재사용할 수 있는 기능이다. 함수처럼 중복되는 스타일을 분리하여 별도의 이름을 붙여 사용할 수 있고, 파라미터를 정의하여 값을 전달할 수도 있다. mixin은 SCSS 문법 기준으로 아래와 같이 정의한다. scss 문법 기준으로 작성했으나, 중괄호({})와 세미콜론(;)을 제외하면 sass 문법도 동일하게 사용이 가능하다. 파라미터 이름 앞에는 $ 기호를 붙여주고, 기본값을 지정하고자 하는 경우에는 $파라미터명: 값 형태로 작성하면 된다. @mixin 디렉티브를 이용하여 mixin을 정의하고, 정의한 mixin은 @include 디렉티브로 사용할 수 있다. // 기본 mixin 정의 @m..

트랜지션(transition)은 자바스크립트를 사용하지 않고 CSS만 이용하여 애니메이션을 구현하는 방법 중 하나로, 특정 CSS 속성 값을 일정 시간 동안 변경되도록 할 수 있는 속성이다. transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; 트랜지션은 transition-property, transition-duration, transition-timing-function, transition-delay 4개의 상세 속성으로 이루어진다. 각 속성은 생략이 가능하며, 순서는 자유롭게 바꿔도 되지만 transition-duration이 transition-delay 속성 ..

보통 웹 개발을 할 때 그래프를 다룰 일이 생기면 라이브러리를 찾아서 사용하곤 했다. 이번에도 라이브러리를 이용하여 도넛 그래프 8개를 2행 4열로 배치하는 화면을 만드는 작업을 하게 됐는데, 그래프 배치가 내 맘대로 되지 않는 것이었따...! 동일한 크기의 반응형 사이즈로 도넛 그래프를 배치해야 하는데 반응형도 잘 안되고, 무엇보다 일렬로 그래프 배치가 안되길래 빡쳐서 내가 직접 도넛 그래프를 만들었다. (구글링 조아~~) 도넛 그래프를 만드니 생각보다 쉽고 할 만 하길래 막대 그래프(progress bar)도 만들었다. 사실 트리맵 그래프도 만들 수 있지 않을까 싶었는데 이건 그냥 jquery의 힘을 빌려서 커스텀만 하기로 했다. 나중에 좀 한가해지면 귀염 뽀짝한 트리맵 그래프를 만들어서 codepe..

이건 쓸 때마다 까먹어서 정리를 해놔야겠다.. ㅜㅜ CSS를 이용하여 아래 사진처럼 ... 말 줄임 처리를 할 수 있다. 한 줄 elipsis 처리 .elipsis { display: block; /* 이미 display: block인 요소에 적용할 경우 생략 가능 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 여러 줄 elipsis 처리 .elipsis { height: 20px; /* 높이를 꼭 지정해야 함 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 여기에 제한하고자 하는 줄 수를 입력한다. */ -w..

HTML 요소의 어트리뷰트 값을 받아와서 CSS에서 사용할 수 있다. HTML CSS에서 사용할 어트리뷰트 값을 태그에 지정한다. 어트리뷰트 이름은 아무렇게나 지어도 되지만, 보통은 data-* 형태로 명명하는 것이 국룰이다. 왜냐하면 DOM을 생성할 때 data-* 이름 형태의 어트리뷰트를 모아 dataset이라는 이름의 맵으로 만들어 주고, 이를 자바스크립트에서 사용할 수 있기 때문이다. (대충 효율적이라는 뜻) ... ... CSS 어트리뷰트 값을 CSS 내부 속성에서 사용하고자 할 때는 attr()로 감싸서 사용할 수 있다. ... .donut-chart > .donut::after { color: #fff; width: 70%; padding: calc(35% - .76vw) 0; backgro..

CSS를 이용하여 스크롤바를 건들 수 있다! 사실 기본 스크롤바는 아주 못생겼다. 못생긴 사진 먼저 보고 가자. 이제 스크롤바를 바꿔보자! 1. 스크롤바 숨기기 가장 기초인 스크롤바 숨기기부터 해보자. .layer-pop__round.grade::-webkit-scrollbar { display: none } 2. 스크롤바 디자인 변경 - 스크롤바 너비 변경 .layer-pop__round.grade::-webkit-scrollbar { width: 5px; } - 스크롤바 헤더 부분 디자인 변경 .layer-pop__round.grade::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 10px; } - 스크롤바 바디 부분 디자인 변경..