투케이2K

67. (html/css/javascript/jquery) 다중 배경 색상 지정 실시 - background linear gradient 사용 본문

FrontEnd

67. (html/css/javascript/jquery) 다중 배경 색상 지정 실시 - background linear gradient 사용

투케이2K 2021. 8. 3. 14:22

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : html, css, js, jquery

[소스 코드]

​

<body>

<!-- container layout : 세로 방향 노랑 50% / 빨강 50% -->
<div style="width: 40%; height: 20%; margin: 0 auto; padding: 0; border: 1px solid #000; position: relative; top: 0%; left: 0%;
        background: linear-gradient(#fff5bf 50%, #ff0000 50%);">      
</div>


<!-- container layout : 가로 방향 노랑 80% / 빨강 20% -->
<div style="width: 40%; height: 20%; margin: 0 auto; padding: 0; border: 1px solid #000; position: relative; top: 5%; left: 0%;
        background: linear-gradient(90deg, #fff5bf 80%, #ff0000 20%);">      
</div>


<!-- container layout : 대각선 방향 노랑 50% / 빨강 50% -->
<div style="width: 40%; height: 20%; margin: 0 auto; padding: 0; border: 1px solid #000; position: relative; top: 10%; left: 0%;
        background: linear-gradient(to bottom left, #fff5bf 50%, #ff0000 50%);">      
</div>


<!-- container layout : 대각선 방향 노랑 25% / 빨강 25부터 50% 까지 (25%) / 초록 50부터 75% 까지 (25%) / 파랑 75부터 100% 까지 (25%) -->
<div style="width: 40%; height: 20%; margin: 0 auto; padding: 0; border: 1px solid #000; position: relative; top: 15%; left: 0%;
        background: linear-gradient(to right, #fff5bf 25%, #ff0000 25% 50%, #00ff00 50% 75%, #0000ff 75% 100%);">      
</div>

</body>

​

[결과 출력]

​

 

반응형
저작자표시

'FrontEnd' 카테고리의 다른 글

69. (html/css/javascript/jquery) radio , label 사용해 라디오 폼을 버튼 button 모양으로 커스텀 변경 실시  (0) 2021.08.04
68. (html/css/javascript/jquery) 로컬에 저장된 폰트 다중 호출 및 적용 방법 - font face , font family  (0) 2021.08.03
66. (html/css/javascript/jquery) radio 라디오 버튼 그룹 생성 및 커스텀 색상 정의 실시  (0) 2021.07.30
65. (html/css/javascript/jquery) 모바일 스크롤 시 부드럽게 처리하기 - overflow scrolling  (0) 2021.07.30
64. (html/css/javascript/jquery) 커스텀 css : 반응형 모바일 설문 조사 화면 제작 실시  (0) 2021.07.29
'FrontEnd' Related Articles more
Comments