전체보기829

728x90
[운영일지]웹미니 라이프 스킨 1.1.0 웹미니 라이프 스킨 1.1.0업데이트 내역관리자 설정1. 서브 타이틀 등록 추가2. 블로그 ID 설정 (상단 '구독하기' 자동생성)3. 블로그 오픈일 등록 설정(운영일수 자동계산 기능)4. GNB 색상 설정가능(배경,폰트,hover) - 다크모드 포함5. 검색최적화(SEO) - 네이버,구글,빙, 사이트 키워드 등록 가능6. 홈 프로모션 자동/정지 기능설정, 제목 색상, 버튼문구 및 색상 설정 가능7. 본문 자동 목차 기능(목차 노출 비활성화/활성화)8. 사이드바 카테고리 메뉴 펼침기능9. 사이드바 카테고리 자동 위치 기능(글,카테고리에 따라 자동으로 위치 찾음)10. 푸터 메뉴 설정 기능 대부분의 기능을 관리자에서 설정할 수 있도록 수정함.
[티스토리]웹미니 스킨 버전 관리(버전 표기법) 웹미니(티스토리) 스킨의 버전은 다음과 같이 표기합니다.첫 릴리스 버전은 1.0.0 부터 시작합니다. 초기 버전 표기주요 (호환성): 1부가 (기능추가 및 개선): 0수정 (패치 및 소소한 수정): 0버전 표기법 설명주요 (Major)주 버전은 주요 기능 변경이나 호환성 문제를 나타냅니다. 이 숫자가 바뀔 때는 소프트웨어가 큰 변화가 있거나 주요 기능이 추가되었음을 의미합니다.부가 (Minor)부 버전은 기능 추가나 소규모 개선 사항을 나타냅니다. 주 버전이 동일한 상태에서 이 숫자가 바뀌면 새로운 기능이 추가되거나 기존 기능이 개선되었음을 의미합니다.수정 (Patch)수정 버전은 버그 수정이나 작은 개선 사항을 나타냅니다. 부 버전이 동일한 상태에서 이 숫자가 바뀌면 주로 버그가 수정되었음을 의미합니다.
[운영일지]웹미니 라이프 스킨 1.0.1 (웹접근성,권장사항,SEO) 웹미니 라이프 스킨 1.0.1업데이트 내역 웹접근성1. 색상 명도대비 수정 (다크모드 포함) 2. 백그라운드 이미지 대체 문구 삽입 (스킨 외 코드 : 티스토리-댓글,방명록,블로그소개 영역) 3. 이미지 alt 강제 삽입 4. 메인 슬라이드 페이징 포커스 영역 수정 5. 티스토리 코드(iframe 'title' 누락 부분 강제 삽입) 6. 최근/인기/댓글 웹접근성 코드 추가 및 마크업 변경 7. a링크 target 없는 경우 _self 자동 삽입 8. 링크 및 버튼 포커스영역 미흡사항 반영권장사항1. 페이징 이전,다음,... herf 없는경우 강제로 span 태그로 변경 2. 다크모드에서 이메일(링크) 색상 구분SEO1. canonical 동적으로 URL변경그 밖에 업데이트1. 메인 슬라이드 자동/정지 ..
[운영일지]웹미니 라이프 스킨 1.0.0 웹미니 라이프 스킨 1.0.0 업데이트 내역1. 웹미니 블로그 10.0.0을 웹미니 라이프 1.0.0 스킨으로 변경2. 나의 링크 추가(푸터,사이드바) - 링크가 없을경우 영역 숨김3. CSS색상 변수 추가 및 보완4. 코드 정리 및 스타일 수정  작업 예정- 배포용으로 준비중
[웹접근성]웹접근성을 고려한 탭메뉴 만들기 웹 접근성을 고려한 탭 메뉴는 키보드 사용자, 스크린 리더 사용자 등 다양한 사용자들이 접근할 수 있도록 구성해야 합니다.탭 메뉴 구성 요소탭 컨테이너: 탭 메뉴를 감싸는 컨테이너.탭 리스트: 각 탭 버튼을 포함하는 리스트.탭 버튼: 클릭 또는 키보드로 선택할 수 있는 버튼.탭 패널: 각 탭 버튼이 활성화될 때 보여줄 콘텐츠.접근성을 고려한 HTML 구조다음은 웹 접근성을 고려한 탭 메뉴의 기본 HTML 구조입니다. 탭 1 탭 2 탭 3 탭 1의 내용 탭 2의 내용 탭 3의 내용HTML 구조role="tablist": 탭 버튼들을 감싸는 컨테이너로 역할을 지정합니다.role="tab": 각각의 탭 버튼에 역할을 지정합니다.role="tabpanel": 각각의 탭 패널에 역..
[Git]새로운 브랜치를 기존 브랜치에 merge(병합)하기 앞서 새로운 브랜치를 생성하고 기존 브랜치를 새로운 브랜치에 복제하는 방법을 설명했는데요. https://webmini.tistory.com/482522 [Git]새로운 브랜치(branch)에 다른 브랜치 복제하기기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기webmini.tistory.com 그 후에 새로운 브랜치에서 작업 후 기존 브랜치에 merge(병합)하는 방법입니다.기존 브랜치에 체크아웃먼저, 기존 브랜치에 체크아웃을 합니다.기존 브랜치 = branchA새로운 브랜치 = branchB위처럼 가정할때, 기존 브랜치(복제당한 브랜치) branchA로 체크아웃합니다.gi..
[Git]새로운 브랜치(branch)에 다른 브랜치 복제하기 기존에 만들어진 브랜치를 그대로 가져와서 새로운 브랜치에 복제하는 방법입니다.브랜치 생성, 복제, 푸시하기먼저 복제당할 브랜치 즉, 기존 브랜치에 체크아웃되어있어야 합니다.이해하기 쉽게 기존 브랜치명을 "branchA"라 하고 새로운 브랜치명을 "branchB"라 하겠습니다. 먼저, 기존 브랜치에 체크아웃합니다. (복제당할 대상)git checkout branchA 그 후에 새로운 브랜치를 생성해 줍니다. (branchA 브랜치의 복제를 받을 대상)git checkout -b branchB 여기서 git checkout -b 명령어에서 -b는 "새 브랜치를 생성하고 그 브랜치로 체크아웃"하라는 의미입니다. 이 명령어를 사용하면 새로운 브랜치를 만들고 동시에 그 브랜치로 이동할 수 있습니다. 마지막으로 로..
[SEO]SEO 검색엔진 최적화 기본문서 SEO(검색 엔진 최적화, Search Engine Optimization)는 웹사이트나 웹페이지를 검색 엔진에서 상위에 노출되도록 최적화하는 과정입니다. SEO의 목적은 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지하여 더 많은 유기적(organic) 트래픽을 얻는 것입니다. SEO는 크게 온페이지 SEO(On-page SEO)와 오프페이지 SEO(Off-page SEO)로 나눌 수 있습니다.주요 SEO 최적화 요소1. 온페이지 SEO(On-page SEO)온페이지 SEO는 웹사이트 내부의 요소를 최적화하는 작업입니다. 주요 요소로는 다음과 같습니다:키워드 리서치(Keywords Research): 사용자들이 검색할 때 사용하는 관련 키워드를 찾고 이를 콘텐츠에 포함시키는 과정입니다.메타 ..
[사이트]웹사이트(모바일) 속도, 성능 진단 및 웹접근성, SEO 체크 해주는곳 PageSpeed Insights웹접근성 및 사이트를 전반적으로 진단해주는 사이트이다. 어디가 문제가 있고 어떻게 보완해야하는지 알려주기도한다.https://pagespeed.web.dev/ PageSpeed Insights올바른 URL을 입력하세요.pagespeed.web.dev 사이트 최적화할때 매우 유용하다.그밖에 자세한 설명과 방법들도 자세히 알려주기 때문에 수정보완하기가 쉽다.
[운영일지]웹미니 블로그 Ver10.6 웹접근성,SEO,권장사항 보완 웹미니 블로그 Ver10.6로 업데이트 완료.업데이트 내역1. 코드 정리 및 CSS수정 (레드 포인트 컬러 변경)2. 웹접근성 보완3. 블로그 권장사항 및 SEO 강화웹접근성 보완- 웹접근성 체크- 권장사항 보완- SEO 보완티스토리 기본 코드 접근 제한으로 성능 최적화는 불가능
[운영일지]웹미니 블로그 Ver10.5 단축기 안내 및 화면 확대/축소 기능추가 웹미니 블로그 Ver10.5로 업데이트 완료.업데이트 내역1. 코드 정리 및 CSS수정2. 화면 확대 축소 기능 추가3. 단축키 안내 추가4. 로고 애니메이션 추가5. 웹접근성 체크 및 보완화면 확대/축소 기능- 모바일이나 반응형일때 기능제거 및 초기화- 최대,최소 크기 도달시 alert추가 및 색상 변경
[티스토리]관리자 '스팸 댓글 휴지통' 오류좀 잡아주세요 댓글 휴지통은 도배 등 시스템에서 스팸 분류한 댓글을 휴지통으로 이동시켜 주는 기능이다.댓글 내용이 '이용약관 위배로 관리자 삭제되었습니다.'라고 뜨길래 거슬려서 '삭제'를 했는데 삭제가 되지 않는다. '복구'는 되는데 삭제가 안된다. 체크해서 삭제를 해보기도 해보고, 영역 오버 시 나오는 메뉴에서도 삭제를 해보 왔지만 마찬가지였다.15일 후에 자동 삭제가 된다고는 하는데 '변경중' 이라고만 나오고 멀쩡한 걸 보니 오류인듯한데, 티스토리 개발자분들 확인 좀 해주세요. https://notice.tistory.com/2661 [안내] '스팸 댓글 휴지통 보내기' 기능 신설안녕하세요. 티스토리팀입니다. ‘스팸 댓글 휴지통 보내기’ 기능이 신설되었습니다. ‘스팸 댓글 휴지통 보내기’는 도배 등 시스템에서 스팸..
[AI]Adobe Firefly(어도비 파이어플라이) 세미나 후기 - 사용법 간단히 살펴보기 회사에서 진행하는 Adobe Firefly(어도비 파이어플라이) 세미나를 다녀왔다.AI가 대세이기도 하지만, 항상 시대를 따라가야 한다는 신조아래 본사에 방문하게 됐다. Adobe가 AI에서 후발주자이긴하다.그러나 Adobe 브랜드에 맞게 그 기술력은 상당했다. 그후기를 간단하게 요약해 본다. (요점만 이야기를 할 거라 성의 없어 보여도 양해부탁) 아마도 제일 궁금한 게 어떻게 사용하는가? 일 것이다.기억나는 건 두 가지 방법이다. 1. Adobe firefly 사이트에 접속해서 사용하는 방법2. photoshop이나, Illustrator에서 사용하는 방법 사이트에 접속해서 사용하는 방법firefly 사이트에 접속https://firefly.adobe.com/ Adobe Firefly firefly.a..
[CSS]게임하면서 CSS(flex,grid) 공부해보자 Flexbox Froggyhttps://flexboxfroggy.com/#ko개구리가 수련잎에 올라가는거 도와주는 게임 Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.comGrid Gardenhttps://cssgridgarden.com/#ko당근밭 가꾸는 게임 Grid GardenA game for learning CSS grid layoutcssgridgarden.comFlexboxDefensehttp://www.flexboxdefense.com/적들을 물리치는 디펜스게임 Flexbox DefenseYour job is to stop the incoming enemies from getting past your defenses. Unlike ..
[사이트]120여종 SVG 파일을 무료로 제공해주는 곳 120여종의 SVG를 무료로 제공해주는 곳이 있어서 소개합니다. https://shapes.framer.website/ Copy-Paste SVG ShapesSVG Shapesshapes.framer.website"Download all"을 클릭하시면 다운받을 수 있습니다.SVG파일이라 색상은 코드상에서 변경하시면 됩니다.
[잡담]웹퍼블리셔(Web Publisher)와 프론트엔드 개발자(Front-End Developer)의 역할 - 과거와 현재 이야기를 하기에 앞서 과거를 거슬러 올라갈 필요가 있다.여기서 과거란 웹퍼블리셔라는 말(직종)이 생기기 전후를 말한다. 과거에 비해 현재는 분명하게 IT직군에 웹퍼블리셔라는 직종이 뚜렷해졌지만, 아직도 Front-end 개발자와 헷갈려하시는 분들이 있어 정의가 필요할듯하다. 어떤 분야에서 어떤 일을 하던 본인이 해야 할 일은 알고 있어야 할 것이 아니던가. 웹디자이너를 시작으로 현재까지 웹퍼블리셔로 일하면서 그동안의 경험담을 적어보고자한다. (과거 개인적인 이야기가 있어서 꼰대 느낌이 날 수도 있으니 감안하고 읽어주길 바란다. 할 얘기가 많아서 내용이 상당할 것이다.)웹디자이너의 역할그렇다.웹퍼블리셔가 생기기 전에는 웹디자이너가 웹퍼블리셔의 역할을 했었다.그때 당시 모뎀에서 인터넷으로 넘어가는 세대이기에..
[HTML]PDF 파일 등을 열리지 않고 다운로드 받게 하는 방법 PDF 파일을 브라우저에서 열지 않고 직접 다운로드 하게 하는 방법입니다.  태그의 href 속성과 download 속성을 사용하여 PDF 파일을 클릭했을 때 다운로드할 수 있도록 설정한 것입니다. 기본 형식은 맞습니다. 다만, 태그를 사용할 때 속성 값 주위에 공백이 있으면 안 됩니다. 올바른 형식은 다음과 같습니다.다운로드 download 속성에 값을 주어 다운로드될 파일명을 지정할 수도 있습니다.다운로드
[웹접근성]한국웹접근성인증평가원이 인증한 사이트 목록 지능정보화기본법 제 47조(장애인.고령자 등의 정보통신접근성 품질인증 등) 및 동법 시행령 제3조등에 의거하여 과학기술정보통신부로부터 공인된 인증기관인 (사)한국장애인단체총연합회 한국웹접근성인증평가원이 인증한 사이트 목록을 보시려면 아래 링크에서 확인가능합니다. http://www.wa.or.kr/board/list.asp?BoardID=0006 WA : 한국웹접근성인증평가원 (목록)" data-og-description="" data-og-host="www.wa.or.kr" data-og-source-url="http://www.wa.or.kr/board/list.asp?BoardID=0006" data-og-url="http://www.wa.or.kr/board/list.asp?BoardID=0006..
[Javascript]현재 페이지의 url값을 가져올 때 한글이 들어가있는 경우 현재 페이지의 url값이 한글일경우 한글을 가져오지 못하고 " %EC%BB%A4%EC%8A%" 이런식으로 깨지게 될경우 decodeURL()로 처리하면 됩니다.// 현재 페이지의 URL을 가져오기let url = window.location.href;// URL 디코딩url = decodeURI(url);// 결과 출력 (선택 사항)console.log(url); 코드 설명let url = window.location.href;window.location.href: 브라우저의 현재 페이지 URL을 나타냅니다. window.location 객체는 현재 문서의 위치(URL)에 대한 정보를 제공하며, href 속성은 전체 URL을 문자열로 반환합니다.이 줄은 현재 페이지의 URL을 url 변수에 저장합니다.예..
[CSS]숫자를 자동으로 증가, 감소시키기 위해 'counters' 사용 CSS 카운터(Counter)는 CSS에서 숫자를 자동으로 증가시키거나 감소시키기 위해 사용하는 기능입니다. 이를 통해 목록 항목이나 페이지 번호와 같은 요소에 번호를 매길 수 있습니다. CSS 카운터는 counter-reset, counter-increment, content 속성을 사용하여 설정하고, 스타일을 적용할 수 있습니다.CSS 카운터 설정 방법counter-reset: 카운터의 초기 값을 설정합니다.counter-increment: 카운터의 값을 증가시킵니다.content: ::before 또는 ::after 의사 요소에서 카운터 값을 표시합니다.예제1. 기본 사용법다음 예제는 번호가 매겨진 목록 항목을 생성합니다. First item Second item Third item 이 예제에..
반응형