BEM이란?BEM은 Block, Element, Modifier의 약어로 얀덱스(Yandex)사가 제창했다.사용자 인터페이스를 독립된 블록으로 분리하여 복잡한 페이지에서도 간단하고 신속하게 개발할 수 있도록 하는 것이 목적.모듈 기반의 방법이다.다른 설계 기법에 비해 엄격하고 강력하다. BEM 기본클래스 셀렉터를 사용해야 한다./* ❌요소형 셀렉터는 사용하지 않는다. */a {}a.button {}/* ✅ 클래스 셀렉터 사용. */.button {}상세도를 높이지 않는다./* ❌ 상세도를 높이지 않는다. */.button.button-theme-caution {}/* ✅ 상세도를 높이지 않음. */.button-theme-caution {}.menu {}.menu__item {}.menu__item--a..

IR기법과 IS기법이전에 퍼블리싱을 공부할 때, 배우고 실무에서도 활용하고 있지만, 글로는 한번도 정리를 해본적이 없어서 이번에 다시 정리하며 제대로 알아보려고 포스팅을 하기로 했다. IR기법과 IS기법은 이미지와 관련된 기법이라는 공통점이 있지만, 서로 큰 관련은 없다. IR기법은 웹 접근성, IS기법은 최적화와 관련이 있다. IR 기법IR 기법(Image Replacement) 의 약자. 이미지 대체 기법.웹에서 텍스트 콘텐츠를 이미지로 대체하여 시각적으로 표현하면서도, HTML 문서 내에 텍스트를 그대로 유지하여 검색엔진 최적화(SEO) 및 접근성을 확보하는 방법.텍스트 설명이 눈에는 보이지 않더라도 스크린 리더기에서는 읽히게끔 만드는 기법.html 요소만으로 시멘틱한 마크업이 어려울 경우 사용하는..

CSS 방법론css 방법론이란?웹 개발에서 CSS를 체계적으로 작성하고 관리하기 위한 설계 방식이나 철학을 의미한다.유지보수성과 확장성을 높이기 위한 목적으로 이러한 방법론이 등장하게 되었다.프로젝트 규모가 커질수록 이러한 방법론의 필요성이 높아진다.쉽게 이야기하면 'CSS 클래스를 명명하는 방법' 이다. CSS 방법론이 필요한 이유1. 스타일 충돌 방지전역에서 .button 같은 이름을 여러 번 쓰면 의도치 않게 스타일이 겹치거나 덮어쓰기가 발생할 수 있음.방법론을 적용하면 클래스 이름이 명확하고 고유해져 충돌을 방지함.2. 유지보수가 쉬움구조화되지 않은 CSS는 어디서 수정해야 할지 알기 어려움.방법론은 컴포넌트 중심으로 설계되어 있어 수정이 필요한 위치를 쉽게 찾고 고칠 수 있음.3. 협업에 유리여..

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

CSS : contain property웹 페이지에서는오래전부터 가로로 스크롤이 생기는 것을 방지하기위해 상위 요소에 overflow: hidden;을 적용해왔다. 예를 들어 예상치 못하게 텍스트 또는 요소가 넘쳐서 화면 밖으로 나가거나화면 밖에서 안으로 들어오거나 안에서 밖으로 나가는 인터랙션이 있을 경우 와 같은 상황에서 화면에 가로 스크롤이 발생한다. 이는 매우 빈번한 상황이다. 간혹 이런 처리가 안되어 있어서 보기 좋지 않게 가로로 스크롤이 가능한 사이트들이 가끔 보이지만, 한편으로는 빈번하게 일어날 수 있는 이런 상황에 비해서는 가로 스크롤이 발생하지 않는 사이트가 대다수인 이유는 꽤 오래전부터 가로 스크롤이 발생하지 않게 하기 위해서 상위 요소에 overflow: hidden;을 적용해 주는 ..

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