Posis

제목 태그 제목 태그는 h1부터 h6까지 존재합니다. h1 태그가 가장 중요한 제목을 써야 할 때 사용하고 숫자가 높아질수록 덜 중요한 순서입니다. 따라서 h6은 가장 중요하지 않은 제목 태그입니다. 제목1 제목2 제목3 제목4 제목5 제목6 문단 태그 웹 페이지에 글을 작성할 때 사용하는 태그입니다. HTML CSS 자바스크립트 줄 웹 페이지에 줄을 넣고 싶을때 사용하는 태그입니다. HTML CSS 자바스크립트 주석 코드 상에서는 존재하지만 웹 페이지에서는 보이지 않게 하기 위한 태그입니다. 설명이나 잠시 제거하고 확인할 때 사용합니다. HTML 자바스크립트

이번 포스팅에서는 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..