이세계개발자의 개발일지

SVG 파일을 삽입하는 법 태그 사용하기SVG 파일은 이미지이기 때문에 일반적인 이미지를 삽입할 때처럼 태그를 사용해 삽입할 수 있다.이미지를 삽입할 때와 마찬가지로 태그의 width 속성과 height 속성으로 크기를 지정할 수 있다Ex. SVG 소스 그대로 넣기앞에서 설명한 것처럼 SVG 이미지는 XML 문법을 사용한 소스이기 때문에 웹 브라우저에서 바로 보여줄 수 있다 그래서 SVG 소스를 그대로 웹 문서에 삽입해도 된다SVG 이미지는 태그와 태그 사이에 이미지 정보를 기록한다 fill : 이미지의 색상height : 이미지의 높이viewBox : 이미지가 그려질 공간 크기SVG 이미지를 소스 형태로 사용하려면 웹 편집기에서 이미지 소스를 연 후 ..

SVG 이미지는 아이콘이나 로고 등을 웹 문서에 삽입할 때 많이 사용한다. 특히 CSS 스타일을 조절할 수 있기 때문에 편리하게 사용할 수 있다SVG 이미지의 특징화질에 영향을 받지 않는 벡터 이미지다SVG는 scale이 가능한 벡터 이미지라는 뜻이다. 여기에서 scalable 이라는 부분이 중요한데 이미지 크기를 늘리거나 줄이더라도 화질에 영향을 받지 않는다는 의미이다.스타일 수정이 쉽다svg 파일을 사용하면 간단한 코딩을 통해 이미지를 수정할 수도 있다 예를 들어 간단히 색상 값만 수정해서 같은 이미지를 반복 사용할 수 있다XML 기반의 문서SVG 파일의 수정이 간단한 것은 SVG가 이미지 파일 뿐만 아니라 XML 문법을 기반으로 하는 문서이기 때문이다 그래서 웹페이지에서 svg 이미지를 열면 이미지..

SlidesJS 플러그인터치를 지원하면서 반응형으로 동작하는 이미지 슬라이드 쇼 플러그인이다CSS3 트랜지션을 사용해 화려한 효과를 낼 수 있다. 대부분의 캐러셀 플러그인은 이전 화살표와 다음 화살표를 이미지 바로 위에 표시하지만 이 플러그인에서는 캐러셀 아래쪽에 표시한다SlidesJS 사이트에서 다운로드할 수 있으며, EXAMPLES 에서 여러 예제와 사용법을 함께 볼 수 있다Camera slideshow 플러그인이 플러그인 역시 이미지 슬라이드 쇼를 위한 플러그인이다이미지뿐만 아니라 캡션과 비디오도 삽입할 수 있다 간단한 이미지 슬라이드 쇼에서부터 섬네일이 있는 이미지 슬라이드 쇼까지 만들 수 있다jQuery Mobile 을 함께 연결하면 모바일에서도 슬라이드 쇼를 사용할 수 있다이 플러그인을 사용하..

Owl Carousel 플러그인은 터치 지원, 자동 스크롤, 속도 조절, 오른쪽에서 왼쪽으로 스크롤 등 여러가지 기능을 갖추고 있으며, 플러그인 사용을 위한 문서가 잘 정리되어 있어서 처음 사용하는 사람도 쉽게 배울 수 있다.앞에서 살펴본 BxSlider 플러그인에서는 한번에 하나의 이미지만 표시했지만, Owl Carousel 플러그인을 사용해서 한 화면에 여러개의 이미지를 표시하고 스크롤하는 방법에 대해 알아보자플러그인을 실행하려면 Owl Carousel 의 공식 사이트에서 파일을 다운로드 받고 dist/assets 폴더에 있는 css 파일과 src/js 폴더에 있는 js 파일을 원하는 폴더에 옮겨놓아야 한다.Owl Carousel을 사용해 캐러셀 만들기플러그인을 사용하기 위해 스타일 시트 파일을 연결..

캐러셀을 만들어 주는 플러그인 중에서도 bxSlider 플러그인을 많이 사용하는데, 그 이유는 캐러셀에서 필요한 기능이 많이 들어있기 때문이다. 게다가 반응형을 지원하기 때문에, 데스크톱뿐만 아니라 모바일에서 캐러셀을 구현할 수 있다. 이미지 뿐 아니라 웹 문서 안의 어떤 요소라도 캐러셀로 만들 수 있다플러그인에 필요한 파일은 dist 폴더 안에 있는 css와 js 파일이다그리고 이 캐러셀에 들어가는 이미지 파일 역시 같은 파일에 저장되어야 한다bxSlider 플러그인을 사용해 캐러셀 만들기다음코드를 태 뒤에 삽입해 jquery.bxslider.css 파일을 링크한다 Carousel using bxSlider.js bxSlider 플러그인을 사용하기 위해 스크립트 파일을 링크하는 소스를 태..

최근에는 배경으로 동영상을 사용하는 경우도 많다 멈춰있는 이미지보다 화면 전체에 깔린 동영상은 방문자의 호기심을 좀 더 자극해 끝까지 보게 만들 수 있기 때문이다 태그를 사용해 동영상을 배경처럼 삽입하는 방법과 jQuery 플러그인을 사용해 동영상을 삽입하는 방법에 대해 알아보자만들기 전 준비해야 할 것동영상 풀 스크린 배경을 만들기 전에 먼저 웹 서버에서 최신 동영상 파일 확장자를 인식하는지 확인해야 한다 그리고 태그를 인식하지 못하는 구식 브라우저나 모바일에서 실행될 경우를 대비해 동영상 대신 표시할 포스터 이미지도 따로 준비해두어야 한다서버의 MIME 유형 설정사용자 컴퓨터에서는 제대로 실행됐던 동영상이 웹 서버에 올리고 나서 재생이 되지 않아 난감한 경우가 종종 있다. 이는 웹 서버에서 동영상 ..

풀 스크린 배경 이미지는 화면 크기에 따라 커지거나 작아지기 때문에 화질이 뛰어난 이미지를 사용해야 한다 하지만 고화질의 배경이미지는 파일 용량이 커서 사이트가 느려지거나 이미지를 불러오는데 시간이 걸릴 수 있기 때문에 반드시 파일 용량을 줄이는 작업을 한 후에 풀 스크린 배경으로 적용해야 한다CSS3를 사용해 풀 스크린 배경 만들기웹 문서에서 이미지로 풀 스크린 배경을 만드는 가장 간단한 방법은 CSS3에 새로 추가된 background-size 속성을 사용하는 것이다이 속성을 사용하면 배경 이미지의 크기를 다양하게 조절할 수 있다. 그 중에서 cover 값으로 배경 이미지의 너비를 브라우저 화면 가득하게 표시할 수 있다이 CSS 속성은 태그보다는 태그에서 사용했을 때 브라우저 화면 높이에 맞게 배..

반응형 웹 디자인을 구현하는 다른 방법은 플렉스 박스를 사용한 플렉스 박스 레이아웃이다반응형 레이아웃을 CSS만으로 구현하는 것은 쉽지 않은데, 플렉스 박스를 사용하면 화면을 분할하고 배치하는 것이 쉬워진다플렉스 박스 레이아웃플렉스 박스 레이아웃이란 그리드 레이아웃을 기본으로 해 플렉스 아이템을 원하는 위치에 배치하는 것이다플렉스 박스 레이아웃은 플렉스 아이템의 크기뿐만 아니라 배치하는 방향과 순서, 정렬 방법, 간격 등을 제어할 수 있다.플렉스 박스 레이아웃을 사용하려면 콘텐츠를 플렉스 컨테이너로 묶어줘야 한다 그리고 컨테이너 안에 플렉스 박스를 배치한다플렉스 박스에는 이미지나 텍스트 등 웹 문서 요소들이 들어있고, 플렉스 박스는 주축을 따라 왼쪽에서 오른쪽으로 배치되고 주축의 끝점까지 닿으면 교차 축..