공부하는 반백수

자유로운 삶을 위한 준비 ☆


IT·인터넷 56

HTML 띄어쓰기 스페이스 공백 빈칸 넣는 방법

HTML 문서 작성 시 태그(tag)와 특수 기호의 표시를 혼동하지 않기 위해서 엔티티(entity)가 사용됩니다. 예를 들어 HTML 명령어인 태그는 꺽쇠 괄호를 사용해서 입력합니다. 하지만 결과 화면에서 실제 < 꺽쇠가 노출되기 원하여 < 를 입력하면 HTML에서는 태그를 시작한다고 생각하고 결과 화면에서 < 모양을 노출시켜주지 않습니다. 이러한 문제를 해결하기 위해 약속된 엔티티를 사용하게 됩니다. ① 한 칸 띄우고 싶다면 ② 조금 더 넓게 띄우고 싶다면 ③ 크게 한 칸 띄우고 싶다면 와 같이 사용하면 됩니다 ^^ 결과는 아래와 같이 노출되니까 참고해주세요. 비슷한 내용의 포스팅! html br 태그로 줄바꿈을 해보자 [사용방법] 첫 번째 줄 두 번째 줄 [코드 예시] html 상에서 내용을..


카페24 쇼핑몰 하단에 에스크로 마크 (구매안전 안내배너) 달기

해당 내용은 PG사(카드결제사)에서 구매안전 서비스 신청하신 경우 확인해주세요! 또한 구매하신 디자인에 따라서 style 코드는 모두 다르게 적용되어야 하기 때문에 해당 글에서는 기본적인 방법 '과정'만 확인해주시기 바랍니다. 어려우신 경우 카페24 관리자 계정과 함께 비밀 댓글 남겨주시면 적용 도와드릴게요 하하 😉 ① 카페24 관리자 > 상점관리 > 결제관리 > 통합결제(PG) > 이용현황 페이지에서 '상세보기' 버튼을 클릭합니다. ② 스크롤해보시면 구매안전 안내 배너 노출 페이지에 '배너 삽입' 영역 확인 가능합니다. 해당 코드를 복사하여 스킨 코드상에 적용해주시면 됩니다. (PG업체에 따라 코드는 조금씩 다를 수 있습니다.) 이미지가 노출되어야 하므로 배너 이미지의 이미지를 마우스 우측 클릭하여 '..


카페24 ogimg sns 오픈 그래프 메타 태그 - 2022 업데이트 버전

카페24 관리자가 대폭 업데이트가 되었네요 ^^ ogimg 등록 sns 공유 이미지 등록이 무척 간편하게 변경되었습니다. 카페24 관리자에서 클릭만으로 설정이 가능합니다. 카페24 관리자 페이지 > 상점관리 > 운영관리 > 검색엔진 최적화(SEO) > SNS 공유 이미지 탭에서 이미지를 등록해주시면 됩니다. 가로 1200px 세로 628px 5MB 이하의 이미지를 권장한다고 합니다 ^^ 사이트의 타이틀과 설명글도 카페24 관리자 페이지 > 상점관리 > 운영관리 > 검색엔진 최적화(SEO) > 공통 페이지 SEO 태그 탭에서 기재해주시면 됩니다.


컴퓨터 메모리 RAM 확인하고 셀프로 추가하기 (데스트탑 속도개선)

데스크탑을 쓰고 있습니다. 일을 하기 위한 컴퓨터라 쓸데없는 프로그램을 깔지도 않는데 항상 속도가 느려서 ㅠㅠ 컴알못인 저는 고민을 많이 했습니다. (저는 일러스트와 포토샵을 주로 사용하고 브라우저창을 무척 많이 띄워서 작업합니다.) 이렇게 느림 컴퓨터로 일할 바에야 아이맥을 살까 고민하며 사양을 검색해보던 중 8G? 16G? 32G? 이왕이면 메모리가 큰 게 좋겠지 생각하다가 제 데스크탑의 메모리는 용량이 어떻게 되는지 궁금해졌습니다. 전혀 모르고 사용하고 있었지요.. ^^;; 네 놀랍게도 4GB를 사용하고 있었던 것입니다. 작다 작아 ㅋㅋㅋㅋㅋㅋ 윈도우10에서 설치된 메모리는 설정(톱니바퀴 모양) > 시스템 > 정보 > 장치사양 > 설치된 RAM에서 확인할 수 있습니다. 아이맥의 꿈은 일단 접고 메모..


티스토리 대표 이미지를 본문에서 숨기는 방법 (2022 업데이트 Ver)

오랜만에 티스토리에서 글을 쓰고 이전과 같이 대표 썸네일을 본문에서 숨기려고 했는데 이미지 코드가 달라진 것 같은 느낌적인 느낌 아니나 다를까 style 코드가 적용되지 않더라고요 ^^ 다른 방법을 찾아서 공유해봅니다!! ① 글쓰기 도구 > HTML 창에 접속해주세요. ② 숨김처리 되어야 할 대표 이미지를 둘러싼 ... 태그를 ... 로 변경하여 저장해주시면 됩니다. 알고 나면 별거 아닌데 매우 당황스러웠네요 ㅎㅎ


윈도우10 검색창 삭제 그림 제거하기

윈도우 10 검색창에 예쁜 그림이 노출되네요 ^^; 하지만 미관을 해친다고 생각되므로 없애주겠습니다. 노출 원하지 않는 경우 아래의 과정 진행해주시면 됩니다. 검색창 우측 클릭 > 검색 > 검색 하이라이트 클릭하여 체크 해제 매우 간단하지요!? 검색 아이콘만 남기고 싶다 하시는 경우에는 검색창 우측 클릭 > 검색 > 검색 아이콘 표시에만 체크표시를 남겨주시면 됩니다 :)


카페24에 타 업체에서 구매한 도메인 연결 (도메인 네임서버 변경)

카페24 쇼핑몰에 타 업체에서 구매하신 도메인을 연결하기 원하시는 경우 ① 구매하신 도메인을 카페24 쇼핑몰에 연결하고 ② 도메인 구매하신 업체에서 네임서버를 카페24의 것으로 변경해주셔야 합니다. ① 상세 안내 카페24 관리자 접속 > 프로모드 변경 > 상점관리 > 기본정보관리 > 도메인 설정 > '도메인 연결' 버튼 클릭하여 도메인 등록하시면 됩니다. ② 상세 안내 카페24 네임서버 확인 경로는 카페24 관리자 접속 > 프로모드 변경 > 상점관리 > 기본정보관리 > 도메인 설정 > 카페24 네임서버 안내 버튼 클릭하여 확인이 가능합니다. 도메인 구입한 업체의 사이트에 로그인하여 도메인의 네임서버 정보를 해당 정보로 변경해주시면 됩니다. 네임서버 번경 방법과 변경 위치는 도메인 구매하신 업체마다 다르기..


티스토리 오디세이 스킨 배경색 설정하기 (컬러코드 확인하는 방법)

티스토리 스킨 배경에 색상을 입히는 코드입니다 :) 현재 저의 스킨은 색상코드 #f1efec 적용되어있습니다. 티스토리 관리자에서 스킨편집모드 > html 편집창으로 접속해주세요. CSS 페이지의 body 부분에 background:컬러번호; 를 작성하면 됩니다. 검색 영역의 흰 배경이 보이는 게 싫다면 .util .search 클래스의 background-color:#fff; 부분을 삭제하고 저장하면 됩니다. 컬러번호(컬러코드)를 확인하는 방법 아래 링크에서 마우스 드래그만으로 찾는 것이 가능합니다 :) htmlcolorcodes.com/ HTML Color Codes Easily find HTML color codes for your website using our color picker, color..


윈도우 사진파일 미리보기가 안될 때

며칠 전 컴퓨터에 오피스 프로그램을 깔았더니 그 뒤부터 사진 파일 미리보기가 안되더라고요. (정확한 이유는 모르겠지만요) 그대로 쓸까 싶었는데 이미지 작업하는데 너무 불편해서 해결방법을 검색해보았습니다~!! 미리보기가 안되니까 어찌나 불편한지(눈물) .. 세상에 능력자들이 많으셔서 검색하니 다 나오네요. 저도 기억할 겸 정리할 겸 포스팅을 남겨보겠습니다. 폴더창에서 파일 버튼을 클릭해주세요. 폴더 및 검색 옵션 변경 버튼을 클릭해주세요. 폴더 옵션에서 보기탭을 선택해주세요. 고급설정의 '아이콘은 항상 표시하고 미리 보기는 표시하지 않음' 을 '체크 해제' 하여 확인해주시면 됩니다.


오디세이 스킨 본문 상단 이미지 없애고 사용하는 방법 코드공유

오디세이 스킨 본문 상단 이미지를 없애고 사용하는 방법을 궁금해하실 수 있을 것 같아서 (달아주시는 댓글을 보면 실제로 조금 있으신 것 같기도 하고요) CSS 코드를 공유하기로 했습니다 :) 본래는 오디세이 적용 예시 스킨과 같이 대표 이미지가 스킨 본문의 상단에 백그라운드 이미지로 설정되어있는 형태입니다. 이미지 위로 카테고리와 타이틀, 작성일자가 표시됩니다. 저는 이 부분을 코드 변경하여 아래와 같은 형태로 사용하고 있습니다 :) 배경 이미지 없이 카테고리명과 제목, 작성일자가 표시되고 아래로 라인을 설정하였습니다. 모바일에서도 동일한 형태로 노출됩니다. 코드를 수정하기 전에는 반드시 이전 코드로 되돌릴 수 있도록 메모장 같은 곳에 css 코드를 백업해두시고 진행하시는 것 추천드립니다. 오류나는 경우..


블로그 대표 이미지를 본문에서 숨기는 방법

대표 이미지를 본문에서 숨기는 방법을 궁금해 하셔서 방법 정리합니다 :) 아주 간단합니다. 1. 첨부 버튼으로 이미지를 업로드 해주세요 대표로 지정 할 이미지를 클릭하여 대표로 설정해주세요. 2. HTML 보기 화면 설정하여 대표로 설정한 이미지 태그에 style="display:none;" 코드를 심어주고 기본모드로 돌아오면 대표 이미지가 본문상에서는 노출되지 않게 됩니다. 포스팅 내용이 많은 경우 대표 이미지를 어디에 설정했는지 헷갈릴 수 있습니다. 대표 이미지는 항상 글 작성 후, 가장 마지막에 업로드하고 코드를 수정하고 있습니다 :)


오디세이스킨 폰트 확인하고 변경하기 feat. 구글 웹 폰트

구글 웹폰트를 사용하는 방법은 이전 글인 쇼핑몰에 구글 웹폰트 적용하기에서 다루었습니다만, 티스토리 블로그에도 적용이 가능하기 때문에 한번 더 포스팅합니다. 사용중인 스킨인 오디세이에 실제로 어떻게 적용이 되는지 간단히 확인해보겠습니다 :) 카페24 쇼핑몰에 구글 웹폰트 적용하기는 아래 글 참고해주시면 됩니다. [카페24 쇼핑몰] - 스마트 디자인 쇼핑몰에 구글 웹 폰트 적용하기 구글 웹폰트에 접속해서 적용 원하는 한글 웹폰트를 찾아보겠습니다. fonts.google.com/ Language 클릭하여 Korean 선택하면 한글 웹폰트를 확인할 수 있습니다. Sunflower라는 폰트가 괜찮아 보여서 적용해보겠습니다. 상세페이지로 들어가서 300, 500, 700 굵기 모두 선택하여 Embed의 코드 복사..


스마트 디자인 쇼핑몰에 구글 웹 폰트 적용하기

카페24 스마트 디자인으로 제작한 쇼핑몰에 대한 이야기입니다. 웹폰트를 변경하는 방법 알려드릴게요. 우선 사용 할 웹폰트가 오픈 폰트인지 확인해주셔야 합니다. 라이선스가 있는 경우 구매하여 이용해야 하겠습니다. 저는 주로 구글에 등록된 오픈 폰트를 사용합니다. 구글에 등록된 오픈 폰트를 기준으로 적용방법 알려드릴게요! 1. 구글 웹폰트 접속하기 fonts.google.com/ 위 링크에서 구글 웹폰트 사이트로 접속하면 영문, 국문 사용 가능한 폰트를 확인 할 수 있습니다. 폰트가 너무 많아서 선택이 어렵다 하는 경우 Most Popular 정렬 이용해서 정렬하신 후, 살펴보시면 좋습니다. 확실히 인기 폰트인 이유가 있습니다 적용 가능한 굵기도 많고 폰트가 깔끔해요. Roboto 폰트 클릭해서 들어가볼게요..


티스토리 사이드바에 광고넣는 방법!

사이드바에 카카오톡 애드핏 광고만 넣었는데 애드센스 광고도 넣어보았습니다. 애드핏은 Daum Adfit 플러그인에서 사이드바 광고까지 넣어주던데 애드센스는 또 다른 방법으로 넣어야 하는 것 같더라고요. 검색하지 않고는 넣는 방법을 전혀 모르겠기에 잊기 전에 기록으로 남겨 볼 겸 포스팅합니다. www.google.co.kr/intl/ko_kr/adsense/start/?utm_campaign=1001272-adsense-acquisition-kr-ko-hybrid-bkws Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. www..


반응형 웹 홈페이지란 무엇일까?

제작 의뢰받다 보면 "반응형 사이트인가요?" 라는 질문을 많이 받습니다. 반응형이라는 것이 정확히 무엇인지 모르시고 반응형이 좋다더라고 말씀하시는 분들도 있으셔서 정리를 해보았습니다. 반응형 홈페이지란?? 무엇에 대한 반응인지를 생각해보면 명확하겠습니다. 사이트가 보여지는 기기에 대한 반응을 의미합니다. 다양한 디바이스가 등장함에 따라서 PC 이외 태블릿, 스마트 폰 등 어떠한 접속 환경에서도 최적화된 화면으로 노출되는지 여부에 따라 반응형 여부를 확인할 수 있습니다. 다음 홈페이지를 예시로 확인해보겠습니다. 반응형으로 제작이 되어있지 않은 경우 모바일(좌)처럼 모바일에서 피씨 화면이 그대로 노출됩니다. 반응형으로 제작이 되어있는 경우 모바일(우)처럼 모바일 최적화 화면이 노출됩니다. 이러한 부분을 고려..