어제 오늘 내일

이전 포스팅에서는 CSS의 box-shadow 속성을 사용하여 박스에 그림자를 만들어주는 방법을 알아보았습니다. [HTML/CSS] div 박스에 그림자 만들기(box-shadow) [HTML/CSS] div 박스 그림자 한쪽만 만들기(위, 아래, 오른쪽, 왼쪽) 이번에는 box-shadow로 생성한 그림자에 투명도를 지정해 주는 방법을 알아보려고 합니다. 투명도 설정하기 box-shadow 속성에는, 투명도를 설정할 수 있는 항목이 따로 없습니다. 그래서, 그림자의 투명도를 지정하기 위해서는 color 항목을 rgba형식을 사용해서 표현해야 합니다. color를 표현하는 방법 중 하나인 rgba는 'red, green, blue, alpha' 이렇게 4가지 값을 지정할 수 있는데, 이 중, alpha는..

지난 번에는 CSS의 box-shadow 속성을 사용하여 그림자를 만드는 방법을 알아보았습니다. [HTML/CSS] div 박스에 그림자 만들기(box-shadow) [HTML/CSS] div 박스에 그림자 만들기(box-shadow) 박스에 그림자를 그리기 위해서는 CSS의 box-shadow 속성을 사용합니다. box-shadow 이 속성은 CSS 요소에 그림자를 추가해줍니다. box-shadow : 5px 5px 5px 5px red inset; 허용 값 offset-x, offset-y 그림자의 위치를 hianna.tistory.com 이번에는 이것을 응용하여, 박스의 위쪽, 아래쪽, 오른쪽, 왼쪽에만 그림자를 만들어보겠습니다. box-shadow 먼저 잠깐, box-shadow에 지정할 수 있는..

박스에 그림자를 그리기 위해서는 CSS의 box-shadow 속성을 사용합니다. box-shadow 이 속성은 CSS 요소에 그림자를 추가해줍니다. box-shadow : 5px 5px 5px 5px red inset; 허용 값 offset-x, offset-y 그림자의 위치를 지정합니다. offset-x : 양수를 입력하면 그림자가 오른쪽으로, 음수를 입력하면 그림자가 왼쪽으로 만들어집니다. offset-y : 양수를 입력하면 그림자가 아래쪽으로, 음수를 입력하면 그립자가 위쪽으로 만들어집니다. blur-radius 숫자가 커질수록, 그림자가 블러 처리되어 흐려집니다. spread-radius 숫자가 커질수록, 그림자의 크기가 커집니다. color 그림자의 색깔을 지정할 수 있습니다. inset ins..