Emmet은 HTML과 CSS를 빠르게 작성할 수 있게 도와주는 문법으로, 주로 코드 편집기에서 플러그인 형태로 사용됩니다. Emmet은 간단한 약어를 입력하면 이를 확장해 완성된 코드를 생성해줍니다. 아래에 Emmet 문법의 주요 예제와 사용법을 설명해드릴게요. 기본 개념 Emmet은 태그 이름, 속성, 계층 구조 등을 간단한 문법으로 표현합니다....

CSS에서 요소를 선택하는 방법은 여러 가지가 있으며, 대표적으로 태그 선택자(Tag Selector), 클래스 선택자(Class Selector), 아이디 선택자(ID Selector) 가 있습니다. 이들의 상관관계와 계층 구조(hierarchy)에 대해 정리해보겠습니다. 1. CSS 선택자의 기본 개념 (1) 태그 선택자 (Tag Selec...

BEM(Block, Element, Modifier) 방법론은 CSS 클래스 네이밍 규칙을 체계적으로 관리하기 위한 방법론입니다. 유지보수성과 재사용성을 높이기 위해 등장했으며, 주로 대규모 웹 애플리케이션에서 사용됩니다. ⸻ BEM 구조 BEM은 다음과 같은 세 가지 개념으로 구성됩니다. 1) Block (블록) 독립적으로 존재할 수...

title: 6장 스타일 적용 6장 스타일 적용 6.1 HTML의 스타일 적용 예시: <style> .red { color: red; } </style> <p class="red">빨간 글씨</p> CSS로 스타일을 정의 style setup 안에 존재 6.2 인라인 스타일 예...

title: 5장 이벤트 처리 5장 이벤트 처리 5.1 이벤트 개요 예시: <button @click="alert('클릭됨!')">클릭</button> 클릭 할 경우 alert 이벤트를 발생함. 5.2 인라인 이벤트 처리 예시: <button @click="count = count + 1"&g...

title: 4장 Vue 인스턴스 4장 Vue 인스턴스 4.1 Vue 인스턴스 개요 코드 예시: <template> <div></div> </template> <script> const app = new Vue({ el: '#app', data: { greeting...

title: Vue.js 기초 3.2 기본 디렉티브 3.2.1 v-text, v-html 디렉티브 v-text –> text로 출력 흔히 사용하는 형식으로 사용 <div id="app"> <p v-html="message"></p> </div> <script> new Vue(...