스타일 부분에는 CSS가 들어감!
웹 개발에서 스타일(디자인) 을 담당하는 것은 CSS(Cascading Style Sheets) 야!
👉 HTML은 웹 페이지의 뼈대
👉 CSS는 디자인(색상, 크기, 정렬 등)
👉 JavaScript는 동작(클릭, 애니메이션 등)
📌 1. CSS를 적용하는 방법 (3가지)
① 인라인 스타일 (HTML 안에 직접 작성)
👉 HTML 태그 안에 style 속성을 써서 적용
👉 단점: 코드가 지저분해지고, 유지보수 어렵다 ❌
② 내부 스타일 (HTML <style> 태그 사용)
👉 HTML 파일 안에 <style> 태그를 사용해서 CSS 적용
👉 단점: HTML과 CSS가 섞여서 코드가 길어짐 ❌
③ **외부 스타일 (CSS 파일로 분리) → ✅ 추천!
🔹 style.css 파일을 따로 만들어서 CSS 적용
🔹 HTML 코드가 깔끔해지고 유지보수가 편리함 ✅
✔ style.css 파일 예제
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-weight: bold;
}✔ 결과: HTML 파일에서 <h1>, <p> 태그에 자동 적용됨!
🎯 결론
✅ 스타일 부분에는 CSS가 들어간다!
✅ CSS 적용 방법: 인라인 / 내부 / 외부 스타일 (외부 스타일 추천)
✅ HTML과 CSS를 분리하면 유지보수와 관리가 더 쉬움! 🚀😃
JavaScript는 CSS와 함께 어떻게 쓰일까?
웹 개발에서는 JavaScript(JS) 가 CSS와 함께 사용될 수 있어!
👉 JavaScript는 웹 페이지에 동적인 기능을 추가하는 역할
👉 CSS는 디자인(색상, 크기, 정렬 등) 을 담당
💡 결론:
➡ JavaScript를 이용해서 CSS 스타일을 변경하거나 애니메이션 효과를 줄 수 있음
📌 1. JavaScript로 CSS 변경하는 방법
① HTML 태그의 style 속성 직접 변경
<button onclick="changeColor()">배경색 변경</button>
<script>
function changeColor() {
document.body.style.backgroundColor = "lightblue";
}
</script>✔ 설명: 버튼을 클릭하면 body의 배경색이 lightblue로 변경됨!
✔ 단점: style 속성을 직접 수정하면 유지보수가 어려움 ❌
✔ 해결 방법: CSS 클래스를 사용하면 더 효율적! ✅
② CSS 클래스 변경 (classList 활용)
<style>
.red-text {
color: red;
font-size: 24px;
}
</style>
<p id="text">이 글자의 색을 바꿔보세요!</p>
<button onclick="toggleTextColor()">색상 변경</button>
<script>
function toggleTextColor() {
document.getElementById("text").classList.toggle("red-text");
}
</script>✔ 설명:
- 버튼을 누를 때마다 <p> 태그에 red-text 클래스가 추가/제거됨
- CSS 클래스를 활용하면 유지보수가 쉬워짐! ✅
📌 2. JavaScript + CSS로 애니메이션 만들기
JavaScript와 CSS를 조합하면 애니메이션도 만들 수 있어!
✔ CSS 애니메이션 예제
<style>
.move {
transition: transform 0.5s;
transform: translateX(0px);
}
.move.active {
transform: translateX(100px);
}
</style>
<div id="box" class="move" style="width: 50px; height: 50px; background: blue;"></div>
<button onclick="moveBox()">이동</button>
<script>
function moveBox() {
document.getElementById("box").classList.toggle("active");
}
</script>✔ 설명:
- 버튼을 클릭하면 div가 오른쪽으로 100px 이동
- CSS transition을 활용해 부드러운 애니메이션 적용
🎯 결론
✅ JavaScript로 CSS 스타일을 변경 가능
✅ style 속성보다는 CSS 클래스를 추가/제거하는 방식이 더 효율적
✅ CSS 애니메이션과 JavaScript를 조합하면 동적인 웹사이트 제작 가능! 🚀😃
'웹' 카테고리의 다른 글
| 웹사이트 (0) | 2025.02.17 |
|---|---|
| 웹사이트만들기 1일차 (1) | 2025.02.17 |
| 템플릿 활용 (0) | 2025.02.12 |
| 웹 컨트롤러 (0) | 2025.02.12 |
| HTML,CSS,JavaScript 정리 (1) | 2025.02.07 |