목록Design/Markup (24)

로메오의 블로그

css 텍스트 말줄임 - text ellipsis

한줄 줄이기 .call-summary p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 여러줄 줄이기 .call-summary p { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; /* 3줄 */ -webkit-box-orient: vertical; overflow: hidden; }
Design/Markup 2022. 3. 29. 14:05
customer scrollbar - webkit-scrollbar

.list-group {margin-top: 12px; height: calc(100vh - 190px); overflow-y: scroll;} .list-group::-webkit-scrollbar {width: 10px;} .list-group::-webkit-scrollbar-thumb {background-color: #999; opacity: .5; border-radius: 10px;} .list-group::-webkit-scrollbar-track {opacity: 0 } .list-group {margin-top: 12px; height: calc(100vh - 190px); overflow-y: scroll;} .list-group::-webkit-scrollbar {width: 10p..
Design/Markup 2022. 3. 29. 13:54
SVG 폰트 만들기

Figma 목록 SVG를 선택하고 export SVG 합니다. https://icomoon.io/app/#/select 위 사이트에서 import icon을 누릅니다. svg 파일을 모두 선택합니다. Select All을 누릅니다. Generate Font를 누릅니다. 아이콘 이름을 설정하고 Download 합니다. 압축을 풀고 style.css를 열어보면 .icon-contract:before { content: "\e900"; } 위와 같은 형태로 아이콘이 적용되어 있습니다. demo.html 파일을 열어서 코드를 변경해 봅니다. 브라우저에서 열어 확인 해봅니다. size와 color도 변경해 봅니다. Figma 목록
Design/Markup 2022. 3. 23. 09:33
Figma에서 Font Awesome 적용하기

Figma 목록 https://fontawesome.com/search?m=free Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com font를 검색합니다. 복사합니다. 피그마에서 붙여넣기하고, font: Font Awesome 5 Free 또는 Font Awesome 5 Brands 스타일은 Regular 또는 Solid를 선택합니다. Figma 목록
Design/Markup 2022. 3. 17. 17:19
[Gimp] 사각형 그리기

사각형 선택툴로 사각 선택합니다. 편집 > 선택 영역 따라그리기를 선택합니다. 색상을 선택하고 "선"을 누릅니다. 끝
Design/Markup 2021. 12. 21. 22:39
input file 이미지 미리보기 구현

단일파일 미리보기 단일파일 처리 멀티파일 미리보기 멀티파일 처리 Ajax 파일 업로드: https://romeoh.tistory.com/entry/jQuery-ajax%EB%A1%9C-form-data-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-multipart 코드 참조: http://yoonbumtae.com/?p=3304
Design/Markup 2021. 11. 9. 16:31
Apple 홈페이지 스크롤 애니메이션 [ScrollMagic ]

index.html 돈 많이 모아두셨죠? 지금 바로 구매하세요. app.css * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } .intro { height: 100vh; } .intro video { height: 100%; width: 100%; object-fit: cover; } .intro h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 80px; color:blanchedalmond; } section { height: 100vh; backgro..
Design/Markup 2021. 10. 28. 17:56
[Adobe Photoshop] 한글판을 영문판으로 변경

Adobe Photoshop 2020을 월정액으로 구매했는데, 한글판이네요. 포토샵은 항상 영문으로만 사용하다가 한글로 된게 익숙하지가 않습니다. 한글판을 영문판으로 변경합니다. Application > Adobe Photoshop 2020 > Locales > ko_KR > Support Files > tw10428_Photoshop_ko_KR.dat 위 파일을 다른이름으로 변경하고 포토샵을 다시 시작합니다. Application > Adobe Photoshop 2020 > Locales > ko_KR > Support Files > tw10428_Photoshop_ko_KR_.dat 파일명은 아무렇게나 변경해도 됩니다.
Design/Markup 2020. 1. 22. 13:54
Prev 1 2 3 Next