본문 바로가기

HTML7

[HTML] Robots Meta 태그란? [HTML] Robots Meta 태그란? 외부 서비스를 오픈하는 과정에서 웹 페이지가 일반적으로는 구글 혹은 네이버, 다음과 같은 포털에서 검색이 쉽고 가능하도록 Search Indexer 혹은 Crawler가 작동하여 서비스를 수집해서 많은 사람들에게 노출이 되기를 원한다. 하지만 반대로 외부에 오픈되는 시스템이지만 특정 페이지는 검색시스템에 노출이 되지 않고, Search Indexer 혹은 Crawler가 해당 페이지를 수집하지 않기를 원하는 경우도 있다. 이럴 경우 흔히 Robots.txt를 이용하기도 하지만 Robots Meta 태그는 웹 페이지의 크롤링 및 색인을 제어하는 데에 핵심적인 역할을 수행함에 따라서 한번 알아보고자 한다. 1. Robots Meta 태그란? Robots Meta 태.. 2023. 12. 17.
[Python] 파이썬 HTML파일 PDF파일로 변환하기 파이썬 HTML파일 PDF파일로 변환하기 요즘 HTML 파일들로 만들어진 Report 파일에 대해서 PDF로 변환을 해야 하는 일이 종종 있었다. 그래서 간단히 pyhtml2pdf라는 파이썬 모듈을 이용하여 HTML 파일을 PDF 파일로 변환하는 방법에 대해서 알아보도록 하자. 1. pyhtml2pdf 모듈 설치 우선 변환을 하기 위해서는 pyhtml2pdf 모듈을 설치해야 한다. pip 명령어를 통해서 설치해보도록 하자. pip install pyhtml2pdf # pip를 이용한 pyhtml2pdf 모듈 설치 $ pip install pyhtml2pdf Collecting pyhtml2pdf Downloading pyhtml2pdf-0.0.6-py3-none-any.whl (5.1 kB) Collec.. 2023. 1. 4.
[HTML] datalist 태그로만 autocomplete 구현하기 datalist 태그로만 autocomplete 구현하기 지금까지 autocomplete(자동완성)를 구현하기 위해서는 Javascript을 이용하여 직접 구현하거나 jQuery를 이용하여 autocomplete를 구현하여 사용하고 있었다. 그러나 HTML5에서 datalist라는 태그를 통해서 autocomplete(자동완성)를 쉽게 구현할 수가 있다. 그럼 어떻게 사용하여 구현하면 되는지 알아보도록 하자. 1. datalist 태그 일단 datalist 태그는 input 태그와 option 태그와 함께 사용된다. datalist 태그는 다른 컨트롤에 대해 미리 정의된 option 태그를 나타내는 집합을 나타낸다. 일단 datalist 태그에 대한 정보는 아래 링크를 통해서 확인할 수 있다. https.. 2022. 3. 13.
[Info] <script> or <script type="text/javascript"> ??? [info] or ??? HTML Code를 작성하면서 Javascript(자바스크립트) 나 jQuery(제이쿼리) 를 사용하기 위해서 혹은 를 사용한다. 근데 여러 문서나 혹은 여러 글에서 보면 으로 작성한 곳도 있고 를 작성한 곳도 있다. 과연 or 두 개 중 표준은 어떤 건지에 대해서 알아보도록 하자. 1. 정리 관련해서 여러 내용의 글을 읽어 보았다. 이제 읽은 내용들을 조금 정리해보도록 하겠다. 첫 번째로 일단 HTML5에서는 type 속성이 기본값으로 설정됨에 따라서 / 둘 중 어떤 것을 사용하던 정상적으로 사용이 되어야 한다. 두 번째로 최신 버전의 브라우저에서는 HTML5 지원을 하기 때문에 역시나 / 둘 중 어떤 것을 사용하던 정상적으로 사용이 되어야 한다. 다만, 이 두 개 중 가능하면.. 2022. 2. 12.
[Tistory] 티스토리 New 아이콘 변경하기 티스토리 New 아이콘 변경하기 티스토리(Tistory)를 꾸미면서 글을 새롭게 작성하면 카테고리 옆에 나오는 회색 New 아이콘이 꾸미고 있는 색상과는 너무 달라서 이걸 한번 변경해보고자 한다. 일단은 새롭게 사용할 아이콘부터 만들어 보았다. 1. 아이콘 만들기 먼저 아이콘을 만들기 위해서 무료 웹 이미지 에디터 사이트인 Pixlr(픽슬러)를 이용하여 제작하였다. https://pixlr.com/ 먼저 사이트 접속 후 "Pixlr E"를 선택하여 들어가자, 이제 "신규 생성" 선택 후 맨 오른쪽에 가로, 세로 사이즈를 선택하고 "생성" 하자. 생성한 파일에 대해서는 다시 누군가 사용할 수도 있을 수 있어 Pixlr에서 사용 가능한 파일과 png 파일 모두 남겨 놓도록 하겠다. 2. 아이콘 이미지 업로드.. 2022. 2. 5.
[Tistory] 티스토리 로딩 화면 설정하기(Set up a Tistory Loading Screen 티스토리 로딩 화면 설정하기 티스토리(Tistory)에서 구글 애드센스, 카카오 애드핏 등 광고들을 설정했다면 여러 상황에 따라 티스토리 로딩 속도가 느릴 수 있다. 로딩 속도가 느릴 경우 광고, 이미지 등을 전부 불러오지 못해서 작성한 글에 내용이 모두 보였는지 알 수가 없다. 그래서 전부 불려 올 때까지 로딩 화면이 나오도록 설정하는 방법에 대해서 알아보도록 하자. 1. 로딩에 사용할 이미지 구하기 우선 로딩에 사용할 이미지를 구하자. 제일 쉬운 방법은 구글, 네이버, 다음 등 검색 사이트에서 "로딩 이미지"로 검색하거나, 아래 무료 아이콘 사이트에서 원하는 로딩 이미지를 다운로드하면 된다. ICONS8 Site : https://icons8.com/icons/set/loading Loading Ic.. 2022. 1. 23.
[Tistory] 티스토리 댓글 원하는 문구로 수정하기(Edit the comment of the Tistory to the desired text) 티스토리 댓글 원하는 문구로 수정하기(Edit the comment of the Tistory to the desired text) 티스토리(Tistory)에 글을 읽고 댓글을 달수 있다. 이때 댓글에는 카카오 티스토리(Tistory) 팀에서 적어놓은 고유 맨트인 "여러분의 소중한 댓글을 입력해주세요." 적혀 있다. 이 맨트를 보다는 내가 원하는 맨트로 작성해놓는다면 좋을 것 같다고 생각이 들었다. 그럼 원하는 문구로 수정을 하는 방법에 대해서 알아보도록 하자. 1. HTML 편집 화면으로 이동 우선 티스토리 관리자 화면으로 들어가서 "꾸미기 > 스킨 편집"을 선택하자. 그 후 "html 편집" 선택 후 "HTML" 항목으로 이동하자. 2. 기존 맨트 찾기 이제 "HTML" 항목에서 검색을 통해서 기존 .. 2022. 1. 22.
300x250
300x250
 
300x250
300x250

loading