archuive

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

✏️ BEM을 익히기 위해 BEM Methology 사이트를 번역하며 학습/정리 한 내용입니다. BEM(Block, Element, Modifier)은 웹 개발에 대한 구성요소 기반 접근법입니다. 그 이면에 있는 아이디어는 사용자 인터페이스를 독립적인 블록으로 나누는 것입니다. 이를 통해 복잡한 UI로도 인터페이스를 쉽고 빠르게 개발할 수 있으며 복사 및 붙여넣기 없이 기존 코드를 재사용할 수 있습니다. Block 재사용할 수 있는, 기능적으로 독립적인 페이지의 컴포넌트입니다. HTML에서 블록은 class 속성으로 표시합니다. 특징 블록의 이름은 상태가 아니라 목적을 묘사합니다. (menu 또는 button / red 또는 big 과 같은 상태가 아님) 블록의 외부 구조(margin)이나 포지셔닝 설정..

작성한 HTML문서가 문법적으로 올바른지 검사 해주는 검사기 역할의 서비스입니다 :D validator.w3.org/ The W3C Markup Validation Service Validate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website. validator.w3.org

가지고 있는 폰트 파일이 ttf 확장자일 경우, 웹폰트로 사용하기 위해 woff, woff2, eot 등으로 변환하는 과정을 정리했습니다. 웹 폰트 다운로드 Google Fonts 사이트에서 원하는 폰트를 선택해 다운로드합니다. 영문, 숫자, 특수 문자 폰트에만 Open Sans를 적용하고 싶었기 때문에 해당하는 서체를 담아봅니다. 오른쪽 아래의 Download all 버튼을 눌러서 다운받은 후 압축을 풀면, 아래와 같이 파일을 확인할 수 있습니다. 이탤릭 서체는 필요 없는데 함께 다운받아집니다. Google Fonts에서 서체 스타일도 선택해서 다운 받을 수 있다면 더 좋겠네요. 필요 없기 때문에 이탤릭 서체는 삭제합니다. 확장자 변환하기 브라우저 지원 브라우저가 지원하는 웹폰트 확장자는 ttf, ot..

IE 크로스브라우징시 레이아웃이 깨지는 현상의 많은 경우가 CSS의 initial 값을 사용했을 때 발생합니다. initial은 부모요소가 주는 모든 상속값을 건너뛰어 CSS 초기값을 되돌리는데 사용할 수 있는 값인데, 하지만! Internet Explorer은 이 값을 지원하지 않습니다. 이를 해결하기 위해 initial대신 속성의 초기값이나, 초기화 혹은 없애는 값을 사용하는것을 권장하며 자주 사용하는 속성의 초기값은 아래에서 확인할 수 있습니다. position: static overflow: visible line-height: normal color: transparent border: none 혹은 0 width, height 등 수치값 은 auto 초기 값이 없는 경우, 가장 가까운 부모로부..

OOCSS(Object Oriented CSS) OOCSS의 목적은 코드 재사용성을 높이고, 궁극적으로는 더 빠르고 효율적이며 유지보수하기 용이한 스타일시트를 만드는 것이다. 결합도 낮추기(decoupling), 단일 책임의 원칙(single responsibility principle), 캡슐화(encapsulation) 를 강조하는 방법론이다. OOCSS는 스타일의 특징(feature)에 따라 범주를 분리하여 구조적으로 선택자들을 적용할 수 있게한다. Separation of structure from skin - 스킨으로부터 구조분리 Separation of containers and content - 컨테이너와 콘텐츠의 분리 SMACSS (Scalable and Modular Architectur..

문제 상황 기존에 잘 보이던 팝업 메뉴의 흰색 화살표가 회색 화살표로 변경됨 (::before, ::after 가상 요소 CSS 로 스타일링 된 화살표) 팝업 메뉴 리스트에 의문의 검은 사각형이 생기는 문제 시도한 것 들 ::before 에 들어간 클래스 때문에 검은 사각형이 발생하는 것 같아 해당 요소를 clip 처리 하거나 display: none; 처리함. 사각형은 사라지지만 화살표가 회색으로 보이는 문제는 해결되지 않았다. 결과물 스타일에서 관련 구문 긁어 보니, CSS에는 .popup::before:lang(en){border-color: #fff trans) 와 같이 스타일이 선언되어 있지만 요소에 제대로 선언되지 않고 있었다. 😨 lang(en) 과 ::before 선택자 순서를 바꿔 보니 ..