맨 땅에 프론트엔드 개발자 되기

BEM CSS 는 Cascading Style Sheet 의 약자다. Cascading 의 뜻을 검색해보면 '폭포수처럼 흘러내리는' 이라는 뜻이 나온다. 이것은 CSS가 부모에서부터 자식으로 폭포수처럼 상속되어 적용된다는 뜻을 가지고 있다. 그래서 CSS를 작성할 때는 이 상속관계에 대해서 잘 알고있어야 현재 Element에서 어떤 속성이 적용되고 있는지 알 수 있다. 이러한 CSS 작성 규칙을 예측 가능하게 잘 해보자는 의미에서 나온 방법론이 바로 BEM 이다. BEM은 CSS 작성을 할 때 필요한 Class 명을 어떻게 지을 것인가에 대한 방법론이다. Depth가 별로 깊지 않은 프로젝트에서라면 아무렇게나 클래스 명을 지어도 상관없지만 프로젝트의 규모가 커지고 Depth가 깊어질 수록 클래스 명을 중..

웹브라우저에서 내가 만든 웹페이지의 글 내용을 드래그 못 하게 하는 방법. 간단하게 CSS로 처리할 수 있다. body { -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } 브라우저 별로 다 막아준다. 일부 영역에서는 드래그를 허용하고 싶으면, 위의 코드를 body 영역에 기본으로 넣어주고, 원하는 영역에 아래 코드를 적용한다. .allow-to-drag { -webkit-user-select:all; -moz-user-select:all; -ms-user-select:all; user-select:all } 텍스트만 드래그를 허용하고 싶을 때, .allow-to-drag-text { -webk..

어떤 일정한 크기의 요소가 반복될 때 그 요소의 내용의 길이가 들쭉날쭉이라면, 내용을 말줄임을 해서 크기를 일정하게 유지하고 싶을 때가 있다. 그럴 때 사용할 수 있는 것이 바로 text-overflow: ellipsis; 이다. 적용하기 전 Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique harum impedit sint possimus minus repellendus repellat? Quae delectus expedita quam ea fugiat quidem itaque minima asperiores? Aliquam magnam unde nihil. Explicabo voluptatem maiores dignissimos ..

SASS(SCSS) 색상 내장 함수 SASS(SCSS)에서는 색상과 관련된 내장 함수를 제공하고 있다. 공식문서 https://sass-lang.com/documentation/modules/color Sass: sass:color The hue is a number between 0deg and 360deg (inclusive). The whiteness and blackness are numbers between 0% and 100% (inclusive). The hue may be unitless, but the whiteness and blackness must have unit %. The alpha channel can be specified as either a unit sass-lang.c..

SASS(SCSS) Mixin 과 Include SASS(SCSS)의 편리한 기능 중 하나인 Mixin 기능은 코드의 재사용을 가능하게 해준다. 한 번 작성된 코드로 여러 곳에 같은 코드를 적용시킬 수 있다. 예를 들어, 아래와 같이 코드를 작성해둔다면 어디에서나 이 코드를 불러와 사용할 수 있다. @mixin flex { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: nowrap; } 사용할 때는 아래와 같이 사용한다. .container{ @include flex; } 미리 정해둔 속성에서 불러올 때마다 값만 다르게 하고 싶다면 함수의 매개변수처럼 아래와 같이 mixin 을 만들 수..

간단한 SASS(SCSS) 사용 방법 - Live Sass Complier SASS(SCSS)는 CSS 전처리기(Pre-processor)로 CSS의 사용을 더 편리하게 도와주는 도구다. 웹 브라우저는 자체적으로 SASS를 해석하지 못 하기 때문에 컴파일을 통해 SASS 파일에 작성된 SASS 문법을 CSS 문법으로 작성된 CSS 파일로 변환시켜주는 작업이 필요하다. node.js 환경에서 작동되는 컴파일러를 실행할 수도 있지만 실제 사용환경이나 최신 기술을 고려하지 않고 단순히 만든 SASS 작업의 결과를 가시적으로 확인하고 싶을 땐 VS Code의 Extension 기능인 Live Sass Complier 를 사용할 수 있다. Live Sass Complier 를 설치하고 나면 우측 하단에 Watch..