[WEB2]수업의 내용
- CSS의 기본 문법 (선택자와 속성)
- Grid를 이용한 현대적인 레이아웃 제작 방법
- MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법
CSS 등장 이전의 상황
HTML은 정보를 표현하기 위해서 고안된 언어였다. 하지만 사람들은 정보만으로는 못산다고 불평을 쏟아내기 시작하는데....
"텍스트 색깔을 바꾸고 싶어!"
"링크를 클릭하면 빨간색으로 변하게 하고 싶어!"
"좀 더 예쁘게 꾸미고 싶은데?"
이러한 요구가 많아지면서 웹페이지에 디자인을 추가하는 방법이 필요해졌다.
🔹 HTML에서 디자인을 적용하는 두 가지 방법
1️⃣ 쉬운 방법: HTML 언어에 디자인 관련 태그를 추가하는 것
예: <font> 태그를 사용하여 글꼴과 색상을 변경
<font color="red">빨간색 글씨</font>2️⃣ 어렵지만 확실한 방법: CSS, 디자인을 위한 새로운 언어를 개발하는 것
HTML은 본래 "정보를 표현하는 언어" 이므로, 디자인 요소까지 포함하는 것은 비효율적이었다. (시각장애인에게 디자인은 '정보'가 될 수 없듯이 디자인이 과연 정보일까?하는 의문이 제기되었다) 또한 정보와 디자인이 하나의 문서에 섞여 있으면 유지보수도 어려워지고, 웹페이지의 구조를 명확하게 정의하기 어려워졌다.
결국, HTML에서 디자인 요소를 분리하기 위해 CSS (Cascading Style Sheets) 가 탄생하게 되었다! 🎨✨
CSS의 등장🚀
웹이 태어난 직후, HTML에는 디자인 관련 코드가 대거 추가되었다. 하지만 이는 HTML의 본질(정보 전달) 을 흐리게 만들었고, 웹페이지의 유지보수를 어렵게 했다.
이 문제를 해결하기 위해 웹 개발자들은 디자인과 구조를 분리할 방법을 고민했고, 그 결과 CSS (Cascading Style Sheets) 가 탄생했다.
🔹 HTML과 CSS는 서로 다른 언어
CSS는 HTML과 완전히 다른 언어이므로, 웹브라우저에게 CSS 코드를 사용할 것임을 알려주어야 한다. 이를 위해 HTML 문법을 이용해 선언해야 한다.
"웹브라우저야, 지금부터 내가 CSS코드를 쓸거니까 너는 html이 아니라 CSS문법에 따라 해석해야해"
📌 CSS 코드 적용 방법
🖌️ <style> 태그 사용
- CSS 코드를 감싸는 태그
<head>태그 안쪽 에 작성하여 웹브라우저가 먼저 해석하도록 함
🔽이 웹페이지의 모든 <a>태그를 검은색으로 꾸며줘!🔽
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
a {
color:black;
}
</style>
</head>
<body>🎯 CSS의 장점
'코딩을 어떻게 할까?'를 넘어서 '어떻게 '잘' 할까?'라고 한다면 '중복의 제거'를 말할 수 있다.
✅ 중복 코드 제거 → 유지보수 용이 & 웹페이지 크기 감소
✅ HTML과 디자인 코드 분리 → 가독성 향상 & 코드 효율 증가
✅ 검색엔진 & 스크린리더 등의 웹 해석 기기가 더 정확하게 작동
특히, 대규모 웹사이트(Google, Facebook 등)에서는 중복 코드 1줄 차이가 서버 비용에 막대한 영향을 미칠 수 있기 때문에 CSS의 효율성이 더욱 중요하다.
📝 CSS 등장 배경 2줄 요약
1️⃣ HTML의 본질(정보 전달)을 유지하기 위해, 디자인 기능을 분리한 것 → HTML은 정보만 담당, CSS는 디자인 담당
2️⃣ CSS가 훨씬 효율적이며 유지보수에 강하기 때문
👉 CSS는 단순한 디자인 언어가 아니라, 웹을 더욱 체계적으로 만들기 위한 핵심 기술이다! 🎨✨
