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

@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; } - 스크롤바 바디 부분 디자인 변경..