디자인

[CSS] nth-child / n번째부터 n번째까지 CSS 변경

특정 순서의 CSS를 변경할 때 유용한 nth-child(). 다양하게 활용이 가능하다. 3의 배수인 박스 배경 변경 .box:nth-child(3n){ background:red } 20번째 이후 모든 박스 배경 변경 /* 22번 부터 이후 모든 box 폰트색 변경 */ .box:nth-child(n+20) { background:red } 1번째부터 5번째까지 박스 배경 변경 1번째부터 지정할때는 -n으로 시작하는 것 주의 .box:nth-child(-n+6) { background:red } 15번째부터 20번째까지 박스 배경색 변경 .box:nth-child(n+15):nth-child(-n+20) { background:red } 마지막에서 3번째 박스 변경 .box:nth-last-child(..

audio/video 태그 다운로드, 재생속도 메뉴 없애기

audio태그를 이용해서 음악을 넣으면 아래처럼 ... 버튼을 누르면 다운로드, 재생속도를 조절할 수 있는 메뉴가 뜨게 된다. 이 메뉴가 뜨지 않게하려면 태그 사이에 controlsList="noplaybackrate nodownload nofullscreen"을 추가하면 된다. noplaybackrate -> 재생속도 메뉴 안보이게 nodownload -> 다운로드 메뉴 안보이게 nofullscreen -> 영상의 경우 풀스크린 안되게 코드

무료 캘리그라피 손글씨 한글 폰트 다운로드

디자인하면서 간혹 캘리그라피 같은 손글씨 폰트가 필요할 때가 있는데 매번 찾기도 번거로워서 자주 사용하는 폰트들을 한번 정리해보고자한다. 손글씨체도 디자인에 다용도로 활용하기 어려운 애매한 폰트들이 많은데 이 폰트들은 깔끔하고 뭔가 프로페셔널해보이는 손글씨라 다용도로 활용하기 좋다. 더군다나 무료 사용이 가능하다는 점! (다만, 자세한 허용범위는 각 홈페이지를 참고!) 1. 제주한라산 제주특별자치도의 상징성과 문화적 고유성을 살리고, 국제도시로서 디자인적 예술적 품격을 갖춘 문화예술의 이미지를 담은 미래 지향적 서체 ■ 개인/기업/상업적인 용도 사용 가능 ■ 다운로드 : https://jeju.go.kr/jeju/symbol/font/infor.htm 2. 상상토끼 꽃길 사방간데 넘실데는 꽃길처럼 비단색..

부트스트랩 모달창 검정 배경 아래로 뜰 때 해결 방법 (Bootstrap Modal)

버튼이나 다양한 요소를 클릭시에 모달창을 쉽게 뛰울 수 있어 활용도가 높은 부트스트랩 모달창 부트스트랩 공식 홈페이지에 나와 있는대로 부트스트랩 스크립트와 CSS만 로드하면 쉽게 모달창을 띄울 수있다. https://getbootstrap.com/docs/4.0/components/modal/ Modal Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. getbootstrap.com 다만, 사용할 페이지 코드에 따라서 일부 변경이 필요한데 다른 CSS코드와 겹쳐서 종종 모달창이 백그라운드보다 아래쪽에 위치하는 경우가 ..

[CSS] background-image 배경 이미지 여러개 넣기

한 div에 여러 배경이미지를 넣고 싶은 경우 아래처럼 - background-image:에 url을 콤마로 구문하여 넣어주고 - background-size나 background-position도 배경 이미지 순서에 맞추어 순선대로 넣어주면 된다. - 동일한 옵션인 경우에는 콤마로 두번 입력할 필요 없이 한번만 입력하면 된다. (background-repeat:no-repeat;) .section1 { background-image:url('../img/main_bg1.png'), url('../img/main_bg2.png'); background-size:auto 300px, auto 196px; background-position:-100px 870px, right bottom 250px; bac..

웹폰트 소스, 시스템 폰트 TTF -> WOFF/WOFF2/OTF 웹폰트로 변환하기

구글폰트나 한글의 경우 눈누난나 사이트 이용하며 웹폰트를 쉽게 사용할 수 있지만 공개되어있지 않은 폰트의 경우 직접 웹폰트를 만들어주어야한다. TTF 파일이 있다면 웹폰트(woff, woff2, otf 확장자)로 확장자를 변경해주고, 파일들을 인클루드 해주면 쉽게 웹폰트 사용이 가능하다. 단, 웹폰트로 사용해도 저작권/라이센스 문제가 없는지 확인 후 사용해야한다. 웹폰트(WOFF, WOFF2, OTF)로 변환하기 1) 폰트 확장자를 변경해주는 https://cloudconvert.com/ 사이트에 접속한다. CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert +200 Formats Supported Cloud..

UX/UI 디자이너라면 읽으면 좋을 책 추천 LIST

인터넷 서칭하면서 읽고 싶은 책들을 메모해두었는데 블로그에도 정리해서 올려본다. 올해 안에 다 읽어볼 수 있을지...ㅎㅎ 훅: 일상을 사로잡는 제품의 비밀 전 세계 UX 분야 스테디셀러! 일상을 사로잡고 습관이 되는 제품의 비밀! https://product.kyobobook.co.kr/detail/S000061354159 훅: 일상을 사로잡는 제품의 비밀 | 니르 이얄 - 교보문고 훅: 일상을 사로잡는 제품의 비밀 | 전 세계 UX 분야 스테디셀러! 일상을 사로잡고 습관이 되는 제품의 비밀!‘훅(Hooked)’이란 뭔가를 대단히 즐기고 거기에 빠져 있다는 의미다. 이 의미를 살려 product.kyobobook.co.kr 구글은 어떻게 디자인하는가 모든 사람을 끌어안는 제품을 디자인하라! 숨겨진 차별을..

absoulte인 div 가운데 정렬하는 여러가지 방법

HTML 컨텐츠 예전 같으면 하나의 div를 position:absolute로 가운데 정렬하려면 아래와 같이 div의 절대 크기를 지정한 뒤 (width:900px), margin-left를 사용하여 박스 크기의 절반만큼 빼주는 방식을 사용하였다. 이게 가장 정확한 방법이긴 한데, 반응형으로 작업하다보니 일일히 박스 크기를 지정하는게 여간 수고스러운 일이 아니다. .contents { position: absolute; left: 50%; width: 900px; margin-left: -450px; } 절대적인 크기를 따로 지정하지 않고도 자동으로 가운데 정렬하는 방법은 아래와 같다. 가로로 가운데 정렬하기 방법1) .content { position: absolute; left: 0; right: 0..

[CSS] window.print() 머리글, 바닥글 없애기

프린트할 페이지 안에 아래와 같은 버튼을 넣으면 해당 페이지를 인쇄할 수 있는 창이 뜨게 된다. 하지만 이 인쇄창에는 머리글, 바닥글이 기본적으로 나오게되고 불필요한 정보들을 담고 있다. 사용자가 인쇄창 옵션에서 머리글과 바닥글에 해제해서 인쇄해도 되지만 따로 설정을 하지 않아도 머리글과 바닥글이 인쇄가 되지 않게 설정하도록 하려고한다. 방법 방법은 바로 css를 이용하는 것! 인쇄할 페이지 내에 아래의 코드를 넣어준다. 머리글과 바닥글은 페이지의 여백이 있어야 넣을 수가 있는데, 페이지의 여백을 아예 없애주어 머리글과 바닥글이 들어가지 못하도록 하는 원리이다. css코드 @media print { @page { margin: 0; } body { margin: 1.6cm; } } 결과 인쇄페이지의 머리..

CSS로 화살표 < > 만들기

슬라이더를 사용하거나 버튼에 들어갈 이런 화살표가 필요한 경우, 예전에는 이미지로 많이 넣었지만 요새는 디바이스 크기가 너무나도 다양해져서 해상도에 따라서 좀 깨져보이기도 한다. 어느 상황에서도 깨져보이지 않게 css로 그려보도록 했다. ::after 요소를 사용해서 border를 넣어 각도를 조절하면 쉽게 화살표를 만들 수 있다. 비슷하게 "CSS만으로 X 버튼 만드는 두가지 방법" 은 이 글 참고 CSS만으로 X 버튼 만드는 두가지 방법 닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 hongpage.kr CSS 코드 .arrow { position:..

CSS만으로 X 버튼 만드는 두가지 방법

닫기 버튼 만드는 경우 그냥 X 쓰기에는 세로로 긴 알파벳 모양이라 디자인적으로 좀 그렇고, 이미지로 사용하기에는 살짝 귀찮고했는데, CSS 만으로 X 버튼 만들기가 가능하다는 사실!! 첫번째 방법 : content: "\00d7" 를 활용 :after 에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 가능하다. .close {display:inline-block;*display:inline;} .close:after {display: inline-block;content: "\00d7"; font-size:15pt;} 그러면 이렇게 딱 깔끔한 X 버튼을 만들 수 있다. 크기는 font-size로 조정하면 되고 크기를 키울 수록 굵기가 자동으로 굵어진다. 두번째 방법 : tran..

[CSS] 무한 회전하는 이미지

브랜드 홈페이지에서 로고를 무한으로 회전시켜서 임팩트 있는 UI를 만드는것이 최근 자주 보이는 것 같다. 무한 회전하는 이미지를 CSS로만 구현이 가능하다는 사실! 코드는 매우 간단하다. .img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;} @keyframes rotate_image{ 100% { transform: rotate(360deg); } } animation: rotate_image 6s linear infinite; rotate_image 라는 이름을 가진 키프레임을 실행시켜라 6s : 6초에 한번씩 (animation-duration) linear : 동일한 속도로 (animation-timing-funct..

앱디자인 | 유저 플로우 툴 추천 - Overflow / user flow tool

Adobe XD로 앱 화면을 60페이지 넘게 작업을 마치고... 이 많은 내용을 어떻게 하면 개발자에게 잘 전달할 수 있을까 고민을 많이 했다. XD에서 프로토타입을 바로 만들어볼 수도 있지만, 개발자나 기획자에게 유저플로우를 한번에 이해시키기에는 한눈에 도식화 할 필요가 있었다. 여기저기 알아보다가 알게된 툴이 있는데 아주 좋은 것 같다! Overflow 툴 소개 The world's first user flow diagramming tool tailored for designers. Build and present beatiful user flow diagrams that tell a story. 오버플로우는 세계 최초 디자이너에게 최적화된 유저플로우 도식화 툴이다. 스토리를 말해주는 아름다운 유저플..