archuive

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

✏️ 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)로 구현하면 페이지..

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

아래 내용은 개인 학습을 위해 Tailwind의 Documentation을 번역한 내용입니다. Tailwind 🔗 Tailwind 바로가기 테마 기능 구현을 위해 테스트 해본 Tailwind Utility-First 미리 강제로 정의해둔 원시 유틸리티 모음으로 복잡한 컴포넌트를 제작합니다. 전통적으로 웹에서 스타일을 설정할 때마다 작성하는 CSS는 아래와 같습니다. ❌ 디자인 변경시 CSS 커스텀을 필요로하는 전통적인 접근방식입니다. ChitChat You have a new message! 테일윈드는 미리 만들어진 클래스를 HTML에 바로 작성하는 것 만으로 엘리먼트를 스타일링할 수 있습니다. ⭕️ 유틸리티 클래스를 사용하면 CSS를 작성하지 않아도 변경된 디자인을 적용할 수 있습니다. ChitChat..

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