어제 오늘 내일

CSS에서 텍스트에 그림자 효과를 주기 위해서는 text-shadow 속성을 사용합니다. text-shadow text-shadow: 3px 4px 5px red; 속성값 offset-x, offset-y (필수) 그림자의 위치를 지정합니다. offset-x : 양수이면 글자의 오른쪽에, 음수이면 글자의 왼쪽에 그림자가 나타납니다. offset-y : 양수이면 글자의 아래쪽에, 음수이면 글자의 위쪽에 그림자가 나타납니다. blur-radius 숫자가 커질수록, 그림자가 흐릿해집니다. color 그림자의 색깔을 지정합니다. 텍스트에 그림자 효과 주기 예제 ex01 ex02 ex03 .ex01 { text-shadow: 5px 5px gray; } .ex02 { text-shadow: 5px 5px 4px ..

이전 포스팅에서는 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..

, , 태그를 사용하여 생성된 목록 앞에는 목록을 구분하는 점, 숫자 등이 표시됩니다. 이 때, 앞에 붙는 점을 없애는 방법입니다. list-style-type 또는 list-style 목록 사과 바나나 오렌지 점 없는 목록 사과 바나나 오렌지 .no_dot { list-style-type: none; } list-style-type: none; 리스트 앞에 붙은 점을 제거 하기 위해서 list-style-type의 값을 'none'으로 설정하였습니다. list-style-type 대신 list-style 속성을 사용해도 됩니다. list-style-type: none; list-style: none; (list-style 속성은, list-style-image, list-style-position, l..