본문 바로가기

CSS2

🧮 HTML/CSS/JS 통합 프로젝트 – 나만의 계산기 만들기 지금까지 우리는 웹사이트의 기본 구성 요소인 HTML, CSS, JavaScript를 하나씩 배워왔습니다.이번 글에서는 세 가지 기술을 하나로 통합해 ‘계산기 프로젝트’를 직접 만들어보는 시간을 가져보겠습니다.🧱 우리가 만들 계산기의 기능✅ 숫자 버튼을 클릭하면 입력란에 표시됨✅ +, -, *, / 연산이 가능함✅ = 버튼을 누르면 계산 결과가 출력됨✅ C 버튼으로 초기화 가능💻 HTML – 계산기의 구조 만들기html복사편집html> html lang="ko"> head> meta charset="UTF-8" /> title>간단한 계산기title> link rel="stylesheet" href="style.css" /> head> body> div class="calculator"> input .. 2025. 8. 8.
🎨 CSS로 웹페이지 꾸미기 – 색상과 글꼴을 다뤄보자 HTML로 웹페이지의 뼈대를 만들었다면, 이제는 그 웹페이지에 색상과 스타일을 입힐 차례입니다. 바로 오늘 배울 **CSS(Cascading Style Sheets)**의 역할이죠.CSS는 웹페이지의 디자인과 시각적인 요소를 담당합니다. 글자 크기, 색상, 간격, 배경 등 눈에 보이는 거의 모든 요소를 꾸밀 수 있어요.🧾 CSS란 무엇인가요?**CSS(Cascading Style Sheets)**는 HTML 요소를 꾸미기 위한 스타일 언어입니다.HTML은 콘텐츠 구조만 담당하고, CSS는 그 구조를 보기 좋게 디자인하는 역할을 합니다.🎯 CSS를 적용하는 3가지 방법1️⃣ 인라인 스타일 (Inline)HTML 태그 안에 직접 스타일을 넣는 방법html복사편집p style="color: blue;">파.. 2025. 8. 8.