[CSS]all , unset , box-shadow , IR기법

 

ALL 속성

 

 CSS 프로퍼티인 ALL은 부모로부터 전달받은 속성이나 현재 자신이 가지고 있는 모든 CSS속성을 제거할 수 있도록 도와줍니다.

 

• initial :  초기값으로 설정됩니다.
• inherit : 부모의 속성 값을 상속받습니다.
• unset : 초기 및 부모의 스타일 속성을 전부 제거합니다.

우리는 css의 초기값 설정을 위해 reset.css 파일을 import 해서 사용하기도 하는데 

그 대신에 all : unset으로 초기 설정을 할 수 있습니다.

 

 

UNSET 속성

 

CSS unset 키워드를 적용한 속성은, 부모로부터 상속할 값이 존재하면 상속 값을, 그렇지 않다면 초기값을 사용합니다.

전자 일 땐 inherit 키워드처럼 후자일 땐 initial 키워드처럼 동작합니다.

 

 

BOX-SHADOW 속성

 

box-shadow CSS속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다.

쉼표로 구분해서 여러 그림자 효과를 입힐 수 있습니다.

박스 그림자는 요소에서의 수평수직 거리 (offset), 흐릿함, 확산정도, 색상으로 이루어집니다.

 

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

하나의 box-shadow는 다음 구성요소로 지정할 수 있습니다.

• 두 개에서 네 개의 값.

  • 두 개의 값을 사용하면 <offset-x><offset-y>로 분석합니다.

  • 세 번째 값이 주어지면 <blur-radius>로 분석합니다.

  • 네 번째 값이 주어지면 <spread-radius>로 분석합니다.

• 선택사항으로 inset 키워드.

• 선택사항으로 color 값. rgb() 설정도 가능합니다.

 

inset 

- 그림자가 요소의 테두리 안쪽 패딩 역영 쪽으로 그려집니다.

 

- offset-x , offset-y

그림자의 위치를 설정합니다. x는 수평거리를 의미하며 음수 값은 왼쪽으로 치우칩니다.

y는 수직거리를 의미하며 음수 값은 위쪽으로 치우칩니다.

두 값이 0이라면 뒤쪽에 존재하며 blur , spread값을 넣게 되면 흐려지는 효과를 볼 수 있습니다.

 

 

Phark Method 

이미지로 대체할 엘리먼트에 배경 이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법

 

검색이라는 텍스트 대신 이미지인 돋보기를 넣고 싶다면

 

html

<input class ="sub" type="submit" value="검색" />

css

.sub {
  background: url(btn_img) no-repeat;
  text-indent: -9999px;
  overflow: hidden;
}

이미지를 설정하고 텍스트는 화면 밖으로 text-indent속성으로 밀어냅니다. 다음 overflow : hidden;으로 완벽히 보이지 않게 합니다.