알쓸잡 알쓸잡

IT/CSS

• 무료 이미지(사진) 편집 프로그램

  IT/CSS 2021. 12. 3. 07:22

  무료로 사용 가능한 이미지 편집툴이 있습니다. 무료 웹 기반 포토샵 클론 앱, '포토피아' 포토피아(Photopea)는 웹 기반 에디터로 어느 브라우저에서든 사용할 수 있고 인터페이스가 기본적으로 포토샵의 툴과 메뉴를 기반으로 하여, 어도비 소프트웨어에 익숙하고 완전히 새로운 툴을 배우고 싶지 않다면 포토피아를 이용해보세요. 단, 웹 기반이므로 강력한 하드웨어의 장점은 누리지 못하고, 일부 키보드 단축키는 오랜 포토샵 사용자도 새로 배워야 하는 불편합이 있으며, 무료 사용자에 대한 기능적인 제한은 없지만 유료 결제시 광고가 없고 히스토리가 더 길게 저장됩니다. 복잡하지만 강력한 '김프' 김프(GIMP)는 리눅스 사용자에 오랫동안 사랑 받은 이미지 에디터로, 현재는 모든 플랫폼에서 사용할 수 있습니다. 처..

  Read More
• CSS 변수 사용 및 javascript로 동적 수정 방법

  IT/CSS 2021. 10. 25. 10:43

  CSS 변수 설정 및 사용법은 아래와 같다. /* 전역 변수 설정 --변수명:값 */ :root { --my-favorite-color: blueviolet; } /* 변수의 element 적용 var(변수명) */ .my-element { background-color: var(--my-favorite-color); } 그럼, 동적으로 변경을 할 수 있을까? javascript에서 css 변수 조회 및 변경을 위해 아래와 같은 함수를 지원한다. // 인라인 스타일에서 변수 얻기 document.documentElement.style.getPropertyValue("--my-favorite-color"); // 어느 곳에서나 변수 얻기 getComputedStyle(document.documentElem..

  Read More
• 픽셀에서 REM 계산 하는 법

  IT/CSS 2021. 10. 7. 09:50

  폰트 크기를 REM 으로 지정하는 경우, 정확한 크기를 알고 싶을 때가 있다. 디자이너가 px 단위로 줄 경우 그러지 않을까? 그럼, 픽셀을 어떻게 REM 으로 변경할 수 있을까? html{ font-size:16px; } 위와 같이 root 가 16px 인 경우 계산식은 아래와 같다. // 계산 방법 = 지정할 픽셀 / Root 픽셀 8px = 8/16 = 0.5 rem; 16px = 16 / 16 = 1 rem; 20px = 20 / 16 = 1.25 rem; 32px = 32 / 16 = 2 rem; html{ font-size:16px; } /* 20px 크기를 주고 싶을때 */ h3{ font-size:1.25rem; }

  Read More
• CSS background dots 처리하기

  IT/CSS 2021. 10. 1. 08:47

  배경을 dots(점)으로 처리하고 싶을때가 있다. 보통 background에 이미지를 사용하여 처리하기도 하는데, 이미지 없이 구현하는 법이 있다. SCSS $bg-color: hsl(256,33,10); /*배경색*/ $dot-color: hsl(256,33,70); /*dot색*/ /* 점영역 크기 */ $dot-size: 1px; /*점 크기*/ $dot-space: 22px;/* 점 간격 */ body { background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center, linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) ce..

  Read More