eunyo의 it이야기

안녕하세요. 오늘은 웹페이지에서 자주 쓰이는 반응형 드롭다운 메뉴 소스를 공유하려고 합니다. 필요에 따라 커스텀해서 사용하시면 될거같아요. gnb에 마우스 hover할 시 전체 하위메뉴가 나타나는 예제입니다. [결과] [HTML] LOGO services test sub test sub test sub test sub offers test sub test sub test sub portfolio test sub test sub test sub test sub test sub test sub test sub gallery test sub test sub test sub test sub test sub [CSS] @import url(//fonts.googleapis.com/earlyaccess/notosa..

파비콘(favicon)이란? 파비콘이란 웹 브라우저 주소창에 있는 아이콘입니다. 파비콘의 크기는 16x16, 32x32, 48x48x, 64x, 64x가 있으며 8비트, 24비트, 32비트 색상이 가능합니다. 파비콘 만드는 방법 https://www.favicon-generator.org/ Favicon & App Icon Generator Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons. www.favicon-generator.org 우선 파비콘 사이트에 접속합니다. 다음은 파일을 넣어준뒤 Create Fav..

태그 form태그란? 웹사이트에서 사용자 정보를 입력받아, 사용자로부터 할당된 데이터를 서버로 전송합니다. 회원가입이나 로그인, 검색창과 같은 입력받은 데이터를 서버로 전송이 필요한 기능에 form태그가 사용됩니다. form의 구조 form의 구조는 위의 코드와 같습니다. action속성은 폼 데이터를 서버로 보낼 때, 데이터를 전달받을 url을 지정합니다. method속성은 폼데이터를 서버로 제출할 때 사용되는 HTTP 메소드를 지정합니다. method 속성의 속성값에는 'GET'과 'POST'가 있습니다. - GET 방식은 브라우저에 의해 저장되기 때문에 '보안의 취약점'이 존재합니다. 또한 데이터 길이의 제한이 있습니다. - POST 방식은 브라우저에 의해 저장되지 않기 때문에 '보안성'이 높습니다..

HTML video 태그 사용법HTML5에서는 video태그를 사용해 웹페이지 안에 동영상을 올릴 수 있습니다. 태그는 웹 문서에 동영상 파일의 링크만 연결시켜주면 간단하게 동영상 구현이 가능합니다.video 태그에서 지원하는 파일은 mp4, webM, avi, ogg가 있습니다.브라우저마다 지원하는 파일이 다르기 때문에 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. 브라우저 별 호환성 BrowserMP4WebMOggInternet ExplorerOXXChromeOOOFirefoxO from Firefox 21 from Firefox 30 for LinuxOOSafariOXXOperaO From Opera 25 OO지원하는 브라우저와, 브라우저별 지원하는 비디오파일 ..

웹접근성이란? 웹 접근성(web accessibility)이란, 장애를 가진 사람과 장애를 가지지 않는 사람 모두가 웹사이트를 이용할 수 있는 방식을 얘기합니다. 시각장애, 청각장애, 지체 장애 등을 가지고 있는 사람이 '스크린 리더'기나 화면 확대 도구와 같은 웹서핑을 위한 보조기술로 웹을 사용할 때, 원하는 콘텐츠의 내용을 자유롭게 이용할 수 있도록 하는 것이 바로 '웹 접근성' 입니다. '웹접근성 마크' 획득을 위한 프로젝트를 진행한다면, 웹접근성의 가이드와 준수사항을 디테일하게 지켜줘야합니다. 웹접근성마크는 '한국웹접근성인증평가원'에서 심사 후 인증마크를 획득 할 수 있습니다. 심사과정에서는 실제 장애인이 웹서핑을 원활하게 진행가능한지, 그 외에 준수사항을 체크합니다. 심사기준이 엄격하고, 심사비..

이미지맵 태그(map,area) 이미지맵 태그, 즉 html에서의 map태그는 이미지맵을 만드는 태그입니다. 간단하게 이미지파일(jpg, png)에 링크를 걸어주는 태그라고 생각하시면 됩니다 :) 사실, 요즘에는 잘 사용안하는 태그이기도 하고 사용성이 많지는 않지만, 지도같은 복잡한 이미지에는 여전히 잘 사용하고 있기 때문에 알아두면 좋겠습니다. 이미지맵 태그 사용법 이미지맵의 태그의 기본 구조는 아래와 같습니다. 1. 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해줍니다. 2. shape="속성값"은 영역의 모양을 의미합니다. - react : 직사각형 - circle : 원형 모양 - poly : 형 영역 - default : 전체 영역 3. coords="정의"는 영역의 ..

웹 사이트를 만들다 보면 아이콘이 필요한 경우가 아주 많습니다. iconfinder와 같은 무료 아이콘 이미지를 다운로드할 수 있는 사이트들도 많지만, 아이콘을 더 간편하게 사용할 수 있는 폰트어썸(Font Awesome)을 소개해드리겠습니다. 이미지로만 된 아이콘과는 다르게 컬러와 크기 수정을 css로만으로 수정, 적용할 수 있기 때문에 사용성이 아주 좋습니다. 폰트어썸 적용하는 방법 fontawesome.com/ 첫 번째로는, 홈페이지에서 이메일 인증을 받아 사용하는 것입니다 :) 이메일 인증만 해주고, 비밀번호와 간단한 설문만 적어 작성(스킵 가능)하면 사용 가능한 cdn 코드를 알려줍니다. 이마저도 귀찮다. 하시는 분들께는 아래 사이트를 추천드립니다. cdnjs.com/libraries/font-..

웹페이지를 작업할 때에, 저작권 불펌 방지를 위해 드래그 금지, 우클릭 금지를 걸어야 할 때가 있습니다. html로 처리하는 방법과, css로 처리하는 방법을 알아보겠습니다. 모든 웹페이지에서 적용가능하다고 하니 참고하세요~ [css로 처리하는 방법] div{ -webkit-touch-callout: none; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } [html로 처리하는 방법] 1) 왼쪽 버튼 클릭 금지 2) 마우스 드래그 금지

웹 접근성이란 마우스나 키보드를 사용하지 못하는 경우에도 동일한 환경에서 볼 수 있도록 제작하는 방법입니다. 요즘 규모가 큰 웹페이지에서는 필수로 사용하고 있고, 또한 기업에서도 웹 접근성을 준수할 수 있는 직원을 뽑으려고 합니다. 그중에서 가장 기본적인 스킵 내비게이션을 알려드리겠습니다. 보통 콘텐츠가 많은 홈페이지에서 tab키로 원하는 콘텐츠까지 도달하기가 어려운데, 이러한 불편함을 스킵네비게이션으로 통해 해소해주는 방법입니다. 웹 접근성을 위한 본문 바로가기 HTML 본문 바로가기 CSS #skipNav{position:relative;z-index:9999;} #skipNav a{position: absolute; top: -200px; left:0; width: 100%; line-height:..

오늘은 자바스크립트가 작동 안 할 때, 비활성화 상태일 때 처리 방법에 대해 알려드리겠습니다. 사실 요즘에 자바스크립트를 지원하지 않는 브라우저는 없지만, 사용자가 자바스크립트를 비활성화 한 상태에서 웹 브라우저를 사용한다면 레이아웃이 깨져 보이거나 자바스크립트로 개발된 영역이 작동이 안됩니다. 사용자가 자바스크립트가 꺼져있다는 사실을 인지 못한다면 오류라고 생각을 할 수 있기 때문에 방법은 noscript 태그는 자바스크립트가 활성화되어있을 때는 표시되지 않고, 자바스크립트가 비활성화 됐을 때만 보이는 태그입니다. 스크립트 비활성화 시 메시지 출력 아래와 같이 메시지를 출력하여 대체 방안을 마련합니다. 브라우저의 자바스크립트가 비활성화되어있는 상태입니다. 원활한 웹서비스를 이용하기 위해서는 자바스크립트..