본문 바로가기

SW/HTML

HTML : HTML5 Download Attribute : 방법, 구현, 예제 다운로드 속성을 사용하는 HTML5 기능을 살펴 보겠습니다. 다운로드 속성은 링크하는 파일을 다운로드하도록 브라우저에 알리는 방법으로, 미디어 파일 또는 PDF 문서 또는 웹 페이지 등이 될 수 있습니다. 이것은 서버 측 코드와 관련이 있습니다. 예를 들어 force-download.php의 서버 측 파일에 연결하고 다운로드하려는 파일의 인수를 전달합니다. Download Webpage HTML 그런 다음 서버 측에서 요청 된 파일의 내용을 가져와 브라우저가 이와 같은 작업을 수행하여 내용을 다운로드하도록 해야 합니다. function downloadFile($file){ $file_name = $file; $mime = 'application/force-download'; header('Pragma: ..
HTML : Social Sharing Links : 개념, 방법 모든 주요 소셜 네트워크에는 자체 공유 버튼이 있으므로 웹 사이트 방문자가 웹 사이트를 떠나지 않고도 페이지를 쉽게 공유 할 수 있습니다. 이것들은 귀하의 웹 사이트에 추가 된 것이므로 소셜 미디어 네트워크에서 페이지를 공유 할 수있는 능력이 없으면 블로그의 발전이 적어질 것입니다. 소셜 네트워크 공유 버튼의 한 가지 문제점은 웹 사이트에 많은 HTTP 요청을 표시하고 모든 외부 스타일, 이미지, 클릭 이벤트를 로드해야한다는 것입니다. 또한 현재 페이지의 수를 요청하려면 API를 호출해야합니다. 이러한 모든 요청은 시간이 걸리며 페이지 로딩 시간에 영향을 줄 수 있습니다. 링크를 사용하여 Twitter, Facebook, Google+, Linkedin 및 Pinterest를위한 자체 소셜 공유 버튼을 ..
HTML : 검색 결과에 Breadcrumbs 얻는 방법 : 예제, 구현 검색 엔진에서 순위가 양호하지만 검색 결과에서 발생하는 트래픽 양이 보이지 않으면 클릭률 개선에 대해 고려해야합니다. 클릭률을 높이기 위해 전통적으로 제목 태그를 개선하거나 메타 태그를 개선 할 수있는 몇 가지 방법이 있습니다. 최근 Google은 클릭률에 도움이되는 몇 가지 기능을 출시했습니다. 이제 Google 인증을 통해 콘텐츠를 Google+ 계정에 연결하여 Google+ 프로필 사진을 검색 결과에 배치 할 수 있습니다. HTML을 변경하면 리치 스니펫이라는 기능을 추가하고 schema.org를 HTML에 배치 할 수 있으므로 검색 결과에 더 많은 정보를 배치 할 수 있습니다. Schema.org를 사용하면 다음과 같은 다양한 유형이 있는 페이지에서 정보를 정의 할 수 있습니다. Movies Bo..
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를 사용하는 기존 기능을..
HTML : 웹 사이트에 Twitter 카드 추가 방법 : 예제, 구현 Facebook과 같은 소셜 네트워크에서 게시물을 공유하면 공유중인 URL을 스캔하고 특정 정보를 반환하여 피드에 페이지를 표시합니다. Facebook은 페이지 제목, 페이지 설명 및 페이지 축소판 이미지를 받습니다. open graph meta tags를 사용하여 Facebook이 얻는 정보를 변경할 수 있습니다. 이들은 단순히 페이지의 헤드 태그에 추가 할 수 있는 메타 태그이며, Facebook에서 페이지를 스캔하여 제목, 설명 및 이미지를 검색 할 때 해당 태그를 검색 할 경우 태그의 내용을 대신 사용합니다. 페이지 제목 즉, Facebook에 대해서만 페이지 제목을 완전히 사용자 정의 할 수 있습니다. Twitter에는 Twitter에서 메시지를 사용자 정의하는 데 사용할 수있는 메타 태그도 있..
HTML : 체크박스 값을 항상 $_POST 값으로 받기 : 예제, 구현 체크박스의 문제는 선택하지 않으면 form과 함께 post되지 않는다는 것입니다. 체크박스를 선택하고 form을 게시하면 $ _POST 변수에 체크박스의 값이 표시되며, 이 확인란을 선택 취소하면 $ _POST 변수에 값이 추가되지 않습니다. PHP에서는 일반적으로 체크박스 요소에서 isset () 검사를 수행하여 이 문제를 해결할 수 있습니다. 예상한 요소가 $ _POST 변수에 설정되어 있지 않으면 확인란이 선택되어 있지 않으며 값이 false 일 수 있습니다. if(!isset($_POST['checkbox1'])) { $checkboxValue = false; } else { $checkboxValue = $_POST['checkbox1']; } 그러나 동적 양식을 만든 경우 체크박스의 이름 속성..
HTML : Viewport Meta Tag 이해하기 : 예제, 방법 새로운 웹 디자인 작업을 할 때 고려해야 할 사항 중 하나는 반응 형 디자인입니다. 만들려는 웹 사이트가 반응형 디자인이 필요할 수 있습니다. 모든 외부 사이트는 반응형 디자인을 고려해야한다고 생각합니다. 모바일 장치 사용자가 원하는 것을 확대하여 볼 수 있기 때문에 반응형 디자인이 가치가 없다고 생각하는 사람들이 있지만 개발자가 모든 장치에서 웹 사이트를 쉽게 사용할 수 있어야 한다고 생각합니다. 반응형 디자인이란 반응형 디자인은 웹 사이트 디자인이 보고있는 장치의 너비와 높이에 적응할 수 있는 경우입니다. 반응형 디자인은 CSS 파일에서 미디어 쿼리를 사용하여 설정 한 특정 중단 점에 따라 HTML 요소의 스타일을 변경하여 수행됩니다. 일부 요소에 간단한 너비 : 100 % 만 추가하면 모바일 장치에..
HTML : 새로운 HTML5 속성 사용 방법 : 예제, 구현 HTML5 속성에 placeholder와 같이 HTML5와 함께 제공되는 많은 추가 기능이 있으며 필수 기능입니다. Hidden 속성 Hidden 속성은 이 속성이 있는 요소를 숨기는 모든 요소에 사용할 수 있습니다. 사용 방법은 다음과 같습니다. display: none; 차이점은 디스플레이로 요소를 스타일링하는 것보다 요소에 숨겨진 속성을 배치하는 것이 더 의미가 있다는 것입니다. 브라우저가 HTML5 Hidden 속성을 지원하지 않으면 CSS 파일에서 대체해서 사용할 수 있습니다. *[hidden] { display: none; } Spellcheck 속성 맞춤법 검사 속성은 사용자가 텍스트 상자나 텍스트 영역 안에 입력한 텍스트의 클라이언트 쪽 맞춤법 검사를 수행합니다. 현재 맞춤법 검사는 다음에..