본문 바로가기

CSS4

프론트엔드 개발자가 알아두면 유용한 웹사이트 - MDN web docs 프론트엔드 개발자가 알아두면 유용한 웹사이트를 소개드릴까 합니다. 바로 MDN web docs 입니다. HTML, CSS, JavaScript에 관련해서 자세한 정보를 확인할 수 있으며, 학습 가이드라인도 제공해 주니 관심있으신 분은 북마크 하시고 이용하시면 될 것 같습니다. https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, 및 웹 사이트와 프로그레시브 웹 앱을 위한 API를 포함한 오픈 웹 기술에 대한 정보를 제공합니다. 또한 Firefox 개발자 도구와 같은 Mozilla 제품을 위한 개발자 지향 문서도 포함합니다. developer.mozilla.org 2019. 12. 12.
[CSS] Background Gradient 배경 그라디언트 설정하는 방법 이번에는 배경에 한가지 색상이 아닌 두개의 색상을 사용하여 그래디언트 효과를 나타내는 방법에 대해서 알아보겠습니다.background: linear-gradient();그래디언트를 적용하고자 하는 색상 두개의 값(파란색 #0000FF, 녹색 #008000)을 넣어보겠습니다. /* CSS */ background: linear-gradient(#0000FF,#008000); 기본 설정으로 위에서 아래로 그래디언트가 적용된 것을 확인할 수 있습니다. 왼쪽에서 오른쪽으로 그래디언트를 적용하려면 다음과 같이 코드를 넣으면 됩니다. /* CSS */ background: linear-gradient(to right, #0000FF,#008000); 이와 반대로 녹색을 왼쪽으로 파란색을 왼쪽으로 하려면 to rig.. 2018. 7. 30.
[CSS] Background 배경색상 지정하는 방법 + 투명도 지정 오늘은 CSS Background 속성에 대해 알아보도록 하겠습니다.Background 속성은 배경을 지정하는 데 사용됩니다.우선, 배경색상을 지정하는 방법에 대해 알아보겠습니다. background-color배경 색상을 지정하는 방법에는 크게 3가지가 있습니다. 1. 미리 정해진 색상명을 이용해서 지정하는 방법 (Black, White, Blue, Green ...)2. 16진수 6자리 색상코드를 이용해서 지정하는 방법 (#000000, #FFFFFF, #FF0000, ...)3. 0부터 255 이하 숫자를 이용한 RGB 색상코드를 이용해서 지정하는 방법 배경에 미리 정해진 색상명을 이용해서 지정하는 방법입니다. /* CSS */ background-color: red; 미리 정해진 색상명은 아래 웹사.. 2018. 7. 30.
배경 이미지 창에 맞게 늘리는 방법 배경 이미지 창에 맞게 늘리는 방법입니다. 보통 배경이미지를 설정할 때, body 태그에 속성으로 설정하는데, 배경이미지를 브라우저 사이즈에 맞추려면 다음 코드를 이용해야 합니다. #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */ } .stretch { width:100%; height:100%; } 출처 페이지에 연관된 코드들이 많이 올려져 있으니, 선호도에 따라서 이용하시면 편할 듯 합니다. 출처:http://stackoverflow.com/questions/1150163/.. 2013. 12. 23.