웹(HTML, CSS, JS)(07.31) - linear-gradient(), BEM 방식

linear-gradient()

• linear-gradient()는 두 개 이상의 색상이 직선을 따라 점진적으로 변화되는 선형 그라데이션 그림을 생성한다.

background-image: linear-gradient(to bottom, #000, #fff);

• gradient()는 image 데이터 유형에 속하기 때문에, image가 사용되는 곳에만 쓰일 수 있다. 그렇기에 linear-gradient()는 background-color 속성이나 color 데이터 유형을 사용하는 다른 속성에는 적용할 수 없다.

---

 

BEM 방식

• BEM은 Block, Element, Modifier를 뜻한다. 그리고 각각 __, --로 구분한다.

 <nav class="top-bar__menu-box-1">

위 코드에서 top-bar은 Block, menu는 Element

어떤 목적인가에 따라 이름을 짓는다.

1. Block

• 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 부른다.
• 독립적인 형태

2. Element

• element는 블럭을 구성하는 단위이다.
• 의존적인 형태

3. Modifier

• block이나 element의 속성을 담당한다. 다르게 동작하는 블럭이나 엘리먼트를 만들 때 사용하면 된다.