F&R 941

이미지 링크 거는 방법

1. 이미지 클릭시 현재 열기 ex) 네이버 이미지 주소 - http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif 본인은 네이버를 연결해 보도록 하겠습니다. 블로그일 경우 HTML편집 부분에 아래와 같이 작성해주세요. 상기 부분과 같이 작성하면 아래와 같이 설정할 수 있습니다. 2. 이미지 클릭시 새창으로 열기[입력방법은 똑같습니다 태그안에 target="새창" 이미지 클릭시 새창으로 열리게 되는 태그를 추가합니다.] ex)상기 부분과 동일하게 네이버를 연결해 보도록 하겠습니다.HTML편집 부분에 상기 부분과 같이 작성해주면 아래와 같이 설정됩니다.

공부하자/HTML 2016.11.27

이미지 합치기 [sprites]

1. 아래링크를 클릭하여 해당 페이지로 넘어갑니다.http://csssprites.com/ 2. 해당 페이지의 '파일 선택'을 클릭 > 원하는 파일을 선택합니다. 저같은경우는 '1' 이라는 컨버스 로고 입니다. 3. 상기와 같이 합치고 싶은 이미지들을 모두 선택하였다면+options >> 을 클릭하여 원하시는 옵션으로 설정해 줍니다. 저같은 경우 두이미지 사이는 '0' , 이미지들은 다 top부분에 있는 것으로 생성하였습니다. 4. 오션을 다 조정하였다면 PNG 버튼을 클릭합니다.클릭을 하면 아래와 같이 이미지가 합성된것을 확인 할 수 있습니다. 5. 해당 이미지를 '우클릭' > '이미지를 다른 이름으로 저장' 하여 PC에 저장합니다. 어때요 참 쉽죠 ?

공부하자/HTML 2016.11.26

오픈 소스 웹 템플릿 사이트

. HTML5UP (https://html5up.net/)모두 무료로 사용 가능 !! 기본적으로 반응형 웹 제작이 가능도하록 설정/ 공개되있어 사용하기 편하며, CCA3.0 라이센스로 개인용, 상업용으로도 사용가능!! BOOTSTRAP (http://getbootstrap.com/)기본적으로 반응형 웹 기반의 HTML , CSS, javascript파일을 제공하고 있으며, 데모 사이트를 제공하고 커스텀마이징 가능한 예제를 제공해 주고있다. LUISZUNO (http://luiszuno.com/blog)해당 사이트 또한 무료로 제공하고 있으나 트위트, 페이스북에 해당 사이트를 공유해야 사용이 가능하다. 상기 본인은 HTML5UP을 이용하였다

공부하자/HTML 2016.11.25

웹에서 이미지 반응형으로 구현하기

웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 방법이다. HTML5에서는 아래와 같이 사용한다. 예를 들어 본인의 이미지가 images/pic01.png에 있다면 위와 같이 설정할 수 있다. 수정 전 수정 후 참고로 CSS에서는 아래와 같이 사용한다.img {max-width: 100%;height: auto;}

공부하자/HTML 2016.11.25