archuive

마크다운으로 작성한 링크를 새 창으로 여는 방법은 아주 간단하다. 일반적인 HTML을 작성할 때 사용하는 target="_blank" 구문을 이용하면 쉽게 해결할 수 있다. HTML 링크는 위와 같은 문법으로 작성한다면, 마크다운의 경우 아래와 같이 작성할 수 있다. [새 탭에서 열기](https://www.google.com/){:target="_blank"} 그러나, 대부분의 편집 툴에서 {:target="\_blank"} 구문이 적용되지 않는 현상이 발견되었다. 이런 경우 기본적인 HTML 문법을 사용해 링크를 거는것으로 대체할 수 있다. 새 탭에서 열기 예제 현재 탭에서 열기 새 탭에서 열기

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 엔..

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