ㅇㅅㅇ

간혹 하나의 이미지에 여러개의 링크를 담아야 할 때가 있다.(ex. 쇼핑몰 프로모션 이미지에 여러개의 링크 걸기 등) 그럴 때 가장 쉽게 할 수 있는 방법으로 image map태그가 있다. 태그 요소와 함께 이미지 맵(클릭 가능한 링크 영역)을 정의할 때 사용한다. 기본작성법 img 태그로 이미지 맵을 적용할 이미지를 불러온다. map 태그를 추가하고 name을 지정해 img 태그와 연결한다. img의 usemap과 map name가 동일해야 한다. img usemap에는 # + map name으로 작성한다. map 태그 내부에 이미지맵 영역을 설정할 area 태그를 추가로 입력한다. shape : rect(사각형) circle(원형) poly(다각형) 3가지 중 하나의 좌표 모양을 선택한다. coord..

모든 입력폼을 input type="text"으로 사용한다면 PC환경에서는 큰 차이가 못 느끼지만, 모바일에서는 작은 화면에서 제공되는 키패드를 사용하기 때문에 상황에 따라 불편을 느낄 수 있다. 이것을 해소해 주는 것이 input 태그의 type 속성이다. input 태그의 type 속성은 아래의 이미지 처럼 속성에 따라 최적화된 입력 환경으로 사용자에게 편의를 제공한다. (이미지는 안드로이드 버전) number : 숫자패드가 나온다. tel :숫자패드가 나오는데 number과 다른점이 있다면 *,+,#를 입력할 수 있는 버튼이 있다. email : 숫자+영문패드가 나온다. 하단에 .com을 입력할 수 있는 버튼도 있다. search : 입력하면 입력창 우측에 x버튼이 생기고 누르면 작성했던 내용이 지..

의미없는 태그와 css로는 시각적으로 강조하는 모양은 만들 수 있으나 검색엔진과 시각장애인에게 의미는 전달할 수 없다. 검색엔진 최적화(SEO)와 시각 장애인들이 스크린 리더기를 통해 웹 사이트를 이용하는데 도움이 될 수 있도록 명확한 정보전달을 위해 의미전달이 필요한 콘텐츠가 있다면 거기에 맞는 의미있는 태그(Semantic Tag)를 사용해야 한다. 이번 글에는 의미있는 태그(Semantic Tag) 태그에 대한 개념과 효과 텍스트에 적용할 수 있는 의미있는 태그 만 정리해본다. 의미있는 태그(Semantic Tag) 사람과 기계가 읽을 수 있는 방식으로 의미를 명확하게 설명하는 요소를 말한다. 의미있는 태그를 사용하면 아래와 같은 효과을 얻을 수 있다. 검색엔진 최적화 SEO (Search engi..

코딩을 하다보면 굳이 시안의 이미지를 자를 필요는 없지만 이미지 삽입할 영역을 만들어야 할 때가 있어 찾아보고 사용하게 되었다. (이름을 누르면 해당 사이트로 접속할 수 있다.) 1. Placehold.it placehold는 원하는 이미지 사이즈를 입력하면 바로 출력되는 가장 간편하게 사용할 수 있는 방법이다. 텍스트 형식으로 제공해 사이즈가 어떻게 되는지 한 번에 볼 수 있다. 텍스트와 배경색이 필요하면 아래와 같이 적용하면 된다. 2. placeimg 이미지 사이즈 뒤에 이미지의 카테고리를 설정 후 디폴트는 any 혹은 Animals, Architecture, Nature, People, Tech의 5개의 카테고리에 Grayscale, Sepia형식의 필터 2가지의 조합으로 된 서비스다. place..