네이버 연관 채널이란?네이버에서 사이트를 검색하면 사이트가 나오고,그 아래 '연관 채널' 이라고 불리는 sns 등 연관있는 사이트가 링크들이 등장한다. 네이버 연관 채널 노출하는 방법은schema.org의 마크업 방식으로 사이트에 코드를 삽입을 하면 네이버 연관 채널 노출을 위한 준비가 끝난다. 다만, 이렇게 코드를 삽입한다고 반드시 노출되는 것은 아니라고 한다.네이버 자체 기준으로 자동으로 정한다고 하니 언제 노출이 될지 모른다.즉, 연관채널이 반드시 노출될 보장은 없다. 연관 채널 등록하기네이버 웹마스터 가이드 사이트에 아래처럼 예시 코드가 있다.사이트 연관 채널 마크업schema.org에서 정의한 Person 혹은 Organization을 사용하며 아래와 같은 속성값을 지정해야 합니다.name : ..

유튜브 iframe 가져와서 일반 영상처럼 나오게 하기보통 첫 main 페이지에는 영상으로 한 화면을 가득 채우는 UI로 디자인을 하게 되는데  이 때, 제공받은 동영상 파일을 넣는 경우가 대부분이었다. 그런데 한 번은 고객사에서 영상을 파일로 재생하지 않고, 유튜브에 올린 영상을 보여줄 수 있냐는 문의가 들어왔다. 해 본적이 없어서 일단 구글링을 시작.. '유튜브 iframe 컨트롤바 숨기기' 등으로 검색을 해보면,  가져온 iframe에 속성과 값을 설정해주면 아래쪽 컨트롤 ui를 일부 없앨 수 있다는 것을 알 수 있었지만  위쪽 바와 다른 기타 컨트롤 요소는 없앨 수가 없었다. 그 외 다양한 방법들을 제시한 글들도 많이 있었지만 오래전에 쓰인 글이여서 그런지 적용해봐도 현재시점에서는 전부 다 없앨 ..

카카오 인앱 브라우저 회피하여 외부 브라우저에서 띄우기크로스 브라우징에 대응하고 있는 웹 브라우저로서  대표적인 4개의 브라우저 chrome, safari, firefox, ie 만 신경쓰면 되는 줄 알았지만... 여러 프로젝트들을 진행하면서 생각보다 더 많은 브라우저에  대응해야하는 경우가 있다는 것을 알았습니다. 예를 들어 whale브라우저나 카카오 인앱 브라우저, 라인 인앱 브라우저...등 문제는 현실적으로 이 모든 '그 외 브라우저'들에 대응한다는 것은 매우 어렵다는 것입니다. 모든 브라우저에서 같은 웹 표준을 같은 수준을 구현하고 있지 않고,  각자의 브라우저에서만 독자적인 기능과 동작을 하고 있는 경우가 있기 때문입니다. 특히, 인앱 브라우저들. 대표적으로 카카오톡과 라인 인앱 브라우저는  다..

많이 사용하게 되는 seo 및 ui 관련 html 태그들 정리웹 프로젝트들을 진행하면서 어렴풋이 많이 봐왔기에 익숙하지만,정확히 모르고 어떤 메타 태그들을 사용 해야할 지에 대해서진지하게 고민해 본적은 없는 것 같아서 이번에 정리를 해보았습니다. link rel="apple-touch-icon"설명애플 기기(iOS 및 iPadOS)의 홈 화면에서 웹 앱의 아이콘으로 사용됩니다. 즉, 애플 기기에서 웹 페이지를 북마크하거나 홈 화면에 추가할 때 표시되는 아이콘입니다.브라우저는 적절한 크기를 자동으로 선택합니다.참고rel속성 값에 'apple-touch-icon' 대신 'apple-touch-icon-precomposed' 를 사용하면 아이폰의 아이콘 기본형태(둥근모서리)를 사용하지 않습니다.사이즈 별로 여..

video 태그의 disablePictureInPicture과 playsinline- 웹 페이지에 배경으로 들어가는 영상을 넣었는데, 2개의 이슈가 발생했다. 1. disablePictureInPicturedisablePictureInPicture 속성을 video 태그에 사용하면 PIP모드 버튼이 생기지 않는다. - 웹 페이지에 영상을 삽입하면 PIP(Picture-in-Picture)모드 버튼이 생김.- Edge에서 배경으로 들어가는 영상에 마우스를 호버하면 위처럼 PIP 모드 버튼이 생긴다.- 크롬과 웨일에서는 나오지 않는데, Edge에서만 발생함.- disablePictureInPicture 속성을 video 태그에 사용하면 Edge 브라우저에서 위처럼 마우스를 호버해도 PIP모드 버튼이 생기지 ..

# 시각적으로 숨기고 접근성 유지하기 아래 css를 코드를 숨기고 싶은 엘리먼트의 class에 적용하면 됨. naver 페이지에서 사용하고 있는 css코드 .blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden; } 또 다른 css 코드 .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: n..