반응형

SW/HTML 17

HTML : HTML5 Download Attribute : 방법, 구현, 예제

다운로드 속성을 사용하는 HTML5 기능을 살펴 보겠습니다. 다운로드 속성은 링크하는 파일을 다운로드하도록 브라우저에 알리는 방법으로, 미디어 파일 또는 PDF 문서 또는 웹 페이지 등이 될 수 있습니다. 이것은 서버 측 코드와 관련이 있습니다. 예를 들어 force-download.php의 서버 측 파일에 연결하고 다운로드하려는 파일의 인수를 전달합니다. Download Webpage HTML 그런 다음 서버 측에서 요청 된 파일의 내용을 가져와 브라우저가 이와 같은 작업을 수행하여 내용을 다운로드하도록 해야 합니다. function downloadFile($file){ $file_name = $file; $mime = 'application/force-download'; header('Pragma: ..

SW/HTML 2020.08.06

HTML : Social Sharing Links : 개념, 방법

모든 주요 소셜 네트워크에는 자체 공유 버튼이 있으므로 웹 사이트 방문자가 웹 사이트를 떠나지 않고도 페이지를 쉽게 공유 할 수 있습니다. 이것들은 귀하의 웹 사이트에 추가 된 것이므로 소셜 미디어 네트워크에서 페이지를 공유 할 수있는 능력이 없으면 블로그의 발전이 적어질 것입니다. 소셜 네트워크 공유 버튼의 한 가지 문제점은 웹 사이트에 많은 HTTP 요청을 표시하고 모든 외부 스타일, 이미지, 클릭 이벤트를 로드해야한다는 것입니다. 또한 현재 페이지의 수를 요청하려면 API를 호출해야합니다. 이러한 모든 요청은 시간이 걸리며 페이지 로딩 시간에 영향을 줄 수 있습니다. 링크를 사용하여 Twitter, Facebook, Google+, Linkedin 및 Pinterest를위한 자체 소셜 공유 버튼을 ..

SW/HTML 2020.08.05

HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현

검색 엔진에서 순위가 양호하지만 검색 결과에서 발생하는 트래픽 양이 보이지 않으면 클릭률 개선에 대해 고려해야합니다. 클릭률을 높이기 위해 전통적으로 제목 태그를 개선하거나 메타 태그를 개선 할 수있는 몇 가지 방법이 있습니다. 최근 Google은 클릭률에 도움이되는 몇 가지 기능을 출시했습니다. 이제 Google 인증을 통해 콘텐츠를 Google+ 계정에 연결하여 Google+ 프로필 사진을 검색 결과에 배치 할 수 있습니다. HTML을 변경하면 리치 스니펫이라는 기능을 추가하고 schema.org를 HTML에 배치 할 수 있으므로 검색 결과에 더 많은 정보를 배치 할 수 있습니다. Schema.org를 사용하면 다음과 같은 다양한 유형이 있는 페이지에서 정보를 정의 할 수 있습니다. Movies Bo..

SW/HTML 2020.08.04

HTML : HTML5 Datalist 사용 방법 : 예제, 구현

대부분의 사람들은 응용 프로그램에서 jQuery 라이브러리 jQuery UI를 사용하므로 colour picker, sliders, accodrions, dialog boxes, menus, progress bars로 구성된 유용한 요소에 액세스 할 수 있습니다. jQuery UI 라이브러리에 있는 가장 유용한 요소 중 하나는 자동 완성 요소입니다. jQuery UI 자동 완성 기능은 자동 완성 텍스트 상자에 텍스트를 입력 할 때 검색되는 여러 옵션으로 채울 수 있는 Javascript 객체를 먼저 생성하여 작동합니다. Tags: HTML5와 함께 제공되는 많은 새로운 기능이 대부분 추가 Javascript API를 사용하고 다른 기능은 양식 유효성 검증과 같은 Javascript를 사용하는 기존 기능을..

SW/HTML 2020.08.02

HTML : 웹 사이트에 Twitter 카드 추가 방법 : 예제, 구현

Facebook과 같은 소셜 네트워크에서 게시물을 공유하면 공유중인 URL을 스캔하고 특정 정보를 반환하여 피드에 페이지를 표시합니다. Facebook은 페이지 제목, 페이지 설명 및 페이지 축소판 이미지를 받습니다. open graph meta tags를 사용하여 Facebook이 얻는 정보를 변경할 수 있습니다. 이들은 단순히 페이지의 헤드 태그에 추가 할 수 있는 메타 태그이며, Facebook에서 페이지를 스캔하여 제목, 설명 및 이미지를 검색 할 때 해당 태그를 검색 할 경우 태그의 내용을 대신 사용합니다. 페이지 제목 즉, Facebook에 대해서만 페이지 제목을 완전히 사용자 정의 할 수 있습니다. Twitter에는 Twitter에서 메시지를 사용자 정의하는 데 사용할 수있는 메타 태그도 있..

SW/HTML 2020.08.01

HTML : 체크박스 값을 항상 $_POST 값으로 받기 : 예제, 구현

체크박스의 문제는 선택하지 않으면 form과 함께 post되지 않는다는 것입니다. 체크박스를 선택하고 form을 게시하면 $ _POST 변수에 체크박스의 값이 표시되며, 이 확인란을 선택 취소하면 $ _POST 변수에 값이 추가되지 않습니다. PHP에서는 일반적으로 체크박스 요소에서 isset () 검사를 수행하여 이 문제를 해결할 수 있습니다. 예상한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다. if(!isset($_POST['checkbox1'])) { $checkboxValue = false; } else { $checkboxValue = $_POST['checkbox1']; } 그러나 동적 양식을 만든 경우 체크박스의 이름 속성..

SW/HTML 2020.07.31

HTML : Viewport Meta Tag 이해하기 : 예제, 방법

새로운 웹 디자인 작업을 할 때 고려해야 할 사항 중 하나는 반응 형 디자인입니다. 만들려는 웹 사이트가 반응형 디자인이 필요할 수 있습니다. 모든 외부 사이트는 반응형 디자인을 고려해야한다고 생각합니다. 모바일 장치 사용자가 원하는 것을 확대하여 볼 수 있기 때문에 반응형 디자인이 가치가 없다고 생각하는 사람들이 있지만 개발자가 모든 장치에서 웹 사이트를 쉽게 사용할 수 있어야 한다고 생각합니다. 반응형 디자인이란 반응형 디자인은 웹 사이트 디자인이 보고있는 장치의 너비와 높이에 적응할 수 있는 경우입니다. 반응형 디자인은 CSS 파일에서 미디어 쿼리를 사용하여 설정 한 특정 중단 점에 따라 HTML 요소의 스타일을 변경하여 수행됩니다. 일부 요소에 간단한 너비 : 100 % 만 추가하면 모바일 장치에..

SW/HTML 2020.07.29 (2)

HTML : 새로운 HTML5 속성 사용 방법 : 예제, 구현

HTML5 속성에 placeholder와 같이 HTML5와 함께 제공되는 많은 추가 기능이 있으며 필수 기능입니다. Hidden 속성 Hidden 속성은 이 속성이 있는 요소를 숨기는 모든 요소에 사용할 수 있습니다. 사용 방법은 다음과 같습니다. display: none; 차이점은 디스플레이로 요소를 스타일링하는 것보다 요소에 숨겨진 속성을 배치하는 것이 더 의미가 있다는 것입니다. 브라우저가 HTML5 Hidden 속성을 지원하지 않으면 CSS 파일에서 대체해서 사용할 수 있습니다. *[hidden] { display: none; } Spellcheck 속성 맞춤법 검사 속성은 사용자가 텍스트 상자나 텍스트 영역 안에 입력한 텍스트의 클라이언트 쪽 맞춤법 검사를 수행합니다. 현재 맞춤법 검사는 다음에..

SW/HTML 2020.07.28

HTML : HTML5를 사용하여 전화 번호 링크 추가 : 예제, 구현

일반적으로 전화 번호는 방문자에게 상호 작용을 제공하지 않는 정적 숫자 텍스트로 웹 페이지에 추가됩니다. 점점 더 많은 사람들이 휴대 전화에서 인터넷을 사용하면서 전화 번호를 클릭 가능한 영역으로 변경하여 휴대 전화에서 직접 전화 번호로 전화를 걸 차례입니다. 휴대 전화에서 여러 웹 페이지로 전화를 걸려면 전화 번호를 복사하여 휴대 전화에 붙여 넣어 다이얼해야합니다. 이 새로운 기능을 사용하면 이메일과 마찬가지로 전화 번호 링크를 통해 전화를 걸 수 있습니다. 방문자가 웹 페이지에서 직접 이메일을 보내도록하려면 페이지에 링크를 만들고 href :에서 mailto :를 사용하십시오. Example Email 이 링크를 클릭하면 기본 메일 클라이언트가 열리고 전자 메일 주소로 채워진받는 사람 주소가 href..

SW/HTML 2020.07.25

HTML : HTML5 Notification API를 사용하는 방법 : 예제, 구현

HTML5는 새로운 것이 아니며 모든 사람들이 들어 보았지만 사람들이 모르는 HTML5의 일부 기능이 있습니다. 대부분의 사람들은 모든 HTML5가 문서에서 사용할 수 있는 header, footer, nav, article, section과 같은 태그라고 생각하지만 많은 사람들은 개발자가 사용할 수 있는 멋진 새 기능 중 일부를 알지 못합니다. Geolocation API HTML5 Details Tag HTML5 Form features HTML5 Form Validation HTML5 Placeholders notification API라는 HTML5의 새로운 기능을 살펴 보겠습니다. Gmail 탭이 열려있는 경우 이 기능을 가장 많이 사용하는 것은 Gmail에서 새 이메일을 알리는 것입니다. 화면..

SW/HTML 2020.07.24

HTML : Pinterest 사용자가 이미지를 가져가지 못하도록 차단 : 방법, 구현

Pinterest는 소셜 미디어 세계에서 가장 최신의 사이트이며, 이 사이트는 이미지 공유 소셜 네트워크입니다. 사용자가 모든 웹 사이트에서 이미지를 고정하여 팔로어와 공유 할 수 있습니다. Pinterest의 저작권 문제에 대해 많은 이야기가 있었습니다. 예를 들어 사진 작가는 이제 인터넷을 통해 이미지를 공유 할 수 있습니다. 이미지 마케팅에 유용하지만 Pinterest에서 공유하고 싶지 않은 이미지가 있는 경우 어떻게해야 할까요? Pinterest에서 이미지를 공유하고 싶지 않을 때 공유되는 이미지에 대해 불평하기 시작한 일부 사용자는 이러한 이유로 Pinterest는 사용자가 사이트에서 이미지를 가져가지 못하도록 메타 태그를 만들었습니다. Pinterest 사용자가 귀하의 콘텐츠를 가져가지 못하게..

SW/HTML 2020.07.23

HTML : Google지도에서 HTML5 GeoLocation API를 사용하는 방법 : 예제, 구현

Geolocation API를 사용하여 현재 위도 및 경도를 얻는 방법을 배우고 이 결과에서 Google Maps API에 연결하여 브라우저에 위치를 표시 할 수 있습니다. The Geolocation API Geolocation API는 방문자의 위치 정보를 얻는 데 사용되는 인터페이스를 정의합니다. 이 인터페이스에서 현재 방문자의 위도와 경도를 반환 할 수 있습니다. 위치의 일반적인 출처는 GPS 또는 IP 주소입니다. 이 API는 방문자의 현재 위치를 표시하므로 개인 정보 보호 문제가 될 수 있으므로 이 API는 방문자의 권한으로만 작동합니다. Geolocation API Browser Support 지리적 위치는 다음 브라우저에서 지원됩니다. Google Chrome Firefox 3.5 and ..

SW/HTML 2020.07.21

HTML : HTML5 Details Tag 사용 방법 : 예제, 구현

HTML5와 함께 제공되는 새로운 기능 중 일부에 대해 알아보았습니다. HTML5 Form 및 HTML5 placeholders와 함께 몇 가지 새로운 기능을 살펴 보았습니다. 오늘의 튜토리얼에서는 Details라는 또 다른 HTML5 태그를 조사 할 것입니다. 세부 정보 태그는 클릭을 쉽게 구현하여 더 많은 기능을 표시하는 데 사용됩니다. 태그 안에 제목과 내용을 추가 할 수 있으며, 사용자가 제목을 클릭 할 때까지 내용이 숨겨지고 내용이 표시됩니다. 제목을 클릭하면 토글에서 작동하므로 내용이 다시 숨겨집니다. 이 포스팅에서는 HTML5에서 이 기능을 사용하는 것이 얼마나 쉬운 지, jQuery를 사용하여 다시 작성하는 방법에 대해 학습합니다. detalis 태그에는 클릭하면 나머지 내용이 표시되는 제..

SW/HTML 2020.07.20

HTML : Gravatar를 Favicon으로 사용하는 방법 : 예제, 구현

Favicon이란? favicon('즐겨찾기 아이콘'의 줄임말)은 대부분의 브라우저의 URL 표시줄에 있는 사이트 이름 옆에 있는 특정 웹 사이트와 연결된 작은 아이콘입니다. 웹 사이트를 쉽게 알 수 있도록 브라우저의 탭에도 나타납니다. Gravatar 그라바타(Gravatar)는 다른 사이트로 이동하는 이미지이며, 이름 옆에 이미지로 나타날 것입니다. 만약 블로그에 댓글을 달면, 그들은 그라바타를 사용하여 개인화된 이미지를 보여줄 수 있을 것입니다. 그라바타는 사람들이 여러분의 이미지에 익숙해지도록 도와줍니다. 그라바타르는 이메일 주소에 연결되어 있기 때문에 만약 다른 블로그에서 같은 이메일 주소를 사용한다면 같은 그라바타를 갖게 될 것입니다. 텀블러 블로그에서 그라바타를 favicon으로 사용할 것입..

SW/HTML 2020.07.19

HTML : HTML5 Form 개념, 특성 알아보기

HTML5를 사용한 오디오와 비디오 임베딩 등 HTML5와 함께 제공되는 새로운 기능들을 놓쳤는데, 가장 흥미롭게 생각하는 기능 중 하나는 새로운 HTML5 form 기능입니다. HTML5에는 양식과 관련된 많은 새로운 것들이 함께 제공됩니다. Javascript와 양식, 대부분의 작업을 HTML5로 수행할 수 있습니다. 이제 검증, 날짜 선택기, 슬라이더, 색상 선택기 등을 쉽게 추가할 수 있습니다. HTML5 양식과 함께 새로운 입력 유형이 함께 제공됩니다. 이전 HTML에서는 텍스트, 확인란, 라디오, 단추 및 제출과 같은 정보를 얻을 수 있습니다. 하지만 이제 입력 유형이 더 많아졌습니다. 새로운 입력 유형에는 다음이 포함됩니다. 웹 사이트의 검색 필드에서 사용된 search는 표준 텍스트 입력 ..

SW/HTML 2020.07.16

HTML : HTML5 Placeholder 특성 사용 방법 : 예제, 구현

HTML5란 무엇인가?라는 기사에서 HTML5와 함께 제공되는 새로운 기능들을 몇 가지 언급했습니다. HTML5의 장점 중 하나는 HTML form의 기능입니다. HTML5의 이점은 HTML form에 JavaScript를 추가할 필요가 없다는 것입니다. 일반적으로 HTML form에는 항상 수행해야 하는 많은 작업이 있습니다. 주요 내용은 항상 유효성 검사 양식에는 항상 클라이언트 쪽 유효성 검사가 있어야 하지만 다른 form에는 날짜 선택기와 placeholders가 있습니다. Placeholders는 HTML5에서 매우 유용한 기능입니다. 이 특성은 기본 텍스트가 비어 있을 때 양식 입력에 표시되지만 포커스가 제거되는 속성입니다. 이 기능은 이전 HTML에서 JavaScript를 사용하여 수동으로 ..

SW/HTML 2020.07.15

HTML : HTML5는 무엇인가?

HTML5는 HTML의 다음 버전입니다. HTML을 더욱 쉽게 만들 새로운 기능들을 소개할 것입니다. 웹 사이트 레이아웃을 코더와 검색 엔진 모두에 보다 명확하게 해주는 기능을 도입하는 것입니다. header, footer, nav, article 태그 때문에 검색 엔진에 도움이 될 수 있습니다. 웹 사이트의 주요 영역을 정의하는 새로 도입된 태그입니다. 검색 엔진에 사이트를 탐색하기 위해 Navigation이 링크를 보유할 수 있는 경우, 검색 엔진은 이 섹션의 모든 링크를 사용할 수 있습니다. Content가 페이지에서 가장 중요한 부분이기 때문에 article 태그가 가장 중요한 태그일 수 있습니다. 검색 엔진에서 이 영역이 모든 콘텐츠의 location임을 알 수 있습니다. HTML5에 포함된 새..

SW/HTML 2020.07.14
반응형