빅범 감성 공간

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

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 효과를 줄 때 사용한다. ..

쇼핑몰 혹은 기업 홈페이지 작업 중 게시글이나 혹은 상품 이미지를 불러오는 경우가 많은데, 이때 해당 이미지가 첨부되어 있지 않거나, 제대로 노출되지 않을 때 대체할 수 있는 이미지를 이미지 태그상에 아예 삽입해놓을 수가 있다. 위와 같이 태그로 작업한다. 파란색 글씨 부분은 원래 불러오고자 하는 이미지 태그 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과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받..

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

CSS display none과 block 속성 이해하기 css 속성 중 많이 쓰는 display none, display block 에 대해 알아보자. 이 css 속성은 javascript, jquery 로 toggle 형식을 만들때 많이 쓰고 있으며, display에는 4가지 속성이 존재한다. 1. display - block 2. display - inline 3. display - none 4. display - inline-block 위 속성에 대한 기능에 대해서 정리하자면, 1. block - 적용된 태그는 블록 요소를 가지며, 가로값이 100%로 줄바꿈이 일어납니다. span태그같이 inline태그에 사용해도 같은 기능을 가집니다. 2. inline -적용된 태그는 인라인요소를 가지며, 줄바..

프로그램 소스 html, css, script 등을 변경해서 서버에 반영을 했는데 특정 사람들에 한하여 반영된 소스가 안 보일 경우가 있습니다. 보통 같은 파일명의 파일에 내부 소스를 변경하거나 추가했을 시 적용되지 않을 것처럼 헝클어지거나, 어긋나 보이는 현상이기도 하지요. 가서 확인을 해보면 임시 인터넷 폴더에 해당 파일(캐싱)이 존재해서 인데요. 개발자 입장에서 쉽게 해결하는 방법 1. Ctrl + F5를 입력하라고 한다. - 입력할 경우 캐싱된 파일들을 날리고 새로 받습니다. 2. 인터넷 설정에서 임시인터넷 파일 설정을 웹 페이지를 열 때마다로 변경한다. 이 두 가지는 정말 개발자 입장에서 처리한 것 이라서 사용자가 난 그리 못하겠다고 하면 답이 없습니다. 최초 유효방문자도 사이트가 하자가 있게 ..

설정값 태그 적용한 예시 Your browser does not support the video tag. 빨간색 표시해놓은 부분이 비디오태그에 설정값 및 컨트롤바에 대한 제어를 해준다. 태그를 빼고 넣음으로써 테스트해보면 쉽게 이해가 되니 테스트를 해보자. controlslist="nodownload" 다운로드 버튼 제거 autoplay 이 속성을 지정하면, 비디오가 로드되자마자 자동으로 재생을 시작 함. 지원브라우저: IE 9+, Chrome, FF, Safari, Opera 사용법: html5에서 xhtml에서 controls 이 속성을 지정하면, 오디에 재생에 관한 조절 장치를 보여 줌 (playback/pause/resume/volume 등) 지원브라우저: IE 9+, Chrome, FF, Saf..