밀 종합 ٩(`╹ω╹´)و

프로그램 작성에 도움이 되는 유용한 소프트웨어나 컴퓨터 운영에 도움이 되는 소프트웨어. 즉, 사용자가 컴퓨터를 좀더 쉽게 사용할 수 있도록 도와주는 프로그램을 유틸리티라 한다. 이는 본격적인 응용프로그램이라기보다는 사용자가 컴퓨터를 사용하면서 처리하게 되는 여러 가지 작업, 예를 들면 파일 복사, 텍스트 편집, 데이터 정렬, 프린터 조작 등의 일을 편리하게 할 수 있도록 도와주는 프로그램이다. 대개 크기가 작고 간단하며, 단독으로 사용된다.

/* Keyword values */ box-shadow: none; /* 값이 2개인 경우 */ box-shadow: 60px -16px; /* 값이 3개인 경우 */ box-shadow: 10px 5px 5px; /* 값이 4개인 경우 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 값 4개 + color를 추가한 경우 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* 요소가 움푹 들어간 것처럼 사용할 경우 */ box-shadow: inset 2px 2px 2px 1px rgb(0, 0, 0, 0.2); 값 설명 2개인 경우 값으로 해석된다. 3개인 경우 값으로 해석된다. 4개인 경우 값으로 해석된다. [..

요소 href로 이미지 경로를 설정한다. width / height 값을 설정하지 않으면 원본 크기로 설정된다. width / height 둘 중 하나의 값을 넣으면 다른 한쪽의 값이 비율에 맞게 자동 설정된다. image 박스의 중앙에 배치된다. alt 속성을 제공하지 않는다. (대신 aria-label 사용) See the Pen [SVG] 이미지를 넣는 방법 by mill (@millfeel) on CodePen.

1. File => Export => Export as... 2. 파일 이름을 작성하고, 파일 형식을 SVG로 설정 => Export 클릭 3. SVG옵션 값은 기본값으로 사용 Minify - 체크한 경우: 코드가 한줄로 나열되어 용량이 줄어든다. - 체크 안한 경우: 코드가 보기좋게 나열된다. *코드는 Show Colde를 통해서 확인할 수 있다. Responsive - 체크한 경우에는 반응형이지만, 체크를 풀면 반응형이 아니다.

기본 속성 좌표 속성 속성 절대 좌표 x y 상대 좌표 dx dy 추가적으로 dx, dy 속성을 사용하면 설정된 좌표에 상대적으로 위치 이동시킬 수 있다. CSS 속성과 동일한 속성 속성 설명 word-spacing 단어 간격을 일괄적으로 적용 text-decoration 텍스트 밑줄, 윗줄, 가운데줄 처리가 가능 가로 정렬 text-anchor속성은 미리 서식이 지정된 텍스트 또는 자동 줄 바꿈 된 텍스트 문자열을 정렬하는 데 사용된다. 여기서 줄 바꿈 영역은 inline-size로 지정된 지점을 기준으로 결정된다. 속성 속성 값 설명 text-anchor start (기본값) 시작 정렬 middle 중앙 정렬 end 끝 정렬 세로 정렬 속성 속성 값 설명 dominant-baseline auto (기..

SVG 요소로 패턴 넣는 방법 요소는 요소의 자식 요소이다. id를 사용해서 패턴에 사용할 요소에 fill="url(#id)" 속성을 사용해서 연결한다. width / height의 값은 최소 0부터 최대 1이고, 필수 속성이기 때문에 생략 불가하다. See the Pen [SVG] 요소로 패턴 넣는 방법 by mill (@millfeel) on CodePen. CSS background에 SVG로 패턴 넣는 방법 See the Pen [SVG] CSS background에 SVG로 패턴 넣는 방법 by mill (@millfeel) on CodePen. *이미지 출처는 이미지 클릭하면 해당 페이지로 이동

SVG는 모든 기준점이 좌측 상단을 기준으로 하고 있다. 그렇기 때문에 기존에 알고 있는 HTML과 CSS를 기준으로 하면 생각한 것과 결과가 다르다. 그렇다면 어떻게 기준점을 바꿔줘야 할까? SVG의 기본값을 살펴보면 좌측 상단으로 설정된 것을 알 수 있다. transform-origin: center; transform-origin의 값을 center로 설정함으로써 중앙으로 배치 할 수 있다. See the Pen [SVG] Q. 도형 애니메이션 기준점이 이상해요. by mill (@millfeel) on CodePen. [공부 좌표] SVG마스터 - CSS 적용하기1

See the Pen [SVG] Q. 쉼표의 위치가 다르거나 없어요. by mill (@millfeel) on CodePen. 결론부터 말하자면 쉼표는 가독성을 편하게 하기 위한 용도기 때문에 어떤 위치에 사용을 하던 쉼표는 결과에 영향을 주지 않는다. 그래도 다른 사람이 작성한 코드를 이해하기 위해 쉼표를 어떻게 묶었는지 살펴보자.

See the Pen [SVG] 도형 그리기 by mill (@millfeel) on CodePen. 사각형 x: x 좌표 값 y: y 좌표 값 rx: 라운드 x 값 ry: 라운드 y 값 width: 가로 height: 세로 원 cx: 원의 x 좌표 값 cy: 원의 y 좌표 값 r: 원의 반지름 타원 cx: 원의 x 좌표 값 cy: 원의 y 좌표 값 rx: 타원 중심의 x 위치 ry: 타원 중심의 y 위치 선 폴리 라인 폴리곤 Q. 폴리 라인과 폴리곤의 차이는? 마지막 점을 첫 번째 점과 자동으로 연결하여 닫히는가의 차이 폴리 라인 - 닫히지 않음. 폴리곤 - 닫힘. *페이지 상단에 첫번째에 있는 코드펜을 참고하세요. [공부 좌표] developer.mozilla.org/en-US/docs/Web/SVG..

See the Pen [JS] 로드했을 때 input에 포커스 되게 하는 방법 by mill (@millfeel) on CodePen.