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

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

[카테캠 선택강의] 헤더와 드롭다운 메뉴

img baseline img { /* img(인라인 요소) 하단에 Baseline 공백을 제거 */ display: block; } 중앙 정렬 정렬을 할때는 보통 flex 를 사용하는데 강의를 보니 내가 잘 사용하지 않지만 많이 쓰이는 방법을 설명해주셔서 기록한다. 만약 위와 같은 레이아웃을 잡아야한다면 어떻게 했을까? 다음과 같이 flex 를 사용했을 것이다. HTML CSS .outer { display: flex; align-items: center; width: 400px; height: 250px; background-color: royalblue; } .inner { width: 100px; height: 100px; background-color: orange; } 솔직히 뭐가 좋다의 영역..

[카테캠 4주차] 오버워치 캐릭터 선택 예제

lang="ko" 의 의미 margin 을 사용한 중앙 정렬 레이아웃 잡을때 max-width 로 잡는게 반응형 대응하기 더 편한 것 같다. width 로 css 를 주면 잘려버리기 때문이다. width 값이 있는 요소에 margin: 0 auto 를 주게 되면 중앙 정렬이 된다. .heroes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; max-width: 700px; margin: 0 auto; } 캐릭터 image 다음처럼 url 함수를 사용하여 캐릭터 이미지를 넣어주었을 때 이미지가 나오지 않는 경우에는 어떻게 해야할까. .hero:nth-child(1) .image { background-image: url("htt..

[카테캠 4주차] CSS 속성

투명도 opacity의 정수 0은 생략이 가능하다. Q) opacity 속성의 기본값은? 1 글꼴 font-style font-weight font-size line-height 와우~ line-height 에 다음처럼 2 또는 200%로 지정하면 자동으로 font-size 에 맞춰 2배수로 line-height 가 할당된다. 이때 까지 나는 아래 예시처럼 line-height 에 px 를 명시했는데, 이제는 배수를 사용해야겠다. 아래 예시를 보면 line-height 가 32px로 할당 되어있고 글씨는 그 중앙에 위치하는 것을 알 수 있다. 따라서 글씨는 line-height의 중앙에 배치된다. font-family 글씨체는 font-family 속성으로 변경한다. 글꼴계열은 내장되어있는 글꼴을 명시해..

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 속성도 추가하거나 변경해선 안된다. 만약 성공하신다면 아마 쌓임 순서와 ..

[백준/JS] 10775 공항

문제 접근 문제링크: https://www.acmicpc.net/problem/10775 10775번: 공항 예제 1 : [2][?][?][1] 형태로 도킹시킬 수 있다. 3번째 비행기는 도킹시킬 수 없다. 예제 2 : [1][2][3][?] 형태로 도킹 시킬 수 있고, 4번째 비행기는 절대 도킹 시킬 수 없어서 이후 추가적인 도킹은 불 www.acmicpc.net 유니온 파인드 문제이다. 알고 풀었는데도 못풀었다. 문제에 그리디가 섞여있는데 그리디 적인 발상을 하지 못했다. 비행기를 해당되는 게이트에 우선적으로 넣고 그 게이트가 차있다면 -1 인 게이트에 넣는다. 라는 그리디적인 발상말이다. 엌엌 🥹 문제 풀이 1. Find 한 비행기의 Root 가 0 이면 break 아니라면 2번을 수행한다. 2. ..

[백준/JS] 4195 친구 네트워크

문제링크: https://www.acmicpc.net/problem/4195 4195번: 친구 네트워크 첫째 줄에 테스트 케이스의 개수가 주어진다. 각 테스트 케이스의 첫째 줄에는 친구 관계의 수 F가 주어지며, 이 값은 100,000을 넘지 않는다. 다음 F개의 줄에는 친구 관계가 생긴 순서대로 주어진 www.acmicpc.net 유니온 파인드 문제이다. 문제 종류를 알고 풀었는데도 쉽지 않아 해설을 보았다. 1. parent 배열과 relation 배열을 선언한다. 1-1. parent 배열은 기존의 유니온 파인드 방식처럼, 배열[index] = index 로 초기화한다. 1-2. relation 배열은 유니온 될때 서로의 친구관계의 수를 합하기 위해 선언된다. 모두 1로 초기화한다. 1-3. 배열의..

DSU(Disjoint Set Union) / Union Find

Disjoint Set Union Disjoint Set(서로소 집합)이란 서로 공통된 원소가 없는 집합을 말합니다. 보통 Union Find 라고 불립니다. Union 2개의 집합을 1개의 집합으로 합치는 방식입니다. 기본적으로 높이 가 작은 쪽을 큰 쪽으로 합칩니다. 유니온 바이 랭크(Union by rank) 두개의 disjoint set 을 합칠 때 항상 작은 쪽을 큰 쪽에 합칩니다. Find 어떤 element가 주어질때, 이 element 가 속해져 있는 루트 를 반환합니다. 아래 예시에서는 3 이라는 원소를 Find 하게 되면 루트인 6이 나오게 됩니다. 경로 압축 경로 압축은 Find 의 시간 복잡도를 개선하기 위해 원소를 Find 할 경우 바로 루트원소가 나올 수 있도록 하는 방법입니다...

[백준/JS] 런타임 에러 (EACCES)

문제 상황 백준 1717번 문제를 풀고 있었다. 로직을 다 짜고 제출했는데 런타임 에러를 만나게 되었다. 문제 원인 입력에 관한 오류였다. fs 모듈을 사용하고 있는데, JS 같은 경우 간간히 fs 모듈로는 입력을 다 받을 수 없는 경우가 존재하는 것 같다. const fs = require("fs"); BOJkey = false; const input = fs .readFileSync(BOJkey ? "./ehddud1006/BOJ/1717/input.txt" : "./dev/stdin") .toString() .trim() .split("\n") .map((item) => item.split(" ").map(Number)) .reverse(); 해결 방법 JS 로 백준 문제를 풀때 사용할 수 있는 입..

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 를 사용하여 문제를 해결하였다. 이러한 해결방법을 찾기위해 여러 방법을 시도해보았고 그 중에 하..