반응형 분류 전체보기 HTML&CSS 2022. 7. 8. [CSS 고급] mix-blend-mode CSS 속성으로 소수점 단위 별점 구현하기 mix-blend-mode 속성은 생소하지만, 모던 웹 브라우저에서는 모두 지원하는 안정화된 속성입니다. 이 속성은 겹쳐진 두 개의 레이어의 색상이 어떻게 섞이는지를 결정하는 속성입니다. 두 레이어의 색상을 혼합해서 하나의 레이어로 합쳐져 보이도록 만드는 컬러 필터 이펙트 효과입니다. 효과는 극적이지만, 활용할 수 있는 용도가 그렇게 많지는 않습니다. 별점 기능은 만드는 방법이 여러 가지 있고, 자바스크립트의 도움을 받으면 소수점 단위 별점 기능을 어렵지 않게 구현할 수도 있습니다. mix-blend-mode 속성을 이용하면 기존의 구현 방법보다 더 간결하고 빠르게 소수점 별점 기능을 구현할 수 있습니다. mix-blend-mode 속성은 배경색과 전경 색의 색상을 혼합해서 색상을 얻는 컬러 필터 기능을.. 테크팁·활용 2022. 7. 7. 아이패드 화면을 캡쳐하는 방법 2가지 - 간편하게 화면 터치로 캡쳐하기 안드로이드 기기는 다양한 방법으로 화면 캡처를 할 수 있는 수단을 제공해서 화면 캡처에 아무런 불편함이 없지만, 애플 기기들은 이런 부분에서 많이 제한적입니다. 기본적인 사용법은 물리 버튼을 사용하는 방법이지만, 거치를 해놓고 사용하거나 할 때는 화면 캡처가 번거로워집니다. 이럴 때 대안으로 소프트웨어 캡쳐 버튼을 사용자 정의해서 사용할 수 있는 방법이 있습니다. 1. 물리키로 화면 캡쳐하기 기본 화면 캡처 방법입니다. 하드웨어 전원 버튼과 볼륨 버튼 한 개를 동시에 누르면 화면 캡처가 되면서 왼쪽 아래에 캡처한 이미지를 미리보기로 보여줍니다. 아이패드로 캡쳐한 이미지는 사진 앱의 스크린샷 에서 확인할 수 있으며, 이미지 포맷은 PNG입니다. 이미지 포맷은 변경할 수 없습니다. 2. 소프트키를 등록해 화.. 서버·DB·C# 2022. 7. 6. 우분투 서버 커멘드 라인으로 무선랜(wifi) 연결 설정하기 우분투 20.04 이상을 대상으로 합니다. 우분투 서버를 유선랜 상태에서 설치하거나, 배치 설치를 하면 무선랜이 잡혀있지 않은 상태에서 콘솔 로그인을 하게 됩니다. 콘솔만으로 운영하는 우분투 서버에서 무선랜을 설정하려면 다음 순서대로 설정하면 됩니다. 1. 네트워크 인터페이스 이름 알기 먼저 무선랜 네트워크 인터페이스 이름이 무엇인지 알아야 합니다. 기본적으로 무선랜카드는 인식이 되어있어야 합니다. 무선랜카드가 인식되어있지 않으면, 설치된 무선랜카드에 맞는 우분투용 네트워크 드라이버 설치부터 해야 합니다. ~$ ls /etc/netplan/ "wlp3s0" 또는 "wlan0" 와 같은 이름으로 표시되는 것이 무선랜 인터페이스 이름입니다. 2. 네트워크 설정파일 수정하기 소위 Netplan 파일이라고 하는.. 테크팁·활용 2022. 7. 6. 라즈베리 파이4 오버클럭하기 - 오버클럭을 잘못하면 오에스를 재설치 해야 한다. 개발용 서버로 사용하는 라즈베리 파이4를 뭐에 홀렸는지 오버클럭을 해보기로 했습니다. 개발용이어서 그냥 써도 뭐.... 성능이 딸린다거나 하지는 않습니다. 긁어 부스럼이 딱 이런 겁니다. 라즈베리 파이 오버클럭은 쉽습니다. vi 에디터로 부트 펌웨어 설정 파일을 엽니다. /boot/firmware/config.txt 구버전 우분투는 /boot/config.txt 입니다. 이런 저런 설정 내용이 있는데 다 무시하고 다음 내용을 추가합니다. arm_freq 는 AP 클럭 주파수, over_voltage 는 전압 오버 단계입니다. over_voltage=6 arm_freq=2000 라즈베리파이4는 기본 클럭이 1.5Ghz 입니다. 2000으로 설정하면 2Ghz로 동작합니다. 재부팅!!! 부팅하니 잘 동작합니다.. 테크팁·활용 2022. 7. 6. VSCode 코드 행들을 정순/역순으로 정렬하기 VSCode 편집기의 코드 행들을 정렬해서 정리를 하고 싶을 때 유용한 기능입니다. VSCode에도 텍스트 행들을 정순/역순으로 정렬을 하는 기능이 있습니다. 기능이 있기는 있지만, 사용 방법은 조금 번거롭습니다. 먼저 정렬할 텍스트 행들을 블록으로 선택합니다. Ctrl + P를 눌러서 커맨드 입력 바를 연 후 ">sort"를 입력합니다. "줄을 오름차순으로 정렬", "줄을 내림차순으로 정렬" 중 하나를 선택합니다. 블록으로 선택한 행들이 정렬되어 표시됩니다. 리뷰·윈도우10·오피스 2022. 6. 28. 아이패드 에어 5세대 64G 셀룰러 버전 구매 후기 - 원치 않았던 앱등이가 되었다. 보조용이라기보다는 유튜브 머신으로 쓰는 갤럭시탭 A 10.1 2019 LTE 버전을 대신할 태블릿으로 구입하게 되었습니다. 원래는 외부에서 급한일이 생길 때 원격지원용으로 사용하던 것이었는데, 장기간의 역병 때문에 집에서 원치 않는 수감생활을 하게 되면서, 원래의 기능을 상실을 하고 붙박이 유튜브 머신으로 전락을 했습니다. 역병이 끝나가면서 외부에 나가려다 보니 갤럭시탭 A로는 성능이 떨어져서 원격으로 뭔가 작업을 하기에도 이래저래 버벅거려서 업그레이드를 할 필요가 생겼습니다. 원래대로였으면, 적당한 중저가에 화면 큰 안드로이드 셀룰러 버전 태블릿이 구입 대상이었고, 갤럭시탭 S7 FE 12.4 셀룰러 버전을 살 예정이었습니다. 뭔가 시기가 꼬이면서 50만원 이하로 대란이 터졌을 때 LTE 버전 갤럭시탭.. HTML&CSS 2022. 6. 24. CSS 컬러를 사용하는 방법과 지원 색상 영역(Color Space) 기초 (#웹컬러, 컬러이름, RGB, HSL, HWB, LCH, LAB) Modern CSS, 흔히 최신 웹 페이지를 제작하는데 필요한 모던 CSS 속성에서 컬러 속성은 가장 빈번하게 사용하는 탑 티어 CSS 속성입니다. 많이 자주 사용하지만 많은 개발자와 웹 디자이너에게 웹에서 표현하는 컬러 값 표현을 편하게 사용하는 것은 그렇게 만만치 않습니다. CSS로 표현하는 컬러 속성 값은 평소에는 우리가 사용할 일이 없는 16진수(#FABB88) 값이거나, CSS 속성 값 표현으로도 생소한 함수형 표현(rgb(255,128,128,. 5))으로 값을 정의합니다. 다른 CSS 속성과 달리 컬러 속성 값은 색상 공간이나 색상의 혼합에 대한 기초 개념이 있어야 하기 때문에 제대로 이해를 하는데 많은 시간이 걸립니다. 그리고 그전까지는 대체로 좀 더 싸 보이는 고급스럽지 않은 색상과 원색.. 티스토리스킨/스킨 활용&패치 2022. 6. 22. 티스토리 블로그 스킨에 커스텀 SNS 아이콘 링크 붙이기 최근 배포하고 있는 스킨들 중 폰트어썸 아이콘팩을 사용하는 스킨 기준으로 설명된 내용이며, 다른 아이콘팩 라이브러리나 직접 제작해서 사용한 아이콘팩을 사용한 스킨, 다른 스킨 제작자 스킨에서는 해당되지 않을 수 있습니다. 제가 배포하는 스킨들은 대부분 폰트어썸이나 자체 제작 아이콘을 스킨에 적용하고 있습니다. 잘 알려진 소셜 서비스를 제외하고는 아이콘이 제공되지 않기 때문에 없는 아이콘 이미지들은 직접 제작해서 붙여 넣어야 합니다. 1. SNS 아이콘 이미지 준비 링크를 붙이고 싶은 아이콘을 먼저 다운로드 받습니다. 가능하면 png나 svg 포맷 이미지가 좋습니다. 투명 배경이 지원되기 때문에 테두리나 배경색이 있는 아이콘인 경우, 조금 더 보기 좋게 아이콘을 붙일 수 있습니다. 간단하게 개발자 블로그 .. 티스토리스킨/반응형 1단 스킨 2022. 6. 20. 티스토리 반응형 스킨 123 - 반응형 스쿨룩2 스킨 배포합니다. 2022.06.21 Version 1.1 패치 ------------------------------------------ 왼쪽에 고정된 자동 목차 기능 사용시, 페이지를 스크롤 하면 현재 위치의 자동 목차 항목이 하일라이트되는 기능 추가. 기존 사용자는 전체 스킨을 재 적용해야 합니다. 긴 내용의 글을 제공하는 블로그와 모바일 방문자가 많은 블로그에 최적화된 반응형 스킨으로 이용자 사용성이 초점을 두고 제작된 스킨입니다. 다양한 커버페이지 항목들을 지원합니다. 미리보기 화면에서 웹 브라우저 너비를 줄이면 모바일 화면에서 어떻게 보이는지 확인할 수 있습니다. 123 반응형 스쿨룩2 스킨 미리보기 #1 123 반응형 스쿨룩2 스킨 미리보기 #2 스킨 다운로드 1. 스쿨룩2 스킨 주요 특징 1단 반응형 스킨.. 티스토리스킨/반응형 1단 스킨 2022. 6. 15. 티스토리 반응형 스킨 122 - 반응형 플러리 스킨 버전 4 배포합니다. 기존에 배포된 반응형 플러리 스킨 V3의 업그레이드 버전입니다. 이용자 요청이 있던 주요 기능을 업데이트한 버전이며, 기존 배포 버전에서 달라진 부분이 많아 V3 버전의 패치로는 업그레이드를 할 수 없어 별도 스킨으로 배포를 합니다. 업그레이드 된 주요 기능은 1. 다크모드 지원 다크모드 표시 및 설정은 스킨 옵션 설정의 푸터 섹션에서 할 수 있습니다. 2. 감춤 사이드바의 사이드바 모듈을 블로그 하단 영역에 옮겨 고정으로 표시하는 기능 추가 블로그 하단에 고정으로 표시되는 사이드바 모듈은 블로그 관리자의 사이드바 메뉴 화면에서 "사이드바2" 영역에 원하는 사이드바 모듈을 옮기면 됩니다. 입니다. 추가된 기능 외에는 기존 배포하던 반응형 플러리 스킨 V3와 동일합니다. 반응형 플러리 V3 버전의 자세한 .. 티스토리스킨/스킨 활용&패치 2022. 5. 7. 티스토리 썸네일 "이미지를 표시할 수 없습니다" 오류 원인과 해결방법 안내 이미지 썸네일 생성 기능 일부 장애가 발생중입니다. 5월 7일 현재 티스토리 썸네일 생성 기능에 일부 장애가 있습니다. 5월 5일 경부터 발생하기 시작했고 월요일일 5월 9일에 담당자가 출근해야 해결될 것으로 보입니다. 썸네일 목록의 일부 이미지가 로딩되지 않고 지연이 걸리다 타임아웃이 나면서 "이미지를 표시할 수 없습니다" 곰돌이가 표시됩니다. 티스토리의 서비스가 늘 그래왔던 것처럼 꼭 주말이나 연휴를 끼고 문제가 발생하고 며칠간 방치가 됩니다. 아마도 월요일이 되면 해결될 문제겠지만, 불편해하시는 분들이 있다보니 질문이 달리고 있어서 안내를 합니다. 티스토리 시스템 문제이므로 어련히 알아서 해결하겠다 싶지만, 불편을 못참는 분들이 나름의 해결책을 찾아내서 공유를 하고 있습니다. 현재 티스토리의 공식?.. Javascript 2022. 2. 8. 최신 자바스크립트 문자열 바꾸기 메서드인 replaceAll() 사용하기 최근까지도 자바스크립트에는 다른 언어에서 지원되는 전역 문자열 바꾸기 기능이 없었습니다. 작년 그러니까 2021년이 되서야 ES2021(ES12) 표준 명세에 전역 문자열 바꾸기 메서드인 replaceAll() 이 추가되었습니다. 업데이트가 주기적으로 되는 대부분의 최신 웹 브라우저들은 이미 replaceAll() 메서드를 지원합니다. 개발자도구 콘솔에서 문자열에 replaceAll() 메서드를 적용해보면 지원하는지를 바로 확인할 수 있습니다. replaceAll() 메서드가 지원되지 않는 웹 브라우저에서는 다음과 같이 "is not a function", 또는 "지원하지 않는 속성이나 메서드" 이라는 에러 메시지를 표시합니다. replaceAll() 메서드가 없을 때도 replace() 와 정규표현식(.. 이전 1 2 3 4 5 6 ··· 70 다음 반응형
![[CSS 고급] mix-blend-mode CSS 속성으로 소수점 단위 별점 구현하기](http://i1.daumcdn.net/thumb/R300x0/?fname=https://blog.kakaocdn.net/dn/FNM0M/btrGOWbUTw6/nim95ofMQejqgh89eKtZK1/img.jpg)
