메타태그와 오픈 그래프, 트위터 카드

메타 태그 메타 태그는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그이다. 유저가 보게되는 웹페이지에는 영향을 주지 않지만 검색엔진이 웹페이지에 대한 정보를 파악할 수 있도록 돕는다. 주로 사용되는 메타 태그 메타 태그를 통한 검색엔진 최적화 오픈 그래프 (Open Graph) 사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML head 의 메타데이터를 크롤링하여 미리보기 화면을 생성한다. 대표적으로 카카오톡에서 공유한 링크가 이에 해당된다. 자주 사용되는 og 메타 태그 페이지의 유형(E.g, `website`, `video.movie`) 페이지 주소(URL) 페이지의 이름(제목) 페이지의 대표 이미지 주소(URL) 페이지의 간단..

Stacking Order(쌓임 순서), Stacking Context(쌓임 맥락)

흥미로운 문제 Red Green Blue .red, .green, .blue { position: absolute; } .red { background: red; z-index: 1; } .green { background: green; } .blue { background: blue; } See the Pen Stacking Order (problem) by Philip Walton (@philipwalton) on CodePen. 위 붉은색 영역을 파랑과 초록 영역 밑으로 가게 하세요. 단 조건이 있습니다. HTML 마크업을 건드려선 안된다. 어떤 요소에도 z-index를 추가하거나 변경해선 안된다. 어떤 요소의 position 속성도 추가하거나 변경해선 안된다. 만약 성공하신다면 아마 쌓임 순서와 ..

HTML 공백 처리 방법

문제 상황 다음 두개의 코드가 있었다. Content .box::before { content: "앞!"; } Content .box::before { content: "앞!"; } HTML 형식만 다른데 공백의 유무가 차이가 있었다. 왜 그런지 이유가 궁금해서 이 글을 쓰게 됐다. 문제 원인 왜 이러한 공백 차이가 나타나게 된 것일까? 그 이유는 HTML 공백 처리규칙을 적용했을 때 공백이 남게되는 유무의 차이였다. 한번 개행, 탭 , 스페이스가 처리되는 과정을 살펴보자. 궁금한 코드 왜 공백이 생기는지 궁금한 코드는 다음과 같다. Content 여기서 탭, 개행, 스페이스는 다음 특수문자로 표시한다. ⇥ 은 탭 , ◦ 은 스페이스, ⏎ 는 엔터를 의미합니다. 또한 여기에 가상요소까지 붙는다면 다음과 ..

유니코드란 무엇일까? (UTF-8과 EUC-KR 비교)

https://norux.me/31 유니코드란 무엇일까? (UTF8과 EUC-KR 비교) 유니코드란 무엇일까? (UTF8과 EUC-KR 비교) 유니코드는 다국어를 지원하는 프로그래밍을 하다보면 가장 먼저 접하는 어려움이다. 일단 유니코드라는 용어의 개념부터 정리해보도록 하자. 조금 공 norux.me 위 글을 읽고 공부한 내용입니다. 유니코드란? 숫자와 글자, 즉 키와 값이 1:1 로 매핑된 형태의 코드입니다. 다시말하자면, 아스키코드로 0x41 = A 로 매핑된 것 처럼, 아스키코드로 표현할 수 없는 문자들을 유니코드라는 이름 아래 전 세계의 모든 문자를 특정 숫자(키)와 1:1 로 매핑한 것입니다. 유니코드 블록 U+ 라는 접두어가 붙어있으면 유니코드 라는 의미입니다. 아스키코드의 0x41은 대문자 ..