어제 오늘 내일

div에 대각선 그리기 (linear-gradient) 먼저, linear-gradient에 대한 자세한 설명은 지난 포스팅을 참고하세요.2025.02.24 - [IT/CSS] - [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과 [CSS] linear-gradient 속성 예제, 배경색 그라데이션 효과linear-gradientlinear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합hianna.tistory.com  대각선 그리기 예제.diagonal-line { width: 300px; height: 300px; bor..

linear-gradientlinear-gradient는 CSS에서 배경에 색깔이 점점 변하는 효과를 줄 때 사용하는 방법입니다.예를 들어, 빨간색에서 파란색으로 부드럽게 바뀌는 배경을 만들고 싶다면 linear-gradient를 사용합니다.색깔이 선처럼 쭉 이어지면서 자연스럽게 섞여 보이는 효과를 줄 수 있습니다. 0. 기본 문법background: linear-gradient(방향, 색상1, 색상2, ...); 방향: 색상이 이동하는 방향(각도 또는 위치)색상1, 색상2, ...: 그라디언트에 사용할 색상 (최소 2개 이상)  1. 방향 설정1) 각도 사용.my-class { width: 200px; height: 200px; background: linear-gradient(45deg, red..

지난번 포스팅에서 배경 그라데이션, 무지개 그라데이션을 적용하는 방법을 알아보았습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 지난번에는 단순하게 요소의 배경색을 지정하거나, 배경 이미지를 지정하는 방법을 알아보았습니다. [HTML/CSS] div 안의 배경색 지정하기 div 안의 배경색을 지정하기 위해서는 css의 background-color hianna.tistory.com [HTML/CSS] 무지개 그라데이션 (linear-gradient) [HTML/CSS] 무지개 그라데이션 (linear-gradient) 지난 번 포스팅에서는 CSS로 그라데이션을 만들 수 있는 linear-g..

지난 번에는 CSS의 linear-gradient() 함수를 이용하여 배경색에 그라데이션을 주는 방법을 알아보았습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 또한, 이를 활용하여 무지개 색으로 배경을 지정하는 방법도 알아보았습니다. [HTML/CSS] 무지개 그라데이션 (linear-gradient) 이를 응용하면 배경색을 2가지 색으로 반반 나누어 지정하는 것은 더 쉽겠죠? 배경색 두개로 반반 나누어 지정하기 (그라데이션) 배경색 두개로 반반 나누어 지정하기 (Solid) 두 배경색의 경계선 위치 조정하기 (Solid) 1. 배경색 두개로 반반 나누어 지정하기 (그라데이션) my_gradient_half_1.html my_gradient_half_1.css #h..

지난 번 포스팅에서는 CSS로 그라데이션을 만들 수 있는 linear-gradient에 대해서 설명했습니다. [HTML/CSS] 배경색 그라데이션 넣기 (linear-gradient()) 이번에는 linear-gradient를 이용해서 무지개 모양의 그라데이션 배경을 만들어 보겠습니다. 무지개 그라데이션 무지개 그라데이션 (solid) 1. 무지개 그라데이션 my_gradient_rainbow_1.html my_gradient_rainbow_1.css #rainbow { background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, purple); width: 500px; height: 300px; } 결과 2. ..

지난번에는 단순하게 요소의 배경색을 지정하거나, 배경 이미지를 지정하는 방법을 알아보았습니다. [HTML/CSS] div 안의 배경색 지정하기 div 안의 배경색을 지정하기 위해서는 css의 background-color 속성을 지정합니다. background-color 예제 div { height : 20px; width : 200px; } CSS에서 색깔을 지정하는 방법은 다음과 같습니다. 이름 16진.. hianna.tistory.com [HTML/CSS] div에 배경 이미지 넣기 총정리 (반복, 한번만, 가운데, 꽉차게) CSS를 사용하여 div에 배경 이미지를 넣는 방법입니다. 배경 이미지 넣기 (background-image) 배경 이미지 반복 횟수 지정하기 (background-repeat..

이미지를 어둡게 하기 filter: brightness() opacity, background-color linear-gradient() 1. filter: brightness() CSS의 filter에 적용되는 brightness 함수는 주어진 이미지의 밝기를 조절합니다. 허용값 숫자 1은 100%입니다. 퍼센트 100% 미만은 이미지를 어둡게 합니다. 100% 초과는 이미지를 밝게 합니다. 0%는 이미지를 검은색으로 만듭니다. brightness(100%); /* 원본 이미지 */ brightness(0%); /* 검은색 */ brightness(200%); /* 밝기 2배 */ brightness(0.4); /* 40% */ brightness() 예제 my_brightness.html bright..