Posis

class 선택자 요소의 특정 부분에만 스타일 적용 마침표(.) 다음에 클래스 이름 지정 문서 안에서 여러 번 반복해서 사용할 수 있음, 중복 가능 id 선택자 요소의 특정 부분에만 스타일 적용 파운드(#) 다음에 id 이름 지정 문서 안에서 한번만 사용할 수 있음, 중복 불가 스타일 충동을 막는(Cascading)의 원칙 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고 그 우선순위에 따라 위에서 아래로 스타일 적용 스타일 상속: 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달 Style 우선순위(높은 순서부터 작성) !important: 어떤 스타일보다 우선 적용되는 스타일 인라인 스타일: 해당 태그에만 적용되는 스타일 id 스타일: 문서..

이번 포스팅에서는 Bootstrap에 Floating Label을 직접 만들어 보겠습니다. Floating Label 위 GIF는 Bootstrap 5.0v의 Forms - Floating labels의 예시입니다. 위와 같이 똑같이 만들지는 못하지만 비슷하게 만들어 보겠습니다. HTML Our Newsletter Full Name Email Address CSS *{ margin: 0; padding: 0; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { position: relative; padding: 70px 40px; background: #fff; borde..

이번 포스팅에서는 이벤트 버블링과 캡쳐링에 대해서 다뤄보겠습니다. 이벤트 버블링(Bubbling) 버블링이란 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 계속해서 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작하는 것을 말합니다. See the Pen Untitled by MinJaeHong (@jaehong94) on CodePen. 위에 예시를 클릭해보면 P 상자를 클릭할 경우: P -> DIV -> FORM -> Body -> HTML 순으로 알림 창이 뜨는 것을 확인할 수 있습니다. DIV 상자를 클릭할 경우는 DIV 부터 HTML 순으로 알림 창이 뜹니다. 이러한 현상, 클릭한 요소에서 최..

이번 포스트에서는 Vue.js에 조건부 렌더링, v-if와 v-show에 대해서 알아보겠습니다. v-if v-if 디렉티브는 조건에 따라 블록을 렌더링 할 때 사용합니다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 됩니다. Click Hello Vue.js!! isShow는 true이고 Click 버튼을 클릭하면 true와 false가 매번 바뀌는 예제입니다. 첫 화면에는 isShow가 true이기 때문에 DOM에 나왔고 클릭 후에는 h1태그가 으로 변환됩니다. v-else v-if에서 조건이 맞지 않는다면 v-else가 있는 태그가 DOM에 표시됩니다. Click Hello Vue.js!! Goodbye Vue.js!! // 생략 isShow가 true일 때 'Hello Vue.js!..

클래스와 스타일 바인딩 데이터 바인딩의 일반적인 요구사항은 엘리먼트의 클래스 목록과 인라인 스타일을 조작하는 것입니다. 클래스와 스타일 모두 속성이므로, v-bind를 사용하여 처리할 수 있습니다. 사용방법 Hello Vue.js!(isActive = {{ isActive }}) Hello Vue.js!(isActive = {{ isActive }}) class를 사용해 style을 넣을 때 보통은 class = 'style'의 형식으로 작성합니다. Vue.js에서는 v-bind:class(약어 -> :class)를 활용해서 객체를 전달하여 클래스를 동적으로 전환할 수 있습니다. 위 코드는 active 클래스는 isActive의 진실성에 의해 결정되는 구문입니다. isActive의 값이 처음에는 fals..