본문 바로가기

CSS97

Day 94 - 대비(contrast) 이해하기 Day 94 - 대비(contrast) 이해하기 오늘의 학습 목표 대비(Contrast)의 개념과 중요성 이해하기 대비율(Contrast Ratio)이란 무엇인지 배우기 웹 접근성 기준(WCAG) 알아보기 대비율을 확인하는 방법 익히기 접근성 높은 색상 조합 선택하기 1. 대비(Contrast)란? 핵심 개념 대비는 두 색상 사이의 밝기 차이를 말합니다. 대비가 높으면 글자가 잘 보이고, 대비가 낮으면 글자가 흐릿하게 보입니다. 웹에서는 이 대비를 숫자(대비율)로 표현합니다. .. 2026. 3. 10.
Day 93 - 글자색과 배경색 조합 Day 93 - 글자색과 배경색 조합 오늘의 학습 목표 조화로운 색상 조합의 원리 이해하기 가독성 높은 색상 조합 선택하기 같은 계열 색상 조합법 익히기 보색/유사색 조합 활용하기 실무에서 검증된 색상 조합 배우기 1. 색상 조합의 기본 원칙 핵심 원칙 가독성이 가장 중요합니다! 아무리 예쁜 색상이라도 글자가 안 보이면 의미가 없습니다. 글자색과 배경색은 충분한 명도 차이가 있어야 합니다. 비유로 이해하기 - 옷 코디 옷을 입을 때 색상 조합을 생각하듯.. 2026. 3. 9.
Day 92 - background-color 활용 (2) Day 92 - background-color 활용 (2) 오늘의 학습 목표 버튼 스타일링에 배경색 활용하기 알림 박스(Alert) 만들기 카드 디자인에 배경색 적용하기 상태별 색상 구분 (성공/경고/오류/정보) 실무에서 자주 쓰이는 배경색 패턴 익히기 1. 버튼 스타일링 버튼의 배경색 버튼은 사용자와 상호작용하는 중요한 요소입니다. 배경색으로 버튼의 용도와 중요도를 시각적으로 구분할 수 있습니다. /* 기본 버튼 스타일 */.btn { padding: 0.8em 1.5e.. 2026. 3. 8.
Day 91 - 배경 색상 - background-color (1) Day 91 - 배경 색상 - background-color (1) 오늘의 학습 목표 background-color 속성의 개념과 역할 이해하기 배경색을 지정하는 다양한 방법 익히기 color 속성과 background-color의 차이 이해하기 기본적인 배경색 활용법 배우기 실전에서 배경색 적용하기 1. background-color란? 핵심 개념 background-color는 CSS에서 요소의 배경 색상을 지정하는 속성입니다. Week 14에서 배운 color 속성이 글자색을 바꾸는 것처럼, bac.. 2026. 3. 7.
Day 90 - 월간 프로젝트 (2) + Phase 1 총정리 Day 90 - 월간 프로젝트 (2) + Phase 1 총정리 Phase 1 완료! 축하합니다! 90일 동안의 HTML/CSS 기초 여정을 완주하셨습니다! HTML 기초 마스터 CSS 입문 완료 색상 전문가 오늘의 목표 컬러풀한 시집 프로젝트 완성하기 Phase 1 (Day 1-90) 전체 내용 총정리 배운 태그와 속성 복습하기 앞으로의 학습 방향 안내 성취감과 자신감 얻기 Part 1: 시집 프로젝트 완성 .. 2026. 3. 6.
Day 89 - 월간 프로젝트 (1) - 컬러풀한 시집 Day 89 - 월간 프로젝트 (1) - 컬러풀한 시집 프로젝트 목표 지금까지 배운 HTML과 CSS를 종합 활용하기 색상 지식을 실제 프로젝트에 적용하기 아름다운 컬러 시집 만들기 각 시에 어울리는 색상 테마 설정하기 완성도 높은 결과물 만들기 프로젝트 소개: 컬러풀한 시집 프로젝트 개요 "컬러풀한 시집"은 4계절을 주제로 한 시를 각각의 색상 테마로 꾸미는 프로젝트입니다. 봄: 분홍색/연초록 테마 여름: 파란색/청록 테마 가을: 주황색/갈색.. 2026. 3. 5.

티스토리툴바