웹 디자인의 세계에서는 미학과 사용자 경험이 가장 중요합니다. 웹 사이트의 시각적 매력에 크게 기여하는 한 가지 측면은 텍스트와 배경 색상 간의 상호 작용입니다. 이러한 요소 간의 조화로운 균형을 유지하면 사용자의 가독성과 참여가 보장됩니다. 이 블로그 게시물에서는 배경의 밝기에 따라 텍스트 색상을 동적으로 조정하여 시각적으로 즐겁고 사용자 친화적인 디자인을 만드는 JavaScript 기술을 살펴보겠습니다.
과제 이해하기
이 시나리오를 생각해 보세요. 다양한 섹션과 콘텐츠가 포함된 아름답게 디자인된 웹사이트가 있습니다. 일부 섹션의 배경은 밝은 반면 다른 섹션은 더 어둡습니다. 이제 사이트 전체에 단일 텍스트 색상을 사용한다고 상상해 보십시오. 텍스트와 배경 색상이 충돌할 때 가독성 문제가 발생할 수 있습니다.
이러한 문제를 극복하려면 배경의 밝기를 자동으로 감지하고 이에 따라 텍스트 색상을 조정하는 솔루션이 필요합니다. 배경이 밝으면 텍스트는 어두워야 하고, 그 반대의 경우도 마찬가지입니다.
자바스크립트의 마법
이 작업을 위해 우리가 선택한 도구는 JavaScript입니다. 우리는 JavaScript를 활용하여 다음을 수행합니다.
- 배경색 얻기: getCompulatedStyle()을 사용하여 요소의 배경색을 얻는 것부터 시작합니다.
- 밝기 계산: 다음으로 배경색의 밝기를 계산합니다. 이 단계에는 RGB(빨간색, 녹색, 파란색) 값을 분해하고 가중치 공식을 적용하는 작업이 포함됩니다. '(r * 299 + g * 587 + b * 114) / 1000' 공식은 밝기 점수를 제공하며 점수가 높을수록 밝은 색상을 나타냅니다.
- 텍스트 색상 설정: 마지막으로 계산된 밝기를 임계값과 비교합니다. 배경이 밝으면 텍스트 색상을 검은색으로 설정합니다. 어두우면 흰색으로 설정합니다.
코드를 보겠습니다.
<div class="text-container" style="background-color: #c2ca82;">
<p id="text">Hello, World!</p>
</div>
이 부분의 #c2ca82를 다른 값으로 변경 해 보세요. 어두운 색상으로, 또는 밝은 색상으로 변경해 보세요. 그에 따라 "Hello, World!" 의 색상이 흰색 또는 검은색으로 변경되는 것을 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.text-container {
padding: 20px;
}
</style>
</head>
<body>
<div class="text-container" style="background-color: #c2ca82;">
<p id="text">Hello, World!</p>
</div>
<script>
// Get the background-color of the container
const container = document.querySelector('.text-container');
const containerStyle = getComputedStyle(container);
const backgroundColor = containerStyle.backgroundColor;
// Function to calculate brightness based on RGB values
function calculateBrightness(rgbValue) {
const rgbNumbers = rgbValue.substring(4, rgbValue.length - 1);
// Split the values using a comma as a delimiter
const rgbArray = rgbNumbers.split(",");
// Parse the substrings into integers
const r = parseInt(rgbArray[0].trim(), 10);
const g = parseInt(rgbArray[1].trim(), 10);
const b = parseInt(rgbArray[2].trim(), 10);
// Calculate brightness based on RGB values
return (r * 299 + g * 587 + b * 114) / 1000;
}
// Set the text color based on background brightness
const backgroundBrightness = calculateBrightness(backgroundColor);
const textElement = document.getElementById('text');
// Calculate a threshold for brightness
const brightnessThreshold = 128;
// Use a linearly corresponding color
const textColor = backgroundBrightness > brightnessThreshold ? 'black' : 'white';
textElement.style.color = textColor;
</script>
</body>
</html>Hello, World!
결론
배경 밝기에 따라 동적 텍스트 색상 조정을 통합하면 웹 사이트의 가독성과 시각적 매력을 크게 향상시킬 수 있습니다. 이 간단한 JavaScript 기술을 사용하면 다양한 디자인 요소에서 콘텐츠를 읽기 쉽고 매력적으로 유지할 수 있습니다.
사용자에게 미학적으로 즐겁고 사용자 친화적인 경험을 제공함으로써 참여도를 높이고 긍정적인 인상을 남길 수 있습니다. 그렇다면 한번 시도해 보고 웹 디자인을 한 단계 더 발전시켜 보는 것은 어떨까요?
'Computer Programming > web Program with PHP' 카테고리의 다른 글
| 웹 페이지에서 글자 크기 조절하기: "+"와 "-" 버튼으로 편리하게 (0) | 2023.10.04 |
|---|---|
| 웹 페이지에서 복사한 내용에 출처 표시하기 (0) | 2023.10.02 |
| 혼합된 형식의 데이터들과 함께 있는 'date' 정보에서 mm-dd 형식으로 출력하는 방법 (0) | 2023.09.06 |
| SQL 쿼리에서 'DATE_FORMAT'함수 사용하여 '03-04'형식의 월-일 뽑아내기 (2) | 2023.09.06 |
