콘요맘떼 개발일지

캐노니컬 태그 (Canonical Tag) 캐노니컬 태그는 한 페이지를 가리키는 여러 주소가 존재할 때 그 중 어떤 주소가 메인(원본)인지 알려주는 태그이다. 구글 문서에도 볼 수 있듯이 한 페이지가 여러 URL을 통해 접근되거나 유사한 컨텐츠가 서로 다른 페이지에 존재하는 경우(ex. 특정 컨텐츠의 모바일 전용 페이지, 데스크탑 전용 페이지) 검색 엔진은 표준 URL 하나를 기준으로 크롤링을 수행하고 나머지는 크롤링 빈도를 고의적으로 낮춘다. 만약 캐노니컬 태그를 사용하지 않는다면 검색 엔진은 임의로 표준 URL을 판단할 것이다. 그것은 우리가 원하는 표준 URL과 일치하지 않을 수도 있고 검색엔진마다 다른 표준 URL이 지정되는 결과로도 이어질 수 있다. 캐노니컬 태그를 사용하여 분명하게 표준 URL..

데이터 속성을 활용하면 자유롭게 HTML element에 추가적인 정보를 저장할 수 있다. HTML에서 사용하기 HTML element에 데이터 정보를 추가해주고 싶다면 data-로 시작하는 속성을 추가해주면 된다. data-로 시작하기만 하면 그 어떤 것도 상관없다. 자 이제 넣은 정보를 활용할 때이다. 물론 화면상으로는 보이지 않으면서 HTML 문서상으로만 무슨 정보를 추가하기 위해 데이터 속성을 활용할 수도 있지만 일반적으로 데이터 속성은 CSS 혹은 Javascript에서 활용하기 위해 등록된다. CSS 정말 마음대로 넣어주기는 했지만 데이터 속성도 엄연한 HTML 속성이다. 따라서 CSS에서도 접근할 수 있다. (1) 속성 선택자에서 활용하기 (2) Property Value에서 활용하기 att..

UI를 목적으로 태그 아래 들어가는 태그들이 아닌, 주로 태그 아래에 들어가며 메타 데이터를 담기 위한 태그들을 학습한다. 1. - DTD(Document Type Definition)이라고 불리며 브라우저에게 현재 웹페이지의 형식을 알려준다. - 브라우저는 이를 통해 해당 형식 및 버전을 기준으로 해당 페이지를 해석한다. 2. - 웹페이지의 시작과 끝을 알려준다. - 전역 속성(Global Attribute)를 자주 사용한다. (대표적으로 lang 속성을 통해 메인 언어 명시) ex) 3. - 웹페이지의 메타데이터를 작성하거나 외부 파일들을 링크하는데 사용한다. - 태그가 실제 사용자에게 보여지는 UI적 요소들의 최상위 컨테이너라면 는 사용자에게 보여지지 않는 것들이 담기는 곳이다. - 메타데이터를 담..

1. Semantic VS Non-Sematic : Content에 의미 부여하는가? (1) Semantic Tag (시멘틱 태그) - 자신이 무엇을 표현하는지 브라우저와 개발자에게 명확하게 설명해준다. - 개발자의 측면 : 웹 페이지의 구조를 보다 쉽게 파악할 수 있다. - 검색엔진의 측면 : 검색엔진은 봇을 통해 웹페이지들을 크롤링한다. 이 봇들은 시멘틱 태그에 담긴 요소들을 중요한 텍스트로 바라보기 때문에 검색어와 시멘틱 태그 컨텐츠가 잘 매칭되는 페이지를 우선으로 보여준다. 따라서 시멘틱 태그를 활용하면 검색엔진 최적화(SEO)를 달성할 수 있다. - 시멘틱 태그의 예시 : , , , , , , , , , ... ※ 태그와 태그의 차이점 section은 chapter, header, footer ..

HTML (Hyper Text Markup Language) 웹페이지가 어떻게 구조화되었는지 브라우저가 알 수 있게 해주는 마크업 언어이다. 웹 컨텐츠에 부가적 기능을 부여하는 CSS 혹은 Javascript와 달리 HTML은 웹 컨텐츠의 의미와 구조를 부여한다. 따라서 HTML 없이는 웹 페이지를 구성할 수 없다. → 한 마디로 웹 컨텐츠가 화면에 표시되는 형식을 정의하는 언어 ※ 마크업 언어 일반적 텍스트와 구별하기 위해 일반적 텍스트에 주석·태그 등을 붙인 것 HTML Element (HTML 요소) - HTML Element는 태그들과 그 사이의 Content로 구성되어 있다. - 태크는 여는 태그(Opening Tag, Start Tag)와 닫는 태그(Closing Tag, End Tag)가 있..