front-end/css37 CSS 박스의 안쪽에 그림자 넣기 지난 포스트에서 다룬 태그 등으로 만든 박스에 그림자 효과를 주는 또다른 방법입니다. 이번에는 박스의 안쪽에 그림자를 넣어서 박스가 안으로 들어간 것처럼 보이게 만들겠습니다. box-shadow: inset shadow 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. box-shadow: 속성의 가장 앞에 inset을 넣어주시면 그림자가 박스의 안쪽에 생깁니다. inset 다음으로 들어가는 속성 값 다섯가지는 지난 포스트와 동일합니다. a는 그림자가 오른쪽으로 얼마나 이동할 것인가, b는 그림자가 아래쪽으로 얼만큼 이동할 것인가, c는 그림자의 부드러운 정도, d는 그림자의 확장량, e는 그림자의 색상입니다. shado.. 2021. 2. 19. 11:33 CSS 박스에 그림자 넣기 태그 등으로 만든 박스에 그림자 효과를 주는 방법을 알아보겠습니다. box-shadow: shadow 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. box-shadow: 속성으로 박스에 그림자 효과를 줄 수 있습니다. 안에 들어가는 속성 값은 box-shadow: a b c d e 다섯가지로, a는 그림자가 오른쪽으로 얼마나 이동할 것인가, b는 그림자가 아래쪽으로 얼만큼 이동할 것인가, c는 그림자의 부드러운 정도, d는 그림자의 확장량, e는 그림자의 색상입니다. shadow 위의 소스 코드로 이렇게 박스에 그림자가 생기면서 입체감이 생기게 되었습니다. 이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서 빨간.. 2021. 2. 17. 11:20 CSS 박스의 모서리를 둥글게 라운딩 처리하는 방법 태그 등으로 만드는 박스의 모서리를 둥글게 라운딩 처리하는 방법을 알아보겠습니다. border-radius: radius 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS 박스의 배경에 그라데이션 넣기 태그로 만든 박스의 배경을 한가지의 단색이 아닌, 두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다. background: linear-gradient( ) gradation 위의 소스 코드는 PC에서 드 gogogameboy.tistory.com 이 포스트에서 올린 코드에서 살짝 변형을 줬습니다. 박스의 CSS 스타일에 border-radius: 를 추가해서 픽셀 값을 넣어주시면 됩니다. radius.. 2021. 2. 14. 23:17 CSS 박스의 배경에 그라데이션 넣기 태그로 만든 박스의 배경을 한가지의 단색이 아닌, 두가지의 색을 이용해서 그라데이션 효과를 주는 방법을 알아봅시다. background: linear-gradient( ) gradation 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. CSS에 background: linear-gradient( )를 넣어서 그라데이션 효과를 줄 수 있습니다. 처음에 넣어준 값인 90deg는 각도를 뜻합니다. 90 대신에 0, 45, 180, 225, 270 등등.. 다양한 값을 넣을 수 있습니다. gradation 위의 소스 코드로 이와 같은 그라데이션 효과가 적용이 된 박스가 만들어졌습니다. background: radial-gra.. 2021. 2. 12. 10:33 CSS, 같은 페이지의 특정 위치로 링크시에 컬러 변화 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 HTML, 같은 페이지의 특정 위치로 링크를 거는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 아래의 4개의 메뉴 목록들을 클릭해보시기 바랍니다. 이승환 개요 데뷔 음악 음반 gogogameboy.tistory.com 위의 포스트에서 이어지는 내용입니다. 이 페이지에서 CSS 적용을 하기 힘드니 적용한 결과는 아래의 파일을 다운로드해서 확인해주세요. :target {background: pink;} 이승환 개요 데뷔 음악 음반 목록 개요 대한민국의 가수·프로듀서다. 1989년 10월 15일 1집 《B.C 603》으로 데.. 2021. 2. 10. 10:37 CSS 리스트 태그의 번호 디자인 변경 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 리스트(목록) 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 링크 태그 (feat. 하이퍼텍스트) 이 포스팅은 PC로 작성되었습니다. 모바 gogogameboy.tistory.com 예전에 배웠던 리스트(목록) 태그를 CSS로 꾸며보겠습니다. 은 번호가 없는 리스트였고, 은 번호가 매겨지는 리스트였죠. 기본 태그 NASTYONA 아홉가지 기분 (2007) 아홉가지 기분 돌이킬 수 없는 바늘 어쩌면 처음부터 정해져 있던 이야기 Empty 사라지지 않는, 밤 Tete Judith 요단강 To my grandfather 꿈속에.. 2021. 2. 8. 09:00 CSS 폰텔로 fontello 사용법 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 전처리기 preprocessor 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로 보시 gogogameboy.tistory.com 이전 포스트에 이어서 이번에도 복잡하지만 아주 중요하지는 않은 내용입니다. 하지만, 웹사이트의 디자인을 중요시한다면 꽤 흥미로운 재미있는 내용입니다. 저도 저의 웹사이트를 제작하게 된다면 적용해볼까 생각하고 있지만, 공부를 하는 중인 지금은 일단 이런 기능이 있다는 것만 알고 그냥 넘어가려고 합니다. 그리고.. 2021. 1. 17. 13:02 CSS 전처리기 preprocessor 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, link와 import 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분 gogogameboy.tistory.com 생활코딩 강의 영상으로 공부해보는 CSS 공부도 거의 마지막을 달리고 있습니다. 이번에 공부할 내용은 솔직히 제 개인적인 생각으로는 배울 필요가 없다고 생각해서 그냥 영상만 링크하고 넘어가겠습니다. 저도 공부를 하고 있는 입장이기 때문에 제가 이 기능의 대단한 점을 모르고 있는 것일 수도 있지만.. 일단 궁금.. 2021. 1. 17. 11:15 CSS 코드 경량화 minify 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS, link와 import 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 CSS 트랜지션으로 좀 더 역동적이고 고급스러운 느낌 주기 이 포스팅은 gogogameboy.tistory.com CSS의 지난 포스트에서는 웹사이트를 제작하려는 분들에게는 아주 중요한 내용인 link와 import, 외부 CSS 파일을 HTML 파일로 불러오는 방법을 배웠습니다. 이번에 공부할 내용도 웹사이트를 만드시려는 분들에게는 아주 중요한 내용 중에 하나입니다. 아래의 생활코딩 강의 영상을 함께 봐봅시다. 코드 경량화 minify.. 2021. 1. 15. 08:28 이전 1 2 3 4 5 다음
