2차원 평면 화면에서 z라는 축을 이용해 겹쳐져있는 요소들의 순서를 정할 수 있다.
꼭 겹쳐져 있지 않더라도 z축에서의 요소들 간의 순서를 정할 수 있다.
left - 파란색
right - 빨간색
기본 적으로 나중에 작성된 요소가 위에 오게 되어 있다.
따라서 left를 먼저 작성하고, right를 나중에 작성했기 때문에 right가 left보다 위에 있는 것을 볼 수 있다.
이러한 상황에서, 요소가 작성된 순서를 무시하고 강제로 원하는 요소의 순서(z축)를 조정하고 싶을 때 z-index를 이용해 요소들의 순서를 지정해주면 된다.
z-index : 정수 값
큰 값을 가진 요소가 위로 올라오게 된다.
z-index의 값은 0이 기준이 되는 것 같다. (기본)
left의 z-index 속성만 0으로 주면 변화가 없고,
1이상을 주었을 때 left가 right위로 올라 온다.
당연히, 둘 다 z-index 속성을 주고 left 값을 더 높게 줘도 된다.
음수 값도 가능하다.
추가 opacity
opcaity 속성은 요소의 투명도를 설정한다.
0이면 완전 투명
(0.5면 반투명)
1이면 불투명이고 (원래)
0 ~ 1 사이의 실수 값을 이용한다.
-
right 요소에 opacity 속성 값을 0.5로 설정했을 때,
-
right 요소에 opacity 속성 값을 0.8로 설정했을 때,
-
right 요소에 opacity 값을 1로 설정했을 때,
box-shadow - 블럭 요소의 그림자
box-shadow 속성은 블럭 요소의 그림자를 보여지게 하는 속성이다. 4가지 값이 들어갈 수 있다.
box-shaodw : 1 2 3 4
1의 자리에는 가로축 그림자에 대한 속성 값이며 양수일 경우 그림자가 오른쪽으로 뻗어 나가고,
음수일 경우 그림자는 왼쪽으로 뻗어 나간다.
2의 자리에는 세로축 그림자에 대한 속성 값이며 양수일 경우 그림자가 아래쪽으로 뻗어 나가고, 음수일 경우 그림자는 위쪽으로 뻗어 나간다.
3의 자리에는 그림자의 스타일이다. (그림자 끝이 어떻게 끝나는지)
0이면 그림자의 끝이 반듯한 선으로 끝나는 것이고 클수록 그림자가 흐릿한 형태로 끝나게 된다.
4의 자리에는 그림자의 색깔을 지정할 수 있다.
text-shadow 속성 - 인라인 요소의 그림자
글자의 그림자를 지정하는 속성이다.
속성 값들의 의미는 box-shadow와 같다.
참고로 4번째 속성은 그림자의 색깔을 나타내는데, box-shadow에서 이 값을 지정하지 않으면
기본 검정색이지만, text-shadow에서 이 값을 지정하지 않으면 설정된 색깔을 따라간다.
0개의 댓글
