Posis

SASS/SCSS에서 중첩이란? CSS에서 style을 적용할 때 .container .inner h1 {}과 같은 방식을 사용합니다. 하지만 class들이 많아지고 태그들이 자식의 자식의 자식의....처럼 많아지는 경우가 생깁니다. 그렇게 된다면 .container 자식선택자 자식선택자 자식선택자 자식선택자 {} 점점 길어질수록 가독성은 떨어지면서 자연스럽게 스타일을 수정할 때 원하는 곳에 자리를 찾는것이 힘들어지게 됩니다. 이를 좀 더 수월하게 할 수 있는 방법이 중첩입니다. [예시] /* CSS */ body p { color: blue; } body p strong { font-size: 20px; } body p strong span { font-weight: 500; } 이처럼 태그 중괄호 안..

CSS에는 여러 줄 주석 /* */만 사용할 수 있습니다. 하지만 SASS/SCSS에서는 두 가지의 주석이 존재합니다. 한 줄 주석( // )과 여러 줄 주석( /* */ )이 있습니다. SASS body background-color: #fff color: #000 padding: 10px 20px /* *h1 { * font-size: 20px; *} h2 // font-size: 15px; SCSS SCSS는 코드 블록의 한 줄 주석이 적용되지 않으므로 사진으로 대체했습니다. CSS(컴파일) body { background-color: #fff; color: #000; padding: 10px 20px; /* h1 { font-size: 20px; } */ } 위에 보시는 것처럼 여러 줄 주석은 C..

SASS & SCSS란? SASS이전에 CSS가 있습니다. CSS는 웹을 꾸며줄 때 사용하는 스타일 언어입니다. 하지만 CSS는 태그 안에 태그, 그 태그 안에 태그처럼 중첩되는 태그들이 많아질 때 코드가 점점길어지고 가독성이 떨어지게 됩니다. CSS 는 그 자체로 재미있을 수 있지만 스타일시트는 점점 더 커지고 복잡해지고 유지 관리하기 어려워지고 있습니다. 여기서 전처리기가 도움이 될 수 있습니다. 이 전처리기를 우리는 SASS(SCSS)라고 부릅니다. SASS(SCSS)는 CSS에서 프로그래밍 요소를 추가한 언어라고 생각하면됩니다. for, if문 등등을 활용하여 웹을 꾸밀 수 있습니다. SASS와 SCSS의 차이점은 중괄호( { } )와, 세이콜론(;) 유무 입니다. 간단한 예시 SASS $prim..

.gitignore에 등록했음에도 불구하고 적용이 안될 때 git rm -r --cached . git add . git commit -m "fixed untracked files" 캐시 내용을 전부 삭제하고 다시 All commit을 하면 된다.

JavaScript에서는 꼭 Boolean 값을 쓰지 않고 true & false를 구별할 수 있는 방법이 있습니다. Truthy true 0이 아닌 수 '값' {} [] if (1) console.log('Truthy'); // Truthy if ('true') console.log('Truthy'); // Truthy if ({}) console.log('Truthy'); // Truthy if ([]) console.log('Truthy'); // Truthy Falsy false 0 '' null undefined NaN if (0) console.log('Truthy'); else console.log('Falsy'); // Falsy if ('') console.log('Truthy'); el..

이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript에서는 DOM과 엘리먼트를 직접 조작하기 위해서는 getElementById, getElementsByClassName, querySelector 등등과 같은 메서드를 활용했어야 합니다. 하지만 Vue에서는 Refs를 제공을 해줍니다. 장점 자식 컴포넌트에 직접적으로 접근할 수 있음 DOM조작 메서드 없이 편리하게 엘리먼트를 조작할 수 있음 기본적인 DOM 출력 Hello Vue.js!! Vue의 refs를 활용한 DOM 출력 Hello Vue.js!! 기본적인 DOM 출력의 document.querySelector와 Vue의 refs 출력 this.$refs가 동일한 기능..