[css] background: none vs transparent의 차이

🏃 이번시간에는 background: none과 background: transparent의 차이에 대해 알아보자

1. 배경색을 없애는 방법

• 배경색이 지정된 요소에 대해 특정 경우에 배경을 없애야 할 때가 있다.
• 예를 들어 버튼의 배경색이 빨강이었다가 hover시 배경색을 없애거나, 라이브러리 사용시 해당 라이브러리에서 지정한 배경색이 필요치 않는 경우일 것이다.
• 이처럼 background의 색상을 없앨 때 우리는 none(없애기), transparent(투명)을 사용할 수 있다.

🤔 그런데 background에 none을 지정하는 것과 transparent을 지정하는 것과의 차이는 뭘까?

2. none과 transparent의 차이

• none과 transparent의 차이를 알기 위해서는 우리는 background에 들어가는 값을 알아야 한다.
• 사실 background은 아래 속성을 한 번에 쓰는 방법이다.

background-color
background-image
background-repeat
background-attachment
background-position
background-size

• 한 줄로 쓰면 아래와 같으며, 이 중 position, size는 배경이미지(img)를 지정했을 때 사용된다.

background: color image repeat attachment position / size;

❓ 그런데 background의 속성 순서로 background: none 이랑 무슨 관계가 있는걸까?

• none이라는 값은 background-image에 들어가는 값이다.
• 그러니까 background: none이라고 지정한 값을 풀면 아래와 같다는 말이다.

background-color: initial;
background-image: none;         /* this */
background-repeat: initial; 
background-attachment: initial;
background-position: initial;

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.

• transparent는 background-color에 쓰이는 값이다.
• background: transparent을 풀어쓰면 아래와 같다.

background-color: transparent;  /* this */
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.

☝ 이렇게 두 값을 풀어보면, background-color이냐 background-image냐의 차이이지, 기능상의 큰 차이는 없다!

• 추가적으로 (IE에서는 제공하지 않지만) background: initial을 사용해서 배경색을 없앨 수도 있다. 🙂

background-color: initial;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

See the Pen Untitled by KumJungMin (@kumjungmin) on CodePen.