본문 바로가기

Webstoryboy

Category

Explanation

전체 글

 (864)
[SVG] <feFuncA> 요소는 요소는
[SVG] <feFlood> 요소는 요소는
[SVG] <feDropShadow> 요소는 요소는
[SVG] <feDistantLight> 요소는 요소는
[SVG] <feDisplacementMap> 요소는 요소는
[SVG] <feDiffuseLighting> 요소는 요소는
[SVG] <feConvolveMatrix> 요소는 요소는
[SVG] feComposite 요소는 요소는
[SVG] <feComponentTransfer> 요소는 데이터의 색 구성 요소별 매핑을 정의합니다. 요소는 데이터의 색 구성 요소별 매핑을 정의합니다.
[SVG] <feColorMatrix> 요소는 변형 행렬을 기반으로 색상을 변경합니다 요소는 변형 행렬을 기반으로 색상을 변경합니다
[SVG] <feBlend> 요소는 블랜딩 모드를 정의합니다. 요소는 블랜딩 모드를 정의합니다.
[SVG] <ellipse> SVG 기본 모양으로 중심 좌표 x와 y를 기반으로 타원을 만드는 데 사용합니다. 요소는 타원을 그립니다. 정의(Definition) 요소는 타원을 만들 때 사용합니다. 요소는 중심 좌표 x와 y를 기반으로 타원을 만듭니다. 속성(Property) 속성 설명 cx 타원 중심 좌표의 x축 값을 설정합니다. cy 타원 중심 좌표의 y축 값을 설정합니다. rx 타원의 x축 반지름 값을 설정합니다. ry 타원의 y축 반지름 값을 설정합니다. 1. 타원형 SVG를 이용한 타원형입니다. Sample1 CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .ellipse1 { fill: #f48fb1; cx: 80; cy: 80; rx: 60; r..
[SVG] discard 요소는 삭제할 시간을 정의합니다. 요소는 삭제할 시간을 정의합니다.
[SVG] <desc> 요소는 긴 텍스트 설명을 제공합니다 요소는 SVG 컨테이너 요소 또는 그래픽 요소에 대한 긴 텍스트 설명을 제공합니다
[SVG] <defs> 요소는 나중에 사용될 그래픽 객체를 저장하는데 사용됩니다. 요소는 나중에 사용될 그래픽 객체를 저장하는데 사용됩니다.
[SVG] <color-profile> 요소는 이미지에 사용된 색상 프로파일을 정의합니다. 요소는 이미지에 사용된 색상 프로파일을 정의합니다.
[SVG] clipPath 요소는 클립 패스를 정의합니다. 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다. 정의(Definition) 요소는 클리핑 마스크의 클립 영역 패스를 정의합니다. 1. clipPath SVG를 이용한 clipPath입니다. Sample1 HTML CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} TOTAL 호환성(Compatibility) 더보기 caniuse.com 6 7 8 9 10 11 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 참고(Reference) MDN SVG CSS Masking Module Level 1
[SVG] <circle> 요소는 원을 그리는 SVG 기본 모양입니다. 중심점과 반지름을 기준으로 원을 표현합니다. 요소는 원을 그립니다. 정의(Definition) 요소는 SVG 기본 모양으로 중심점과 반지름을 기준으로 원을 그리는데 사용됩니다. 속성(Property) 속성 설명 cx 원 중심의 x축 좌표 값을 설정합니다. cy 원 중심의 y축 좌표 값을 설정합니다. r 원의 반지름 값을 설정합니다. 1. 사각형 SVG를 이용한 사각형입니다. Sample1 CSS .svgBox .svg {width: 160px; height: 160px; background: #ffebee;} .circle1 { fill: #f48fb1; cx: 80; cy: 80; r: 60; } .circle2 { fill: #f48fb1; cx: 80; ..
[SVG] <animateTransform> 요소는 애니메이션을 정의합니다. 요소는 변화, 크기, 회전, 기울기 애니메이션을 정의합니다.
[SVG] <animateMotion> 요소는 모션 경로에 따라 애니메이션을 정의합니다. 요소는 모션 경로에 따라 애니메이션을 정의합니다.
[SVG] <animate> 요소는 애니메이션을 정의합니다. 요소는 애니메이션을 정의합니다.
[SVG] <a> 요소는 SVG의 하이퍼링크를 정의합니다. HTML의 태그와 비슷합니다. 요소는 하이퍼링크를 정의합니다.
[SVG] SVG SVG SVG(Scalable Vector Graphics)는 2차원 기반의 벡터 그래픽 마크업 언어입니다. SVG는 그래픽을 표현하기 위한 방식입니다. SVG는 텍스트 기반의 표준 방식이며, XML을 바탕으로 설정되어 있으며, 검색, 인덱싱, 스크립트 및 압축이 가능합니다. 또한 SVG는 에디터와 일러스트의 벡터 방식의 소프트웨어에서도 작성할 수 있습니다. SVG는 1999년 W3C(World Wide Web Consortium)에서 개발한 공개 표준입니다.
[CSS] z-index z-index z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. z-index z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. 특징 설명 기본 값 z-index : 1 버전 CSS2 정의(Definition) z-index 속성은 요소의 위치가 겹칠 경우 순서를 정의합니다. z-index는 음수(-)도 설정 할 수 있습니다. z-index는 숫자가 높을수록 위로 올라옵니다. 99999까지만 설정할 수 있지만, 그 이상도 작동은 합니다. z-index를 적용하지 않은 경우는 CSS 우선순위에 따라 나중에 설정한 속성이 위로 올라옵니다. z-index는 요소의 위치가 겹쳤을 때 적용하기 때문에 position 값을 설정해야합니다. 문법(Syntax) z-index : aut..
[CSS] word-wrap word-wrap word-wrap 속성은 줄바꿈을 설정합니다. word-wrap word-wrap 속성은 줄바꿈을 설정합니다. 특징 설명 기본 값 word-wrap : normal 버전 CSS3 정의(Definition) word-wrap 속성은 줄바꿈을 설정합니다. 문법(Syntax) word-wrap : normal | break-word 속성(Property) 속성값 설명 normal word-wrap 속성의 기본 값입니다. break-word 줄바꿈을 합니다. 호환성(Compatibility) 6 7 8 9 10 11 word-wrap 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] word-spacing word-spacing word-spacing 속성은 단어 사이의 간격을 정의합니다. word-spacing word-spacing 속성은 단어 사이의 간격을 정의합니다. 특징 설명 기본 값 word-spacing : normal 버전 CSS1 정의(Definition) word-spacing 속성은 단어 사이의 간격을 정의합니다. 문법(Syntax) word-spacing : normal | length 속성(Property) 속성값 설명 normal 기본값입니다. length 단어와 단어 사이의 간격을 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 word-spacing 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] word-break word-break word-break 속성은 줄바꿈 속성을 설정합니다. word-break word-break 속성은 줄바꿈 속성을 설정합니다. 특징 설명 기본 값 word-break : normal 버전 CSS3 정의(Definition) word-break 속성은 줄바꿈 속성을 설정합니다. 문장이 길어지면 줄바꿈(normal)이 일어납니다. 이때 단어(keep-all)를 기준으로 줄바꿈을 할지, 글자(break-all)를 기준으로 줄바꿈을 할지 결정하는 속성입니다. 문법(Syntax) word-break: normal | break-all | keep-all 속성(Property) 속성값 설명 normal word-break 속성의 기본 값입니다. break-all 글자를 기준으로 줄바꿈을 합니다...
[CSS] width width width 속성은 요소의 가로 값을 정의합니다. width width 속성은 요소의 가로 값을 정의합니다. 특징 설명 기본 값 width : auto 버전 CSS1 정의(Definition) width 속성은 요소의 가로 값을 정의합니다. 문법(Syntax) width : auto | value 속성(Property) 속성값 설명 auto width 속성의 기본 값입니다. length width 속성 값을 단위로 설정합니다. % width 속성 값을 %로 설정합니다. 호환성(Compatibility) 6 7 8 9 10 11 width 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능
[CSS] white-space white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. white-space white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. 특징 설명 기본 값 white-space : normal 버전 CSS1 정의(Definition) white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다. 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 ..
[CSS] visibility visibility visibility 속성은 요소를 보이지 않게 정의합니다. visibility visibility 속성은 요소를 보이지 않게 정의합니다. 특징 설명 기본 값 visibility : visible 버전 CSS2 정의(Definition) visibility 속성은 요소를 보이지 않게 정의합니다. visibility : hidden;는 요소를 보이지 않게 하지만, 요소 영역은 그대로 유지됩니다. display : none;는 요소를 보이지 않게 하고, 영역도 사라지는 점이 비교됩니다. 문법(Syntax) visibility : visible | hidden | collapse 속성(Property) 속성값 설명 visible visibility 속성의 기본 값입니다. hidden 요소를 ..
1 ··· 8 9 10 11 12 13 14 ··· 29
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바