본문 바로가기
반응형

IT 리뷰/블로그 SEO

 (185)
CSS 배경색·글자색 색상코드 정리 HEX/RGB/RGBA와 테마 컬러 관리 팁 웹사이트 CSS 배경색·텍스트 색상코드 정리 (티스토리·워드프레스 HTML)티스토리, 워드프레스, 네이버블로그처럼 플랫폼이 달라도 화면에서 가장 먼저 체감되는 건 색입니다. 배경이 조금만 탁해도 글이 답답해 보이고, 링크 색이 튀면 신뢰도가 떨어져 보이기도 하죠. HTML/CSS에서 색을 지정하는 방식은 단순하지만, “어떤 포맷을 언제 쓰면 편한지”를 알아두면 작업 속도가 확 올라갑니다.가장 흔한 방식은 HEX(16진수) 입니다. RGB(빨강/초록/파랑) 채널을 0~255 범위로 두고, 이를 16진수 두 자리씩 묶어서 #RRGGBB 형태로 표현합니다. 예를 들어 #FF0000은 빨강, #00FF00은 초록, #0000FF는 파랑(블루)입니다. 2026년 기준으로 실무에서 자주 쓰는 건 HEX와 rgb/r..
마우스 휠 스크롤을 가로 이동 변경 섹션형 웹사이트 HTML/CSS/스크립트 웹사이트 마우스 스크롤로 세로에서 가로 이동 구현하기 (HTML/CSS/스크립트)웹사이트를 만들다 보면 “요즘 사이트들은 왜 이렇게 부드럽게 넘어가지?” 싶은 순간이 있습니다. 제품 소개, 포트폴리오, 이벤트 페이지처럼 섹션을 크게 보여주는 화면에서는 휠 스크롤을 가로 이동으로 바꿔 콘텐츠를 넘기는 방식이 꽤 자주 쓰입니다. 다만 아무렇게나 적용하면 트랙패드에서 튀거나, 모바일에서 어색해지거나, 스크롤 막힘 때문에 답답하게 느껴질 수 있습니다. 그래서 “가로 이동이 자연스럽게 느껴지는 최소 구성”부터 잡아두고, 필요하면 섬세하게 조정하는 쪽이 결과가 좋습니다.요즘 가장 핫한 웹사이트 트렌드 중 하나는 마우스 스크롤 시 가로 스크롤링 기능을 활용한 구성입니다. 티스토리 스킨, 워드프레스 테마, 랜딩 페이지..
워드프레스 사이드바 모바일 숨김 + PC 전용 위젯 노출, 좌/우 추가 sticky 설정 워드프레스 사이드바 숨기기 & 좌/우 추가, 위젯 모바일 숨김 + 스크롤 따라오기 설정워드프레스는 PC에서 화면 폭이 넉넉할 때 사이드바(위젯)를 잘만 쓰면 카테고리, 인기글, 검색, 공지 같은 요소를 자연스럽게 노출할 수 있습니다. 문제는 모바일입니다. 모바일에서 사이드바가 본문보다 먼저 길게 나오거나, 위/아래로 과하게 늘어지면 본문까지 스크롤을 내려야 하는 구간이 생기고, 이게 체감 이탈로 바로 이어집니다. 특히 앱/웹뷰 환경에서는 “상단에 길게 붙는 위젯”이 더 자주 보입니다.그래서 오늘은 모바일에서는 사이드바를 숨기고, PC에서는 필요할 때만 보이게 하거나(또는 특정 위젯만 노출), 추가로 좌/우 사이드바를 구성하는 방식까지 한 번에 정리합니다. 참고로 “사이드바에 애드센스 광고를 고정” 같은 ..
티스토리 사이드바 고정해제 sticky 고정, 높이·폭 사이즈 조절까지 CSS 티스토리 사이드바 고정해제 & 마우스 스크롤 따라오게 설정, 사이즈 조절 CSS티스토리에서 사이드바는 “있으면 편한데, 잘못 잡히면 불편한” 영역입니다. 본문만 깔끔하게 보여주고 싶을 땐 사이드바를 끄는 게 정답일 때가 많고, 반대로 카테고리/공지/최근글/구독 버튼처럼 독자가 바로 눌러야 하는 요소가 있다면 사이드바가 확실히 힘을 냅니다. 문제는 스킨에 따라 사이드바가 고정되어 있다가 콘텐츠가 길어지면 하단 위젯이 잘리거나, 반대로 너무 안 따라와서 읽는 중에 사용성이 뚝 떨어지는 케이스가 생긴다는 겁니다. 2026년 기준으로도 해결 방향은 똑같습니다. 스킨에서 쓰는 사이드바 셀렉터(#aside, #sidebar, .area-aside 등)를 찾고, position: sticky 중심으로 안정적으로 조정..
MacOS - 맥북 FTP 로그인 및 워드프레스 설치 사이트 구축방법 MacOS - 맥북 FTP 로그인 및 워드프레스 설치로 사이트 구축하는 방법호스팅을 쓰면서 파일 업로드/플러그인 수동 설치/백업 복원까지 직접 만지다 보면, 결국 맥북 FTP 접속은 한 번쯤 필요해집니다. macOS에서도 충분히 쾌적하게 운영할 수 있고, 그중에서 FileZilla는 무료 FTP 클라이언트 중 가장 익숙한 선택지죠. 이 글은 맥북에서 FTP 로그인을 하고, 업로드한 파일로 워드프레스 설치까지 이어지는 흐름을 한 번에 정리했습니다.이미 FTP 접속만 필요한 분이라면 아래 내부 글로 바로 넘어가도 됩니다.참고: 맥북에서 FTP 서버에 로그인하는 방법 워드프레스 설치형이 좋은 이유(맥북 기준)워드프레스를 “설치형”으로 운영하면, 데이터와 파일을 내가 통제할 수 있다는 점이 큽니다.그리고 mac..
워드프레스 관리자 이메일 변경 + 비밀번호 초기화 (메일 안 올 때까지) 워드프레스 이메일주소 변경 + 로그인 비밀번호 초기화 (wp-admin 기준)워드프레스는 로그인 아이디(사용자명)만큼이나 관리자 이메일이 중요합니다. 비밀번호 재설정 메일, 보안 알림, 업데이트 알림이 전부 이 주소로 들어오니까요.여기서는 wp-admin에서 이메일 바꾸는 방법부터 비밀번호 재설정, 그리고 메일이 안 올 때 자주 막히는 포인트까지 한 번에 정리해둘게요.워드프레스 이메일주소 변경관리자 화면에서 설정 > 일반 > 이메일로 들어가 기본 이메일을 원하는 주소로 바꾼 뒤 저장하면 됩니다.저장 직후에는 “변경 신청이 대기 중”처럼 보일 수 있는데, 이건 정상입니다. 대부분 새 이메일로 확인 메일이 가고, 확인이 끝나야 최종 반영되는 방식이 섞여 있어요.그리고 많이 헷갈리는 부분 하나. 사용자명(아이..
데이블 광고 수익 입금일 애드센스 애드핏 비교 및 수익 정산 방식 데이블 광고와 애드센스, 애드핏 비교 및 수익 정산 방식블로그 운영을 하다 보면 가장 큰 관심사는 광고 수익입니다. 저 역시 티스토리를 꾸준히 운영하면서 애드센스, 애드핏, 데이블 광고를 모두 적용해왔는데, 최근 몇 년 사이 애드센스 수익이 줄어든 반면 데이블 광고는 여전히 꾸준히 입금이 이뤄지고 있습니다. 큰 금액은 아니지만 오랜 기간 쌓여 부수입으로 이어지니 블로그를 유지하는 동력이 되곤 합니다.애드센스, 애드핏, 데이블 광고 차이 티스토리 데이블 광고 신청방법 - Dable티스토리 데이블 광고 신청방법 - Dable 티스토리 블로그나 나 워드프레스 등등 HTML 수정이 가능한 CMS 형 블로그는 광고를 설정 후 수익을 창출할 수 있기 때문에 블로그나 홈페이지를 운영한다면jab-guyver.co.kr..
워드프레스 사이드바 고정 및 사이즈 변경 - 썸네일 대표이미지 숨기기 워드프레스 사이드바 고정 및 사이즈 변경 – 썸네일 대표이미지 숨기기워드프레스로 웹사이트를 직접 운영하다 보면 테마가 제공하는 기본 옵션만으로는 부족할 때가 많다. 특히 사이드바를 스크롤해도 고정된 상태로 유지하고 싶거나, 사이드바 폭(넓이·높이)을 직접 조절하고 싶은 경우가 대표적이다. 여기에 더해 포스팅 상단에 자동으로 뜨는 썸네일 대표이미지를 숨겨서 레이아웃을 정리하고 싶은 니즈도 자주 생긴다.이런 작업은 대부분 CSS와 약간의 워드프레스 구조만 이해하면 충분히 직접 수정할 수 있다. 아래에서 사이드바 고정, 사이드바 사이즈 변경, 그리고 썸네일·대표이미지 숨기는 방법까지 순서대로 정리해본다.워드프레스 사이드바 고정하는 기본 CSS먼저 사이드바 고정은 테마의 style.css를 직접 편집하거나, 워..
반응형

티스토리툴바