Grid 아이템을 한줄에 두개씩 나오게하기 위해 아래와 같이 CSS 코드를 넣었는데, 어떠한 경우에는 아이템 크기가 넘쳐서 화면을 벗어나는 경우가 생겼다..ec-base-product ul.grid2 {grid-template-columns: repeat(2, 1fr);}  무슨 이유인지는 잘 모르겠으나, 구글링한 결과 아래처럼 바꿔줬더니 해결 가능했다..ec-base-product ul.grid2 {grid-template-columns: repeat(2, minmax(0, 1fr));}     참고 : https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items

유튜브 영상이나 쇼츠를 유튜브에서 복사한 코드 그대로 가져오는 경우, 반응형이 아니라서 기기에 따라 양옆에 여백이 생기게 된다.  적용전   반영형 영상 1) 먼저 영상 아이프레임 코드를   로 감싸준다.   2) CSS로 iframe이 영상 비율에 맞게 나올 수 있도록 한다..video-container { position:relative; height:0; padding-bottom:56.25%;}.video-container iframe { position:absolute; top:0; left:0; width:100%; height:100%;}     반응형 쇼츠여백없이 꽉차게 보일 수 있도록 하기 위해서는 아래처럼 CSS를 조정하면 된다. 1) 먼저 쇼츠 아이프레임 코드를 로 감..

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

placeholder 글자색 변경하는 방법은 아주 간단! CSS 파일에 아래 코드를 추가하면 된다. input::placeholder {color:#ccc;} input::-webkit-input-placeholder {color:#ccc;} input:-ms-input-placeholder {color:#ccc;} textarea::placeholder {color:#ccc;} textarea::-webkit-input-placeholder {color:#ccc;} textarea:-ms-input-placeholder {color:#ccc;}

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

버튼이나 다양한 요소를 클릭시에 모달창을 쉽게 뛰울 수 있어 활용도가 높은 부트스트랩 모달창 부트스트랩 공식 홈페이지에 나와 있는대로 부트스트랩 스크립트와 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코드와 겹쳐서 종종 모달창이 백그라운드보다 아래쪽에 위치하는 경우가 ..

SVG의 컬러를 변경하는 방법은 매우 간단하다. path 태그에 style="fill:컬러코드;" 를 추가하면 된다.

한 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 확장자)로 확장자를 변경해주고, 파일들을 인클루드 해주면 쉽게 웹폰트 사용이 가능하다. 단, 웹폰트로 사용해도 저작권/라이센스 문제가 없는지 확인 후 사용해야한다. 웹폰트(WOFF, WOFF2, OTF)로 변환하기 1) 폰트 확장자를 변경해주는 https://cloudconvert.com/ 사이트에 접속한다. CloudConvert Compress Merge Capture Website Create Archive Extract Archive Convert +200 Formats Supported Cloud..

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

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를 이용하는 것! 인쇄할 페이지 내에 아래의 코드를 넣어준다. 머리글과 바닥글은 페이지의 여백이 있어야 넣을 수가 있는데, 페이지의 여백을 아예 없애주어 머리글과 바닥글이 들어가지 못하도록 하는 원리이다. css코드 @media print { @page { margin: 0; } body { margin: 1.6cm; } } 결과 인쇄페이지의 머리..

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

닫기 버튼 만드는 경우 그냥 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..