Category: Web
인터넷, 웹 기술에 관련된 글들을 모은 분류입니다.
4
-
CreativeWeb 효율적인 다크 모드 구현을 위한 배경/전경 컨텍스트 기반의 컬러 팔레트 만들기 (feat. CSS variable) 2021/09/232021 09 23
지난 글에서 스타일시트 메인 코드상의 색상 지정은 CSS variable (변수)로, prefers-color-scheme미디어 쿼리를 이용해 유저의 선호 테마를 알아내어 상황에 알맞는 값을 줘서 단일 코드로 여러 테마를 표시할 수 있는 방법에 대해 알아보았다. 간략하게 복습해보자면, 이런 식으로 실제 스타일 선언은 한 번만 […]
-
CreativeWeb UI 디자인에 활용할 수 있는 다단계 Shade 색 팔레트 시스템 만들기 2021/09/022021 09 02
디자인에 있어서 색이 중요한 요소라는건 설명할 필요도 없이 누구나 납득할 사실일 것이다. 브랜드의 디자인 아이덴티티 (BI)를 만들 때에도 로고, 타이포그래피와 더불어 항상 빠지지 않는것이 브랜드 고유의 색 팔레트다. 코카콜라 하면 빨강색, 삼성 하면 파랑색… 하듯이 브랜드가 지정한 시그니쳐 컬러가 있다. 보통 로고에서 […]
-
Web CSS Variable을 이용해 손쉽게 다크/라이트 토글 가능한 스타일시트 만들기 2020/05/292020 05 29
이번에 블로그를 워드프레스로 마이그레이션하면서, 디자인을 완전히 새로 갈아 엎은 건 아니지만 그래도 오랜만에 작업하는김에 이곳 저곳 손 본 곳이 꽤 된다. 그중에 가장 눈에 띄는 변화라고 한다면, 아마 라이트모드의 부활일 것이다. 현재 굴리고 있는 블로그의 디자인은 2017년에 처음 런칭한 것으로, […]
-
Web 5분만에 CSS로 큐베 만들어보기 2012/01/102012 01 10
우선 기본적인 HTML 틀을 만들어줍시다. 독타입은 간단하게 흙탕물5로. <!DOCTYPE html><html><head></head><body><div class=”container”> <div class=”eye left”> <div class=”pupil”></div> <div class=”highlight”></div> </div> <div class=”eye right”> <div class=”pupil”></div> <div class=”highlight”></div> </div> <div class=”mouth left”></div> <div class=”mouth right”></div></div></body></html> eye는 공통요소로 pupil과 highlight이라는div를 넣어주고 left하고 right만 […]