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

메타 태그 메타 태그는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 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 속성도 추가하거나 변경해선 안된다. 만약 성공하신다면 아마 쌓임 순서와 ..

display: none에 transition이 적용되지 않는 이유 그리고 접근성 트리, 렌더링 트리

문제 상황 2023.04.30 - [카카오 테크 캠퍼스/HTML CSS JS Advanced] - [카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정 [카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정 문제 상황 문제 상황은 다음과 같다. 검색 input안의 아이콘을 연속클릭하면 검색창이 왔다 갔다한다. 문제 원인 HTML, CSS, JS 의 코드는 다음과 같다. HTML search header .sub-menu .search input { ... /* transition ehddud100677.tistory.com 위 글에서 문제를 해결하기 위해 visibility:hidden 를 사용하여 문제를 해결하였다. 이러한 해결방법을 찾기위해 여러 방법을 시도해보았고 그 중에 하..

HTML 공백 처리 방법

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

자바스크립트 엔진의 최적화 기법

JavaScript는 인터프리터 언어로 알려져있습니다. 최근 대부분의 모던 자바스크립트 엔진(크롬의 V8, 마이크로 소프트 엣지의 ChaKra 등)은 인터프리터와 컴파일러의 장점을 결합해 비교적 처리 속도가 느린 인터프리터의 단점을 해결하였습니다. 이러한 방식을 Adaptive JIT Compilation 이라고 하는데, 이러한 엔진을 사용하게 된 흐름을 이해하려면 컴파일러, 인터프리터 , JITC 에 대해 알 필요가 있습니다. 컴파일러특징코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신 코드(CPU가 바로 실행할 수 있는 기계어)로 변환한 후 실행합니다.실행 파일을 생성합니다.컴파일 단계와 실행 단계가 분리되어 있습니다. 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행합..

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

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

자바스크립트 이벤트 루프

비동기 프로그래밍 함수가 호출되면 함수 코드가 평가됩니다. 이때 실행 컨텍스트가 생성 됩니다. 생성된 실행 컨텍스트는 호출 스택에 푸쉬되고 함수 코드가 실행됩니다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 실행 컨텍스트 스택에서 팝 되어 제거됩니다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는 동시에 2개 이상의 함수를 실행할 수 없다는 것을 의미합니다. 실행 컨텍스트 스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 대기중인 태스크 들입니다. 자바스크립트 엔진은 싱글 스레드 방식으로 동작합니다. 싱글 스레드 방식은 한 번에 하나의 태스크만 실행할 수 있기 때문에 처리에 시간이 걸리는 태스크를 실행하는 경우 블로킹이 발생합니다. 현재 실행 중인 태..

[Flex] 일분코딩

https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com 위 강의자료를 보면서 다시 한번 상기시키면 좋을만한 내용을 메모합니다. inline-flex inline-flex 라는게 있었네요. 몰라서 사용을 못했던 것 같습니다. flex 를 사용하면 화면에 가로축을 모두 차지하게 되는데, inline-fliex 를 사용하면 element의 크기만큼 으로 container 가 줄어들기 때문에 빈 공간에 다른 element 가 올 수 있게 ..