빅범 감성 공간

웹사이트를 제작하다 보면, 회사 소개 페이지나 장소에 대한 콘텐츠를 넣을 때 지도가 주로 삽입된다. 캡처 이미지를 통자로 넣는 방법도 있는데, 예전부터 지도 API를 활용하여 삽입하고 있지만 네이버는 서비스 종료를 했고, 다음카카오만이 API 지도 서비스를 제공하고 있지만, HTML에 대한 지식이 없으면 다소 어렵게 느껴질 수 있다. 때문에 간단하게 지도를 삽입하는 방법이 있어 이를 공유하고자 한다. ① 먼저 다음(https://www.daum.net)에 접속하여 상단 메뉴 지도를 클릭한다. ② 지도를 삽입하고자 하는 주소지나 빌딩 이름 등을 입력한다. 예시로 롯데타워로 진행해보았다. 검색 후 많은 리스트가 뜨는데 여기서 본인이 넣고자 하는 항목을 클릭하면 우측 지도에 해당 말풍선이 생기게 되는데 이를 ..

Carousel은 무엇인가? Carousel는 현대 웹 디자인에서 가장 인기 있는 UI 부품 중 하나이다. Carousel는 당신이 좋아하는 이미지, 제품, 블로그 게시물 또는 다른 모든 콘텐츠를 무한 회전 인터페이스로 보여줄 수 있게 해준다. Carousel와 Slider의 차이점은? 일반적으로 회전목마는 내비게이션 컨트롤을 클릭/테이핑하거나 화면(모바일)을 돌려 회전목마 아이템을 무한 루프할 수 있다. 마지막 항목에 도달하여 계속 탐색하면 회전목마가 자동으로 첫 번째 항목으로 되돌아간다는 것을 의미한다. 그리고 슬라이더는 보통 마지막 슬라이드에 도달하면 작동을 멈춘다. 해당 내용에는 는 jQuery, Banilla JavaScript 또는 순수 CSS/CSS3에서 구현된 최고, 응답성 및 사용이 간편..

html-css-js.com/css/generator/box-shadow Box Shadow CSS Generator Set the properties of your box shadow to get the CSS style. Use the sliders and the color picker to set the values and watch the live preview html-css-js.com HTML 스타일을 줄 때 box-shadow 나 text-shadow의 그림자를 정교하게 주는 건 여간 어려운 일이 아니다. box-shadow 스타일의 크기나 투명도, 위치, 번짐 정도를 실시간으로 볼 수 있는 사이트 있다. 본인도 자주 애용하는 사이트로 정교하게 box-shadow 효과를 줄 때 사용한다. ..

이벤트명 발생내용 및 설명 onmousedown : 마우스가 개체 위를 눌렀을 때 발생 목록 참조 onmouseenter : 사용자가 마우스포인터로 개체 위에 들어갔을 때 발생 목록 참조 onmouseleave : 마우스포인터가 개체의 범위 밖으로 이동하면 발생 목록 참조 onmousemove : 마우스가 개체 위에서 이동하였을 때 목록 참조 onmouseout : 마우스가 개체 위에서 이탈하였을 때 목록 참조 onmouseover : 마우스가 개체 위로 이동하였을 때 목록 참조 onmouseup : 마우스가 개체 위 누른 것을 해제하였을 때 onfocus : 마우스나 탭에 의한 항해로개체에 초점(포커스)이 주어 졌을 때 onlosecapture : 마우스에 의한 캡쳐(capture)가 상실되었을 때 발..

쇼핑몰 혹은 기업 홈페이지 작업 중 게시글이나 혹은 상품 이미지를 불러오는 경우가 많은데, 이때 해당 이미지가 첨부되어 있지 않거나, 제대로 노출되지 않을 때 대체할 수 있는 이미지를 이미지 태그상에 아예 삽입해놓을 수가 있다. 위와 같이 태그로 작업한다. 파란색 글씨 부분은 원래 불러오고자 하는 이미지 태그 url를 넣는다. 그리고 기본 이미지가 없을때를 대비한 대체 이미지 태그를 빨간 글씨처럼 삽입한다. 만약 대체 이미지 태그를 삽입하지 않아서 기본 이미지가 불러오지 못하거나 에러가 뜬다면, 아래와 같은 엑박이 뜨게 된다. 웹사이트 기능상 하자가 있어보일 수 있기 때문에 대체 이미지 태그를 삽입하여 엑박이 뜨는 것을 사전에 방지할 수 있다. 만약, 대체 이미지가 마땅히 없거나 아예 없애버리고 싶다면 ..

링크 잡힌 부분에 점선을 없애주는 onfocus=this.blur() 효과를 하나하나 주지 않고, CSS로 일괄 적용하는 방법입니다. a { selector-dummy : expression(this.hideFocus=true); } 이렇게 하면 매번 onfocus=this.blur() 로 포커싱을 없애주지 않아도 전체 일괄로 링크가 잡힌 곳은 적용이 됩니다. 본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한 ♥ 공감 버튼 클릭 부탁드립니다 :) "당신의 하루가 별보다 빛나길"

모바일 웹 퍼블리싱 작업 시 meta 태그 설정 정의 설정 방법 설정 사항 meta name="viewport" : 뷰포트 선언 content="width=device-width" : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언) intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면) minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0) maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0) user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no) ※ 확대를 할수 있게 하려면 content="user-scalable=no / maximum-scale=1.0 content="user-..

웹접근성을 통과하기 위해선 마우스를 사용하지 않고, 키보드 tab키만으로도 모든 객체에 접근이 가능해야만 한다. 이에 tab키에 의한 동작이 순서에 따라 이동되지 않을때, 페이지가 로딩될 시 tabindex를 적용하여 순차적인 이동이 가능하도록 하는 태그이다. tabindex=”1″ 문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus=”autofocus” 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요. tabindex=”0″ 키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받..

JQuery Lightbox 플러그인 및 소스 링크모음 이번 JQuery 소스 관련된 자료는 Lightbox입니다. 레이어팝업과 유사한 형태로 자주 볼 수 있는 기능이다. 처음 Lightbox를 보았을때 도대체 어떻게 해야 되는건지 많이 궁금했는데.. 요즘은 많은 플러그인들이 생겨나서 쉽게 사용이 가능하다. 그리고 백지상태에서 부터 직접 제이쿼리를 짜는 사람은 극소수이므로 이런 소스를 활용하여 커스텀하면 업무시간도 굉장히 효율적으로 사용할 수 있다. 하단에 다양한 타입의 라이트박스 플러그인이 있으니 참고하시길! 아래 링크를 모두 방문하시어 Demo or Examples 을 모두 보시고 자기 스타일에 맞는 Lightbox 를 사용하기를 권장합니다. JQuery Lightbox 링크 모음 Lightbox2 ..

카톡, 메신저 등을 통하여 사이트에 대한 링크(url)를 보내게 되면 위와 같이 사이트에 대한 간략한 정보 문구와 함께 섬네일이 뜨게 된다. 여기서 보여지는 섬네일을 수정하는 방법이 있는데, 방법은 간단하다. html 태그 상에 head 안에 있는 meta 태그를 활용하면 되는 것이다. 예컨데 아래와 같은 태그를 활용하면 되는데 사이트 주소, 제목, 섬네일 경로, 간단한 설명 등이 있다. 위 태그를 본인 티스토리 기준으로 예시를 적용하자면 이러한 형태로 사용할 수 있다. 여기서 카톡, 메신저 등 url 링크 공유시 보여지는 섬네일은 og:image의 경로가 해당된다. 또한 제목과, 간단 설명도 링크시 보여지는 설명글이기 때문에 꼼꼼히 작성하길 바란다. 본 게시글이 도움이 되셨다면 로그인 없이 클릭 가능한..