archuive

✏️ 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..

작성한 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..

"" : 반드시 포함시킬 단어/문장 지정 - : 검색할 때 불필요한 단어를 제외할 수 있다 포인트는 띄어쓰기 주의! 과일 -사과 와 같이 - 기호와 단어 사이에 공간이 없어야한다 ~ : 비슷한 단어를 검색해준다 define: : 사전 의미를 알고 싶을때 접두사를 사용한다 * : 잘 기억나지 않는 중간에 넣어서 검색 (e.g 뉴턴*법칙) or : 두 단어 동시 검색

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

JavaScript는 문법의 대부분을 Java와 C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았다. JavaScript는 대소문자를 구별하며 유니코드 문자셋을 이용한다. 따라서 다음과 같은 코드도 유효하다. var 갑을 = "병정"; var Früh = "foobar"; // Früh: 독일어로 "이른" 하지만 대소문자를 구분하기 때문에 Früh는 früh와 다르다. JavaScript에서는 명령을 명령문(statement)이라고 부르며, 세미콜론(;)으로 구분한다. 명령문이 한 줄을 다 차지할 경우에는 세미콜론이 필요하지 않다. 그러나 한 줄에 두 개 이상의 명령문이 필요하다면 세미콜론으로 구분해야 한다. ECMAScript는 세미콜론을 자동으로 삽입해 명령문을 끝내는..

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

Cmd + \: 창 분할하기 Cmd + B: 사이드바 토글 Cmd + J: 하단 패널 토글 Cmd + P: Quick Open Cmd + Shift + T: Re Open Cmd + Shift + K: 한줄 삭제 Cmd + Shift + F: 워크스페이스 전체 검색하기 Cmd + Shift + H: 워크스페이스 전체 검색하여 대치하기 Cmd + Option + R: 문서내에서 검색하여 대치하기 📖 참고 자료 Key Bindings for Visual Studio Code Visual Studio Code tutorial

MacOS를 사용하며 터미널로 작업할 때 자주 사용하는 유용한 단축어들을 정리해본다. # 화면 분할 - `Cmd + D` 좌우 분할 - `Cmd + Shift + D` 상하 할 - `Cmd + Alt + 화살표`: 화면 이동 # 입력 - `Cmd + Alt + i` 현재 탭의 분할된 모든 화면 동시 입력 - `Cmd + Alt + Shift + i` 위 모드 해제