archuive

caniuse.com 에서 Flex를 검색하면 아래와 같은 내용을 확인할 수 있다. 거의 대부분의 브라우저에서 지원 가능하고 심지어 IE도 10과 11에서 부분 지원 되고 있다! 그치만... Notes 탭의 4번 항목을 보면 아래와 같은 말이 써있다. Partial support is due to large amount of bugs present (see known issues) 엄청난 양의 버그가 있어서 부분적으로 지원한다는 멘트. Known issues탭을 확인 해보면 이미 알려진 이슈들을 확인할 수 있다. Safari 10 이하 버전에서는 min/max width/height 선언을 사용하여 플렉스 아이템을 렌더링 하지만 멀티 라인 플렉스 컨테이너의 한 줄에 있어야 하는 항목 수를 계산할 때는 이..

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

word-break /* 키워드 값 */ word-break: normal; word-break: break-all; word-break: keep-all; word-break: break-word; /* 사용 안함 */ /* 전역 값 */ word-break: inherit; word-break: initial; word-break: unset; normal 기본 줄 바꿈 규칙을 사용합니다. break-all 오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외) keep-all 한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는normal과 동일합니다. break-word👎 실제 overflow-wrap속성에..

테마 수정하는 방법 제공된 테마 중 하나를 사용. CSS 수정으로 간단하게 원하는 부분을 수정한다 테마 매개변수 및 CSS를 사용하여 제공된 테마를 재정의. 이를 위해서는 Sass 파일을 빌드하도록 프로젝트를 구성해야한다. 모양, 느낌, 색상, 패딩 및 테두리와 같은 요소를 변경할 수 있다 기본 테마를 확장하여 처음부터 자신만의 테마를 만든다. 제공된 테마와 크게 다르게 보이는 경우에 적합한 옵션 3번 방법을 활용해 제공된 테마를 확장한 다음, 완전히 다른 디자인을 만들기 위해 광범위하게 수정하면 몇가지 문제가 발생할 수 있다. 제공된 테마에 원하지 않는 디자인 요소가 표함된 경우 CSS 규칙을 추가하여 제거해야한다 릴리즈 버전간, 세부사항 중 일부가 변경되어 재선언한 스타일이 적용되지 않을 수 있다. ..

디자인 시스템에서 정의한 타이포그라피 규칙을 코드화해 편리하게 사용하고 싶었다. 타이포그래피 규칙은 font-size, font-weight, line-height, letter-spacing 등 복합적인 속성으로 구성되어 있어 변수만으로는 원하는 구조를 구현하기 힘들어 보였다. 위 타이포 규칙을 하나의 묶음으로 만들어 타이포그라피 규칙 중 이 유형 이라는 의미를 갖는 것이 원하는 형태였다. 방안 1. mixin으로 만들어 @include 로 사용하는 방법 방안 2. function으로 만들기? 1. map과 @function 을 사용하는 방법 map 정의 $typography-size-map: ( "heading-01": 72px, "heading-02": 48px, "heading-03": 32px,..

✏️ 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; } 블록 안에 엘리먼트 배치하기 ..

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