html11
웹사이트에 있는 표를 엑셀로 가져오는 간단한 방법
"웹사이트에 있는 표를 엑셀로 가져오는 간단한 방법" 웹사이트에 있는 표 데이터를 엑셀 문서로 가져와 사용해야 하는 경우가 있습니다.웹페이지의 표 데이터를 엑셀로 가져오는 방법은 여러 가지가 있는데, 아래에 가장 간단한 방법을 소개해 드립니다. 1. 웹페이지에서 직접 복사하기가장 간단한 방법은 웹페이지의 표를 복사해서 엑셀에 붙여 넣는 것입니다. 방법: 1. 웹페이지에서 표를 마우스로 드래그하여 선택한 후, Ctrl + C (복사) 또는 우클릭 후 "복사"를 선택합니다.2. 엑셀을 열고 빈 셀에 Ctrl + V (붙여넣기) 또는 우클릭 후 "붙여 넣기"를 선택합니다. 이 방법은 간단하지만, 모든 웹페이지에서 잘 작동하지 않을 수 있습니다. 웹페이지에서 원하는 표의 부분을 마우스 드레그로 선택합니다. ..
링크 버튼 만들기 - 티스토리 블로그
"링크 버튼 만들기 - 티스토리 블로그" 티스토리 블로그에 링크버튼을 만드는 것은 사용자에게 주목을 끄는 효과와 버튼 클릭을 유도하는 중요한 디자인요소입니다. html과 css를 활용하면 버튼을 생성할 수 있지만, 초보자들을 위하여 손쉽게 적용하는 방법 위주로 설명드리겠습니다. css 코드 다운로드아래의 코드를 복사하거나 첨부되는 css 코드를 다운로드합니다. /* 버튼 디자인 */.myButton { box-shadow:inset 0px 3px 0px 0px #fff6af; background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%); background-color:#ffec64; border-radius:36px; border:3px solid..
티스토리 에디터에 엑셀 표를 넣는 방법
"티스토리 에디터에 엑셀 표를 넣는 방법" 티스토리 에디터는 다양한 기능을 지원하지만, 표 기능은 상당히 기초적인 기능까지만 지원되고 있습니다. 이 포스팅에서 티스토리 블로그에 표를 넣어 포스팅을 작성하는 방법을 알아보겠습니다. 문서를 표로 정리하면 얻을 수 있는 장점 문서를 표로 정리를하면 데이터를 비교하고 한눈에 정보를 확인하는 가독성이 좋아지게 됩니다. 특히 많은 양의 정보를 나열할 경우에는 표를 이용하여 정리하는것이 필수 입니다. 티스토리에디터에서 표를 넣는 방법 먼저, 티스토리 에디터를 이용하여 표를 넣는 방법을 알아보겠습니다. 상단 메뉴에서 격자 모양의 테이블 아이콘을 선택합니다. 아이콘 아래로 열리는 격자모양에서 표의 행과 열의 칸 수를 선택합니다. 격자 아래에 행과 열의 수가 표시됩니다. ..
PC, 모바일에서 다른 이미지 출력하는 스크립트
"PC, 모바일에서 다른 이미지 출력하는 스크립트" 웹사이트를 개발하다 보면 PC와 모바일에서 각각 다른 이미지를 출력해야 하는 경우가 있습니다. 예를 들어, PC에서는 상세한 이미지를, 모바일에서는 간략한 이미지를 출력하고 싶을 때가 있습니다. 이러한 경우, 다음과 같은 방법으로 스크립트를 작성하여 PC와 모바일에서 다른 이미지를 출력할 수 있습니다. 페이지 폭을 인식하여 이미지를 출력하기 위의 스크립트는 window.innerWidth 속성을 사용하여 현재 페이지의 너비를 확인합니다. 페이지 너비가 768픽셀보다 크면 PC에서 접속한 것으로 간주하여 .pc-image 클래스를 가진 이미지를 출력합니다. 너비가 768픽셀보다 작으면 모바일에서 접속한 것으로 간주하여 .mobile-image 클래스를 가..
랜덤 이미지 출력하기 Javascript 소스
"랜덤 이미지 출력하기 Javascript 소스" 접속할 때마다 2개 이상의 이미지를 랜덤으로 출력하는 자바스크립트(Javascript) 소스를 공유합니다. 웹페이지를 새로고침 하면 랜덤으로 여러 개의 이미지 중에서 하나만 출력되는 소스입니다. "랜덤 이미지 출력하기 Javascript 소스" 위의 코드는 random-image라는 클래스를 가진 이미지 요소들을 선언하고, show라는 클래스를 추가하여 이미지를 표시하도록 합니다. showRandomImage() 함수는 페이지가 로드될 때 실행되어 랜덤으로 이미지를 선택하고 해당 이미지에 show 클래스를 추가하여 화면에 표시합니다. 이 코드를 웹 페이지에 추가하고 이미지 파일의 경로를 적절히 수정하여 사용하시면 됩니다. 각 이미지 태그에는 src 속성으..
엑셀(Excel)의 표 → HTML 형식으로 변환하는 방법
"엑셀(Excel)의 표 → HTML 형식으로 변환하는 방법" 웹페이지를 제작하거나 블로그 포스팅 문서를 작성하기 위해서 복잡한 내용을 한눈에 알기 쉽도록 전달하기 위하여 표를 사용해야 할 경우가 있습니다. 별도의 웹에디터를 사용하거나, 텍스트 에디터를 사용하여 단순한 표를 제작할 수 있지만, 복잡한 표나 원본 데이터가 엑셀 파일의 표 형식일 경우에는 어려울 수밖에 없습니다. 아래의 테이블 생성기(Tables Generator) 사이트를 이용하면 별도의 프로그램 설치 없이 손쉽게 HTML 형식의 표를 생성할 수 있습니다. 테이블 생성기(Tables Generator) 사이트 바로가기 별도의 프로그램을 설치할 필요 없이 간단하게 온라인에서 변환을 진행할 수 있습니다. 아래의 버튼 링크를 통해 '테이블 생성..
티스토리 스킨 추천 - 고래 스킨 4.1
"티스토리 스킨 추천 - 고래 스킨 4.1" 티스토리 블로그가 네이버 블로그와 구분되는 가장 큰 차이점은 구글 애드센스 광고를 이용한 광고 수익일 것입니다. 티스토리 블로그를 개설하고 가장 먼저 고민할 부분이 광고에 최적화된 빠른 속도의 스킨일 텐데요. 이 블로그에도 오랫동안 사용하고 있는 '고래 스킨 4.1'을 추천합니다. 티스토리 고래 스킨 제공 기능 PC, 모바일 반응형 스킨 네이버, 구글 검색 엔진 최적화 구글 애드센스 광고 최적화 사이드바 설정 기능 ( 전체 보이기 / 전체 숨기기 / 본문 페이지 제거 / 모바일 제거 ) 헤더 영역 배경색 설정 기능 모바일 전용 카테고리 보호 글 / 관련 글 지원 위의 대표적인 특징만 확인해도 수익화를 위한 티스토리 세팅에는 최고의 선택이지 않을까 생각됩니다. ..
검색엔진 최적화(SEO)를 위한 티스토리 이미지 alt 속성 태그 추가하는 방법
"검색엔진 최적화(SEO)를 위한 티스토리 이미지 alt 속성 태그 추가하는 방법" 구글, 네이버 등 검색엔진은 사용자가 손쉽게 검색할 수 있도록 검색엔진 최적화(SEO, Search Engine Optimization) 된 포스팅을 우선으로 노출합니다. 검색 엔진 최적화(SEO, Search Engine Optimization)는 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정입니다. 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있게 하는 것을 말합니다. HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링 되지 못할 때 나타날 문자열을 지정하기 위한 값으로 시각장애인 등을 위해 문서..
VS Code 설치와 인터페이스 한글로 바꾸기
"VS Code 설치와 인터페이스 한글로 바꾸기" VS Code(Visual Studio Code)는 마이크로소프트가 마이크로소프트 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기입니다. 다양한 종류의 언어를 지원하며 디버깅 지원과 Git 제어, 구문 강조 기능등이 포함되어 있으며 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있습니다. 추가적인 플러그인을 설치하여 사용할 수 있어서 기능의 확장되는 것도 장점 입니다. 유튜브를 통해 간단한 코딩을 해 보려고 시도하는 중에 코딩 에디터로 'VS Code'를 선택하여 설치하고 사용하려 하고 있습니다. VS Code(Visual Studio Code)는 아래 공식 홈페이지에서 다운로드 가능합니다. https://code.visualstudi..
티스토리 포스팅 URL 통일하기 '?category' 꼬리표 제거 방법
"티스토리 포스팅 URL 통일하기 '?category' 꼬리표 제거 방법" 티스토리 블로그의 포스팅 URL은 설정에 따라 블로그주소 뒤에 숫자 혹은 문자로 이루어져 있습니다. 하지만, 카테고리 목록에서 원하는 포스팅을 클릭한 경우에는 고유 URL 뒤에 '?category=000000' 형식의 카테고리를 나타내는 값이 추가로 붙게 됩니다. 동일한 내용의 글인데, URL 뒤에 '?category' 꼬리표가 붙어 검색엔진이 유사문서로 오인할 수 있는 소지가 있습니다. 광고 수익으로 블로그를 유지하는 입장에서는 그리 달갑지 않을 수 있습니다. https://foxcg.com/799 사진 배경 간단하게 지우기 이미지 누끼 투명 배경 "사진 배경 간단하게 지우기 이미지 누끼 투명 배경" 디자인 작업을 할 때 자주 ..
네이버 개발전용 글꼴, 코딩 폰트 D2-Coding
"네이버 개발전용 글꼴, 코딩 폰트 D2-Coding" HTML이나 Java Script 등을 코딩할 경우, O와 0, ㅇ 등의 구분이 글꼴에 따라 명확하게 구분하기 어려운 경우가 많이 있습니다. 이런 경우에 사용하기 유용한 개발자용 코딩폰트를 네이버에서 제공하고 있습니다. D2 Coding 글꼴은 나눔바른고딕을 바탕으로 개발자의 코딩을 위해 가독성 및 유사 문자간 변별력 뿐만 아니라 디자인적으로 한글과의 조화를 고려해 최적화시킨 글꼴입니다. D2 Coding 글꼴은 코딩시 유사한 형태의 영문/숫자 뿐만 아니라 한글/특수문자 등에 대한 변별력과 가독성을 강화하였습니다. 또한 고정폭 글꼴로 제작이 되어 어떤 개발환경에서도 자간과 행간을 유지하도록 디자인되어 있습니다.[출처 : NAVER Developers..