archuive

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM 원칙을 CSS에 적용하면 블록을 다른 레벨로 분리할 수 있습니다. 이전 블록을 상속 및 확장하여 보존하면서 다른 재정의 레벨에서 블록에 대한 새로운 외형을 구현할 수 있습니다 블록의 외형을 완전히 재정의할 수 있습니다 새로운 블록을 추가할 수 있습니다 재정의 레벨을 사용하여 범용 CSS 블록 라이브러리를 생성하고, 프로젝트 수준에서 변경할 수 있습니다. 그런 다음 어쎔블리(assembly) 사용하여 원하는 블록 표현만 프로젝트에 포함시킬 수 있습니다. common.blocks/ button/ button.css # Basic CSS implementation of a button desktop.block..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. 코드를 구조화하고 저장하기 위한 기본 원칙이 BEM-style CSS에 적용됩니다 코드는 각각 부분화됩니다. 각 블록과 블록의 선택적 엘리먼트, 모디파이어 로직은 별도의 파일에 정의됩니다 CSS 파일은 BEM 프로젝트의 파일 시스템 구성 규칙에 따라 저장됩니다 코드를 부분화하고 파일 구조를 제어할 때의 장점은 아래와 같습니다. 프로젝트 전체에서 정보 탐색을 단순화합니다 컴포넌트를 재사용하거나 이동시킬 수 있습니다 재정의 레벨로 사용하거나 조합해 사용할 수 있습니다 button/ # Directory of the button _size button_size_s.css # CSS implementation of t..

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. Modifiers BEM 모디파이어는 블록의 외양, 상태, 동작을 정의합니다. 블록 디자인은 모디파이어를 제거하거나 변경함으로써 변경됩니다. ... .button { font-family: Arial, sans-serif; text-align: center; } .button_size_s { font-size: 13px; line-height: 24px; } .button_size_m { font-size: 15px; line-height: 28px; } 모디파이어를 사용하여 필요한 CSS 속성을 재정의하여 블록 디자인을 변경할 수 있습니다. Mixes 코드를 복제하지 않고 여러 엔티티의 동작과 스타일을 결합..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. tag 선택자나 ID 선택자를 사용하지 않습니다. 블록과 엘리먼트의 스타일은 class 선택자로 스타일링합니다. Class 선택자 클래스 선택자는 모든 HTML 엘리먼트에 정의되어있습니다. class 속성은 ... tag와 class를 결합한 선택자 BEM 방법론은 선택자에 tag와 class를 결합하는것을 권장하지 않습니다 (예를들어 button.button) 이는 CSS 명시도를 올려 재정의가 더욱 어렵게 만듭니다. HTML: ... button.button 선택자에 CSS를 정의한경우 button_active 모디파이어를 클래스 선택자로 재정의했을 때 제대로 동작하지 않습니다. button.button_a..

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. 전통적으로 HTML wrapper를 사용하는 이유는 아래와 같습니다. HTML 엘리먼트를 다른 엘리먼트에 배치하기 위해 엘리먼트를 섹션 안에 배치하기 위해 BEM 방법론은 mix를 사용하거나 추가 블록 엘리먼트를 생성해 동일한 결과를 달성합니다. 특정한 기능이 없는 불필요하고 추상적인 wrapper를 만들 필요가 없습니다. 다른 블록 기준으로 블록 배치하기 다른 블록 기준으로 블록을 배치하려면 mix 를 사용하는것이 가장 좋습니다. HTML: ... ... CSS: .page__header { padding: 20px; } .page__footer { padding: 50px; } 블록 안에 엘리먼트 배치하기 ..

웹 접근성이 제대로 지켜졌는지 테스트할 수 있는 다양한 도구들을 안내한다. Colour Contrast Analyser (CCA) 다운로드 사이트 바로가기 스포이드로 찍어서 전경 색과 배경색의 명도 대비를 체크해주는 프로그램 명도 대비는 확대 가능한 브라우저에서 최소 3:1 이상이 되도록 구현 KWCAG a11y inspector 크롬 웹스토어 바로가기 컨트롤의 대각선 길이를 측정해주는 프로그램 크롬 웹 스토어에서 설치 가능 웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현 OpenWAX 크롬 웹스토어 바로가기 접근성을 자동으로 진단해주는 프로그램 크롬 웹 스토어에서 설치 가능 자동 진단이 정확하지는 않아 수동 진단 병행 필요 Accessibility Insights for Web 크롬 웹스토어 바로가..

Korean Web Content Accessibility Guidelines 2.1 공식 문서 출처: www.wah.or.kr:444/Participation/guide.asp 📖 참고 자료: 네이버 널리 edwith 웹 접근성의 이해 강의

✏️ BEM을 익히기 위해BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM 엔티티의 이름은 고유합니다. 동일한 BEM 엔티티는 모든 기술(CSS, JavaScript, HTML)에서 항상 이름이 동일합니다. 네이밍 컨벤션의 주요 목적은 개발자에게 가능한한 의미 있는 정보를 전달하기 위함입니다. 각기 다른 방식으로 작성된 CSS 선택자의 이름입니다. menuitemvisible menu-item-visible menuItemVisible 이름을 이해하기 위해서 각 단어를 주의깊게 읽어야합니다. 마지막 두개의 예시는 각 단어가 명확하게 나뉘어있습니다. 하지만 menu 가 블럭이고 item 이 엘리먼트, visible 이 모디파이어라는 것을 이해하도록 도와주지는 못합니다. BEM 엔..

✏️ 보험 가입 하기 전에 이 영상을 봤어야 했는데... 마치 소 잃고 외양간 고치는 심정으로 공부 해 보는 보험 관련 정보 추천 보험실손 보험정기 보험암 보험운전자 보험 (옵션)비추천 보험저축성 보험보험은 한번 가입하면 장기(20년)로 끌고 가게 된다. 만기시 납입 금액을 돌려주고 거기에 추가적으로 이자와 질병에 대한 보장을 담보하기 때문에 혹하기 쉽지만, 납입 금액이 인플레 방어가 안된다는 문제가 제일 크리티컬 하다.예시 1990년에 총 4000만원 납입시 4500을 환급해주는 저축성 보험에 가입했다고 가정해보자. 1990년~2000년 무렵이면 분당 아파트가 2억원 대 였던 시절이다. 현재 분당 아파트 가격과 비교해보면 돈(자산)의 가치가 완전히 달라졌다는 것을 알 수 있다. 내가 납입하는 돈의 값어..

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. Block 논리적이고 기능적으로 독립된 페이지 컴포넌트이며 웹 컴포넌트와 동일합니다. 블록은 동작(JavaScript), 템플릿, 스타일(CSS), 기타 구현 기술을 캡슐화합니다. 블록이 독립적일 경우 블록의 재사용은 물론 프로젝트 개발 및 지원 프로세스를 용이하게 할 수 있습니다. Block 특징 중첩 구조 블록은 다른 블록 내부에 중첩될 수 있습니다. 예를들어 head 블록은 로고(logo), 검색 폼 (search), 권한(auth) 블록을 포함할 수 있습니다. 유연한 배치 블록은 페이지에서 이동하거나 페이지 또는 프로젝트간에 이동이 가능합니다. 블록을 독립적인 엔터티(entities)로 구현하면 페이지..