SVG 선형 그라디언트 SVG 그라디언트 그라디언트는 한 색상에서 다른 색상으로의 부드러운 전환을 의미한다. 또한, 동일한 요소에 여러 색상 전환을 적용할 수도 있다. SVG에는 두 가지 유형의 그라디언트가 있다. 선형 그라디언트 – <linearGradient>로 정의됨 방사형 그라디언트 – <radialGradient>로 정의됨 그라디언트 정의는 <defs> 또는 <svg> 요소 내에 배치된다. <defs> 요소는 “정의”의 약자로, 그라디언트와 같은 특수 요소의 정의를 포함한다. 각 그라디언트는 그라디언트를 식별하는 id 속성을 가져야 한다. 그래픽/이미지는 이후 사용할 그라디언트를 가리킨다. SVG 선형 그라디언트 – <linearGradient> <linearGradient> 요소는 선형 그라디언트(한 방향에서 다른…

SVG 드롭 섀도우 고급 기법 <feOffset> + <feBlend> 조합 이 필터 조합은 계층적 그림자 효과를 생성하기 위해 사용된다. 원본 그래픽 → 오프셋 처리 → 블렌딩의 3단계 프로세스로 작동한다. 오프셋과 블렌딩을 이용한 기본 그림자 흐림 효과 추가 <feGaussianBlur>를 이용한 부드러운 그림자 알파 채널 활용 검정색 그림자 생성 기법 컬러 매트릭스 적용 <feColorMatrix>를 이용한 색상 변형 💡 고급 기법 팁: • 필터 체인 순서 변경으로 다양한 효과 구현 • 매트릭스 값 조정 → 색상/명암 비율 변경 • 다중 feColorMatrix 조합 → 복합…

SVG 드롭 섀도우 필터 SVG <feDropShadow> feDropShadow 필터는 그래픽 요소에 그림자 효과를 추가한다. 예제 코드 설명 <filter>의 id 속성은 필터 고유 식별자 지정 <feDropShadow> 요소로 그림자 효과 구현 dx: 그림자의 X축 오프셋(12픽셀 이동) dy: 그림자의 Y축 오프셋(14픽셀 이동) stdDeviation: 그림자 흐림 강도(1픽셀) flood-opacity: 그림자 투명도(0.7 = 70%) <rect>의 filter 속성이 “f1” 필터 연결 💡 속성 활용 팁: – dx/dy 값 조절 → 그림자 위치 변경 – stdDeviation 0 설정 → 선명한 그림자 – flood-color 속성 추가 → 색상 변경 가능…

SVG 가우시안 흐림 효과 SVG <feGaussianBlur> <feGaussianBlur> 필터는 흐림 효과를 생성하는 데 사용된다. 예제 다음은 SVG 그래픽에 흐림 효과를 적용하는 예제이다. 코드 설명 <filter> 요소의 id 속성은 필터의 고유 식별자를 정의한다. 흐림 효과는 <feGaussianBlur> 요소로 구현된다. in=”SourceGraphic”은 전체 요소에 효과가 적용됨을 의미한다. stdDeviation 속성은 흐림 강도를 조절한다. <rect>의 filter 속성은 “f1” 필터를 참조한다. SVG <feGaussianBlur> – stdDeviation 속성 stdDeviation 속성은 흐림 정도를 결정한다. 값이 높을수록 더 강한 흐림 효과가 적용된다. 예제 stdDeviation 값을 55로 설정한 고강도 흐림 효과 예제이다.

SVG 필터 SVG 필터 – <filter> SVG 필터는 SVG 그래픽에 특수 효과를 추가하기 위해 사용한다. 모든 SVG 필터는 <defs> 요소 안에 정의된다. <defs> 요소는 “definitions”의 약자로, 특별한 요소 (필터 등)의 정의를 포함한다. <filter> 요소는 SVG 필터를 정의하기 위해 사용한다. <filter> 요소는 필터를 식별하는 필수 id 속성을 가진다. 그런 다음 그래픽/이미지는 사용할 필터를 가리킨다. 이후, <filter> 요소 안에 그래픽에 적용할 하나 이상의 필터 효과를 넣는다 (아래 표에서 필터 효과 요소 목록을 볼 수 있다). 예제 여기서는 <feGaussianBlur> 필터를 사용하여 SVG 그래픽을…

멀티사이트 지우기 워드프레스 멀티사이트(Multisite)를 제거하고 단일 사이트로 복원하려면 데이터베이스 및 코드 수정이 필요하다. ⚠️ 데이터 손실 위험이 있으므로, 반드시 전체 백업(DB + 파일) 후 진행하자. 동일 멀티사이트를 다시 운영하고자 하는 경우, 이 작업을 진행하면 데이터가 모두 유실된다. 데이터베이스 백업 phpMyAdmin 접속 백업하고자 하는 테이블 선택 오른쪽 상단의 내보내기(Export) 클릭 방식: 퀵 / 커스텀 중 하나 선택 형식: SQL 압축: gzip 또는 zip 선택 [실행(Go)] 버튼 클릭하여 다운로드 wp-config.php 파일 wp-config.php 파일에서 멀티사이트 구성하는 아래와 같은 코드를 찾아 삭제 또는 주석…

SVG stroke 속성 stroke 속성은 요소 주변에 그려지는 선의 색상을 설정한다. 여기서 여섯 가지 stroke 속성을 살펴보자. stroke – 요소 주변 선의 색상을 설정한다. stroke-width – 요소 주변 선의 너비를 설정한다. stroke-opacity – 요소 주변 선 색상의 불투명도를 설정한다. stroke-linecap – 선 또는 열린 경로의 끝 모양을 설정한다. stroke-dasharray – 선을 점선으로 표시하도록 설정한다. stroke-linejoin – 두 선이 만나는 모서리 모양을 설정한다. SVG stroke 속성 stroke 속성은 요소 외곽선의 색상을 정의한다. stroke 속성은 다음 SVG 요소와 함께 사용할 수 있다….

회원가입 못하게 워드프레스 사이트에 reCaptcha를 사용하고 가입하는 계정들이 많이 줄었는데, 어느 순간부터 더미 계정들이 굉장히 많이 가입하더라. 회원 가입을 막으려면, 어떻게 해야하는지 알아보자. 설정 관리자 대쉬보드 » 설정 » 일반 » 멤버십 – 누구나 가입할 수 있습니다. 네트워크 설정 네트워크 사이트 운영 중에는 위 방법으로 막을 수 없고, 네트워크 설정에 들어가서 회원 가입을 막을 수 있다. 관리자 대쉬보드 » 네트워크 설정 » 등록 설정 – 새 등록 허용하기 – 등록을 활성 해제했습니다. Ultimate Member 설정 네트워크 설정에서 등록을 활성 해제해도…

SVG fill 속성 fill 속성은 요소의 내부 색상을 설정한다. 여기서는 세 가지 fill 속성을 살펴보자. fill – 요소 내부 색상을 설정한다. fill-opacity – 요소 내부 색상의 불투명도를 설정한다. fill-rule – 도형의 내부를 결정하는 데 사용되는 알고리즘을 설정한다. SVG fill 속성 fill 속성은 요소 내부의 색상을 정의한다. fill 속성은 <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textPath>, <tref>, <tspan> SVG 요소와 함께 사용할 수 있다. fill 속성의 값은 색상 이름, RGB 값 또는 헥스(hex) 값이 될 수 있다. polygon, rectangle, circle,…

SVG <marker> SVG 마커 – <marker> <marker> 요소는 <line>, <path>, <polyline>, 또는 <polygon>의 시작, 중간, 끝에 마커를 만들기 위해 사용한다. 모든 SVG 마커는 <defs> 요소 안에 정의된다. <defs> 요소는 “definitions”의 약자로, 특별한 요소 (마커 등)의 정의를 포함한다. 마커는 marker-start, marker-mid, marker-end 속성을 사용하여 도형에 부착한다. <marker> 요소는 마커의 위치와 크기를 설정하는 6가지 기본 속성을 가진다. 속성명 설명 id 마커의 고유 ID. markerHeight 마커의 높이. 기본값은 3이다. markerWidth 마커의 너비. 기본값은 3이다. refX 마커가 정점(vertex)과 연결될 x 위치. 기본값은 0이다. refY…