퍼블리싱 아카이브

https://velog.io/@seeyong_0/TIL-%EA%B0%9D%EC%B2%B4-%EC%95%88%EC%9D%98-%EA%B0%9D%EC%B2%B4-%EC%A0%91%EA%B7%BC-%EA%B0%9D%EC%B2%B4-%EC%95%88%EC%9D%98-%EB%B0%B0%EC%97%B4-%EC%A0%91%EA%B7%BC TIL | 객체 안의 객체 접근, 객체 안의 배열 접근 객체 안의 객체는 중첩된 객체라고 한다. 영어로는 Nested Object이다. 중첩된 객체에 접근하는 방법은 객체를 접근하는 방법과 마찬가지로 점 표기법(dot notation)과 대괄호 표기법(bracket notation)을 사 velog.io

https://angelplayer.tistory.com/124 [HTML] 파비콘(주소창 아이콘) 적용 방법 웹 페이지에서 주소창 위에 나타나는 아이콘을 파비콘(Favicon)이라고 부릅니다. (즐겨찾기 등에서도 파비콘으로 지정한 아이콘이 나타납니다.) 오늘은 홈페이지 제작 시 파비콘을 적용하는 방법 angelplayer.tistory.com

1. $break-point & @mixin 사용하기 반응형 웹을 작성할 때 일반적으로 나누는 $break-point는 1200px, 992px, 768px, 576px이다. 이 기준이 대중적으로 가장 많이 통용되는 기준이므로 반응형 웹을 작성할 때는 다음과 같이 작성하면 된다.(하지만 절대적인 기준은 아니다.) //_responsive.scss $break-point-xl: 1200px;//데스크탑 $break-point-lg: 992px;//태블릿 가로 $break-point-md: 768px;//태블릿 세로 $break-point-sm: 576px;//모바일 @use 'responsive' as r; /*responsive*/ @mixin responsive_xl{ @media screen and ..

용도 공통된 스타일을 반복적으로 사용하기보다 한 번 선언하고 여러번 사용하고 싶을 때 @extends 문법을 쓴다. 예시1) 클래스를 선언하여 extend하는 법 => css 파일에서도 존재하는 클래스 //scss .btn{ width: 100px; height: 100px; padding: 20px; } .btn-green{ @extend .btn; color:rgb(196, 253, 196) } //css .btn, .btn-green { width: 100px; height: 100px; padding: 20px; } .btn-green { color: rgb(196, 253, 196); }/*# sourceMappingURL=main.css.map */ 예시2) 가상클래스 %를 선언하여 exten..

사이트맵 웹 사이트 내 모든 리소스의 목록을 나열한 파일이다. 검색엔진에 웹 사이트 내 모든 페이지의 목록을 제공한다. 검색엔진 랭킹 점수를 높이는 데 직접적인 영향을 주지는 않으나, 일반적인 크롤링 과정에서 발견되지 않을 수 있는 웹 페이지 정보를 제공하여 사이트맵을 설정하는 것이 SEO에 긍정적인 영향을 끼친다. 사이트맵 생성법 사이트맵 파일의 위치를 루트 디렉토리에 지정한다. (루트폴더에 업로드) 웹사이트 url 뒤에 /sitemap.xml을 입력하여 찾아볼 수 있다. 사이트맵은 직접 작성하기보다 사이트맵을 생성해주는 온라인 사이트를 이용하는 것이 수월하다. 1. XML-Sitemaps.com(wordpress 기반이 아닌 웹사이트 사이트맵 제작시) https://www.xml-sitemaps.co..

검색엔진의 수집 로봇(검색엔진 크롤러)를 위한 robots.txt 파일은 웹 표준의 하나로, 모든 웹 사이트 루트 폴더에 위치해야 한다. 이 파일은 검색엔진 로봇에 웹사이트의 사이트맵 위치, 접근 가능 파일과 가능하지 않은 파일 등의 정보를 알려준다. 이를 통해 관리자가 직접 수집이 되길 원하는 사이트와 그렇지 않은 사이트를 구분지을 수 있고 검색 엔진이 웹 사이트를 더 빠르고 효율적으로 수집할 수 있도록 도와준다. robots.txt 작성법 html이 아닌 일반 txt 파일로 작성한다. 사이트의 루트 디렉토리에 위치해야 한다. 도메인 주소에 /robots.txt를 입력하면 확인할 수 있다. 검색엔진 로봇명: 구글 Googlebot, 네이버 Yeti, 빙 Bingbot, 야후 Slurp 1) 모든 웹사이..

웹사이트 내 링크깨짐 현상이 발생하여도 페이지 랭크 점수에 아무 영향이 없도록 해야한다. 사용자가 다른 URL을 통해 사이트에 들어오는 경우 선호 도메인을 설정해 SEO 점수를 한곳으로 모으는 것이 중요하다. 301 리디렉션: 도메인이나 url을 영구적으로 변경할 때 사용. 검색엔진이 새로운 도메인을 색인에 저장하여 이전 URL은 없어진다. 302 리디렉션: 일시적 이전. 페이지나 사이트를 일시적으로 옮길 때 사용한다. 일시적으로 이전하는 것이므로 구글은 이전 url을 지우지 않고 그대로 남겨둔다. //0초만에 변경된 url로 이동함 404에러 SEO 측면에서 404 에러 페이지를 어떻게 처리하느냐에 따라 검색엔진의 사이트 신뢰도가 달라진다. 페이지 파일이 없거나 링크가 깨진 상황이라면 404 페이지를 ..

오픈 그래프란? 웹 페이지 링크를 공유할 때, 소셜 미디어에 해당 웹 사이트의 상세한 정보를 제공하기 위해 사용한다. HTML 문서의 메타 정보를 쉽게 표시하기 위한 기능으로 링크를 넣을 때 미리보기에 나오는 제목, 설명글, 이미지 등을 설정하는 역할을 맡는다. 오픈 그래프를 설정하지 않으면 크롤러는 자동으로 웹 사이트의 제목, 요약 내용, 대표이미지를 설정한다. 하지만 크롤러가 저보 의미를 100%%인식하는 것이 불가능해 콘텐츠에 맞지 않는 제목이나 이미지가 설정될 수 있다. 따라서 오픈 그래프와 메타 태그를 이용해 전달하고자 하는 정보를 직접 전달하는 것이 중요하다. og:title은 제목, og:description은 설명글, og:image는 이미지 정보이다. SNS에 공유시 나타나는 이미지와 제..

타이틀 태그 타이틀 태그는 페이지 레벨에 해당하는 테크니컬 SEO 항목이며, 페이지 제목을 나타내는 HTML의 사이에 태그이다. 검색 엔진 크롤러가 웹 페이지 정보를 수집할 때 타이틀 태그를 웹사이트 타이틀이라고 인식하며 특정 페이지의 주제를 이를 통해 알 수 있다. 제목 글자 수가 공백을 포함하여 영문 65자, 한글 32자 내외여야 한다. 제목에는 가장 중요하고 관련이 깊은 키워드를 넣어야 한다. 반복은 안된다. 각 페이지는 고유의 제목이 있는 것이 좋다. 메타 디스크립션 태그 웹페이지를 요약한 설명글이다. 타이틀 태그처럼 태그 사이에 위치한다. 검색 결과에서 페이지 제목과 URL 아래에 표시된다. 더 나은 웹을 만드는 브리티웹 한글 기준으로 77자, 영어 기준으로 160자를 넘지 않는 것을 권장한다...

role='button' button 태그를 사용하지 못할 때 button 역할임을 알리고 싶다면 role='button'속성을 사용한다. role="tablist" / role="tab"/aria-selected='true','false'/aria-expanded='true','false' 탭리스트를 하나로 묶을 때 tablist 속성을 사용하며 하나의 탭은 tab으로 속성을 부여한다. 선택됐는지 여부를 확인하기 위해 aria-selected 속성을 사용한다. aria-selected='true'면 해당 탭이 선택되었다는 의미, 'false'면 선택되지 않았다는 의미이다. aria-expanded는 해당 탭을 눌러 설명이 확장되었는지 여부를 알려준다. role="tooltip" input placeho..