svg 태그에 대해 알아보면서 추가적으로 , , 태그에 대해 알아보았다.요소는 그라데이션에 사용할 색상과 위치를 정의할 수 있다.offset : 그라데이션 스톱이 그라데이션 벡터를 따라 어디에 배치되는지를 정의stop-color : 그라데이션 스톱의 색상을 정의stop-opacity : ****그라데이션 스톱의 투명도를 정의  태그를 사용하면 다른 SVG 요소에 선형 그라데이션을 적용할 수 있다.x1 : 기준 축의 시작 점 x좌표y1 : 기준 축의 시작 점 y좌표x2 : 기준 축의 끝 점 x좌표y2 : 기준 축의 끝 점 y좌표gradientTransform (그라데이션 변환) : 그라데이션 좌표 시스템에 대한 추가적인 변환단위 : %See the Pen svg linearGradient by pmin..

svg로 작업을 하던 중 , 태그가 보여 알아보았다.나중에 참조할 그래픽 요소 같은 것들을 담아놓는 공간 요소 내에 선언된 그래픽은 SVG 뷰포트에 렌더링 되지 않는다. 화면에 렌더링 하려면 요소를 통해 참조를 해야 하며 사용 방법은 앞서 다운 요소와 동일하다. 내부에 선언된 그래픽 요소의 id 속성을 요소의 xlink:href 속성을 통해 참조하여 문서 전체에서 사용할 수 있다요소는 문서 전반에 걸쳐 요소를 재사용할 수 있다. x, y, width, height 속성을 사용해 설정이 가능하며, xlink:href 속성을 사용해 재사용할 요소를 호출(식별자 ID 참조) 할 수 있다. 요소를 재사용함으로써 제작 시간을 아낄 수 있고, 코드를 최소화할 수 있다. 기본 사용법See the Pen d..

SVG란?벡터 그래픽을 표현하기 위한  XML 마크업 언어이다. 픽셀 단위로 이미지를 구성하는 png, jpg와는 다르게 벡터 기반으로 이미지를 표현할 수 있다. 벡터 기반이다 보니 이미지를 축소하거나 확대해도 이미지가 깨지지 않고, 용량이 작기 때문에 웹상에서 주로 사용하는 이미지 형식이다.  W3C에서 개발했으며 CSS, DOM, SMIL과 호환된다. 태그란?웹상에서 벡터 이미지를 구현하기 위해 사용하는 마크업 태그이다. SVG 이미지를 구현하기 위해서는 태그로 시작하는데 width, height 속성을 사용하여 이미지의 가로와 세로 길이를 조절할 수 있다. HTML 상에 코드를 그대로 넣어줌으로 웹상에서 벡터 이미지를 구현할 수 있는데, 이 장점은 이미지를 따로 로드하지 않아도 된다는 것이다. 이미..

태그를 통해 문서에 비디오를 다음과 같이 삽입할 수 있다.  video 태그에서 사용 할 수 있는 속성autoplay : 비디오가 실행될 준비가 끝나는 대로 자동으로 실행됨controls : 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됨width : 비디오의 너비를 픽셀(pixel) 단위로 명시함height : 비디오의 높이를 픽셀(pixel) 단위로 명시함loop : 비디오의 재생이 끝나면 자동으로 또다시 재생됨muted : 비디오의 음성 출력이 음소거 됨poster : 브라우저나 인터넷 문제등으로 영상을 재생할 수 없을 경우 표시preload : 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부src : 비디오 파일의 URL See the Pen v..

태그는 텍스트에 사용된 여백과 줄 바꿈이 모두 그대로 브라우저 화면에 나타낸다. Lorem Ipsum is simply dummy text of the printing and typesetting industry.   태그는 내부에 있는 글을 그대로 보여주기 때문에 긴 글을 일 경우 줄 바꿈이 안되고 영역을 넘어간다.그래서 pre 태그에 white-space: pre-wrap css 를 추가해줘야 자동으로 줄 바꿈이 이루어진다. Lorem Ipsum is simply dummy text of the printing and typese..