Home-theater-designers
CSS는 개발자가 웹 페이지의 스타일을 지정하는 데 사용하는 언어입니다. HTML 요소가 화면, 종이 또는 기타 형식의 미디어에 표시되는 방식을 제어합니다. CSS는 자신의 이미지에서 웹 페이지의 스타일을 지정할 수 있는 완전한 사용자 정의 기능을 제공합니다.
CSS를 사용하여 요소의 배경색, 글꼴 스타일, 글꼴 색상, 상자 그림자, 여백 및 기타 여러 속성을 변경할 수 있습니다. 이 가이드에서 box-shadow의 효과적인 사용법을 안내해 드립니다.
CSS box-shadow란 무엇입니까?
NS 상자 그림자 속성은 HTML 요소에 그림자를 적용하는 데 사용됩니다. 상자나 이미지의 스타일을 지정하는 데 가장 많이 사용되는 CSS 속성 중 하나입니다.
CSS 구문:
box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];- 수평 오프셋: 수평 오프셋이 양수이면 그림자는 상자 오른쪽에 있습니다. 수평 오프셋이 음수이면 그림자는 상자 왼쪽에 있습니다.
- 수직 오프셋: 수직 오프셋이 양수이면 그림자가 상자 아래에 표시됩니다. 수직 오프셋이 음수이면 그림자가 상자 위에 있습니다.
- 흐림 반경: 값이 높을수록 그림자가 더 흐려집니다.
- 확산 반경: 그림자가 얼마나 퍼져야 하는지를 나타냅니다. 양수 값은 그림자의 퍼짐을 증가시키고 음수 값은 퍼짐을 감소시킵니다.
- 색상: 그림자의 색을 의미합니다. 또한 rgba, hex 또는 hsla와 같은 모든 색상 형식을 지원합니다.
흐림, 확산 및 색상 매개변수는 선택 사항입니다. box-shadow의 가장 흥미로운 부분은 쉼표를 사용하여 box-shadow 값을 여러 번 구분할 수 있다는 것입니다. 이것은 요소에 여러 테두리와 그림자를 만드는 데 사용할 수 있습니다.
1. 상자의 왼쪽, 오른쪽 및 아래쪽에 Dim box-shadow 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 세 면(왼쪽, 오른쪽 및 아래쪽)에 매우 어두운 그림자를 추가할 수 있습니다.
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;산출:
2. 모든 면에 Dim box-shadow 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 모든 면에 밝은 그림자를 추가할 수 있습니다.
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;산출:
3. 아래쪽과 오른쪽에 얇은 상자 그림자 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 아래쪽과 오른쪽에 그림자를 추가할 수 있습니다.
휴대폰을 무선 라우터에 연결
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;산출:
4. 모든면에 어두운 상자 그림자 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 모든 면에 어두운 그림자를 추가할 수 있습니다.
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;산출:
5. 모든 면에 스프레드 섀도우 추가
대상 HTML 요소와 함께 다음 명령을 사용하여 상자의 모든 면에 스프레드 그림자를 추가할 수 있습니다.
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;산출:
6. 모든 면에 얇은 테두리 그림자 추가
대상 HTML 요소와 함께 다음 CSS를 사용하여 상자의 모든 면에 간단한 테두리 그림자를 추가할 수 있습니다.
box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;산출:
7. 하단 및 왼쪽에 상자 그림자 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 아래쪽과 왼쪽에 그림자를 추가할 수 있습니다.
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;산출:
8. 위쪽과 왼쪽에 희미한 상자 그림자를 추가하고 아래쪽과 오른쪽에 어두운 그림자를 추가합니다.
대상 HTML 요소와 함께 다음 CSS를 사용하여 상자의 위쪽과 왼쪽에 밝은 그림자를 추가하고 상자의 아래쪽과 오른쪽에 어두운 그림자를 추가할 수 있습니다.
box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;산출:
9. 모든 면에 얇은 컬러 테두리 그림자 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자의 모든 면에 간단한 색상 테두리 그림자를 추가할 수 있습니다.
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;산출:
10. 상자의 아래쪽과 왼쪽에 여러 색 테두리 그림자 추가
대상 HTML 요소와 함께 다음 CSS를 사용하여 상자의 아래쪽과 왼쪽에 여러 색상의 테두리 그림자를 추가할 수 있습니다.
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;산출:
GPU 온도를 확인하는 방법
11. 하단에 여러 색상의 테두리 그림자 추가
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 상자 하단에 여러 색상의 테두리 그림자를 추가할 수 있습니다.
box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;산출:
12. 상자의 아래쪽과 오른쪽에 여러 색 테두리 그림자 추가
대상 HTML 요소와 함께 다음 CSS를 사용하여 상자의 아래쪽과 오른쪽에 여러 색상의 테두리 그림자를 추가할 수 있습니다.
box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;산출:
13. 왼쪽과 오른쪽에 밝은 그림자를 추가하고 아래쪽에 그림자를 퍼뜨립니다.
대상 HTML 요소와 함께 다음 box-shadow CSS를 사용하여 왼쪽과 오른쪽에 밝은 그림자를 추가하고 상자 아래쪽에 그림자를 퍼뜨릴 수 있습니다.
box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;산출:
CSS를 HTML 페이지와 통합
이제 CSS를 사용하여 멋진 상자 그림자 효과를 추가하는 방법을 알았으므로 여러 방법으로 HTML 요소와 쉽게 통합할 수 있습니다.
관련된: CSS 파일을 확인, 정리 및 최적화하는 11가지 유용한 도구
HTML 페이지 자체에 포함하거나 별도의 문서로 첨부할 수 있습니다. HTML 문서에 CSS를 포함하는 방법에는 세 가지가 있습니다.
내부 CSS
임베디드 또는 내부 스타일 시트는 사용하는 HTML 문서의 섹션 요소. 원하는 수만큼 생성할 수 있습니다. HTML 문서의 요소이지만 그리고 태그. 다음은 HTML 문서에서 내부 CSS를 사용하는 방법을 보여주는 예입니다.
CSS box-shadow
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
Style 4
인라인 CSS
인라인 CSS는 HTML 요소에 고유한 스타일 규칙을 추가하는 데 사용됩니다. 다음을 통해 HTML 요소와 함께 사용할 수 있습니다. 스타일 기인하다. style 속성은 다음 형식의 CSS 속성을 포함합니다. '자산 가치' 세미콜론( ; ).
관련: CSS 그리드로 2차원 웹사이트를 구축하는 방법 배우기
모든 CSS 속성은 한 줄에 있어야 합니다. 즉, CSS 속성 사이에 줄 바꿈이 없어야 합니다. 다음은 HTML 문서에서 인라인 CSS를 사용하는 방법을 보여주는 예입니다.
CSS box-shadow
Style 4
외부 CSS
외부 CSS는 HTML 문서에 스타일을 적용하는 가장 이상적인 방법입니다. 외부 스타일 시트는 별도의 문서(.css 파일)에 모든 스타일 규칙을 포함하며, 이 문서는 다음을 사용하여 HTML 문서에 연결됩니다. 꼬리표. 영향을 받는 HTML 파일은 마크업을 최소한으로 변경해야 하므로 이 방법은 HTML 문서에 스타일을 정의하고 적용하는 가장 좋은 방법입니다. 다음은 HTML 문서에서 외부 CSS를 사용하는 방법을 보여주는 예입니다.
다음을 사용하여 새 CSS 파일을 만듭니다. .css 확대. 이제 해당 파일 안에 다음 CSS 코드를 추가합니다.
.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}마지막으로 HTML 문서를 만들고 해당 문서 안에 다음 코드를 추가합니다.
포켓몬고 팁과 트릭 2020
CSS box-shadow
Style 4
CSS 파일은 다음을 통해 HTML 문서와 연결됩니다. 태그 및 href 기인하다.
위의 세 가지 방법(내부 CSS, 인라인 CSS 및 외부 CSS)은 모두 동일한 출력을 표시합니다.
CSS로 웹페이지를 우아하게 만드세요
CSS를 사용하면 웹페이지의 스타일을 완전히 제어할 수 있습니다. 다양한 CSS 속성을 사용하여 모든 HTML 요소를 사용자 정의할 수 있습니다. 전 세계의 개발자들이 CSS 업데이트에 기여하고 있으며 1996년 출시 이후 계속 그렇게 하고 있습니다. 따라서 초보자도 배울 것이 많습니다!
다행히 CSS는 초보자에게 친숙합니다. 몇 가지 간단한 명령으로 시작하여 창의력이 어디로 가는지 확인하면 훌륭한 연습을 얻을 수 있습니다.
공유하다 공유하다 트위터 이메일 10분 안에 배울 수 있는 10가지 간단한 CSS 코드 예제CSS에 대한 도움이 필요하십니까? 이러한 기본 CSS 코드 예제를 먼저 시도한 다음 자신의 웹 페이지에 적용하십시오.
다음 읽기 관련 항목- 프로그램 작성
- 웹 디자인
- CSS
Yuvraj는 인도 델리 대학교의 컴퓨터 공학 학부생입니다. 그는 풀 스택 웹 개발에 열정적입니다. 그는 글을 쓰지 않을 때 다양한 기술의 깊이를 탐구하고 있습니다.
유브라지 찬드라가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.