오늘부터 CSS의 카테고리에도 글을 하나씩 올려볼까 한다.
CSS 카테고리의 이전 포스트에서 소개한 생활코딩의 CSS 수업 영상을 토대로 글을 써보겠다.
이전 포스트
CSS 독학도 생활코딩과 함께
생활코딩 CSS 수업 영상: CSS 소개
영상의 내용처럼 CSS가 탄생한 배경은 "정보와 디자인의 분리"를 위해서였다.
1. 초창기: HTML이 모든 것을 하던 시절
웹의 초기 단계에서 HTML은 오직 '문서의 구조'를 정의하기 위해 만들어졌다.
하지만 웹이 대중화되면서 사람들은 웹페이지를 예쁘게 꾸미고 싶어 했다.
2. 문제의 시작: <font> 태그의 등장
디자인 요구를 충족하기 위해 HTML에 원래 목적에 없던 디자인용 태그와 속성들이 추가되었다.
예를 들면 다음과 같은 것들이 있었다.
<font color="red" face="Arial">- 가운데로 정렬하는
<center>태그 - 배경색을 지정하는
bgcolor속성 등
그런데 이로 인해 다음과 같은 문제들이 발생하게 되었다.
- 코드의 비대화: 모든 글자마다
<font>태그를 붙이다 보니 문서 용량이 커지고 지저분해졌다. - 유지보수 지옥: 사이트 전체의 폰트 색상을 바꾸려면 수천 개의 HTML 파일을 일일이 열어 수정해야 했다.
- 구조의 파괴: HTML이 '정보'를 전달하는 본연의 역할을 잃고 디자인 코드와 뒤섞여 버렸다.
3. 해결사 CSS의 등장 (1996년)
이런 혼란을 해결하기 위해 W3C(웹 표준 기구)는 "디자인 관련 코드는 별도의 언어로 관리하자"는 결정을 내린다.
그렇게 탄생하게 된 것이 바로 CSSCascading Style Sheets다.
- HTML: 제목, 문단, 표 등 문서의 구조만 담당
- CSS: 색상, 크기, 배치 등 디자인만 담당
결론적으로, CSS 덕분에 HTML 코드 한 줄 건드리지 않고도 CSS 파일 하나만 수정해서 웹사이트 전체의 디자인을 순식간에 바꿀 수 있게 되었다.
실습 환경 (ATOM 대신 VSCode를 설치하자)
수업 영상이 꽤 오래 전 영상이라 아톰ATOM을 사용한다.
아톰 대신 비주얼 스튜디오 코드Visual Studio Code(줄여서 VSC 혹은 VSCode라고 부른다)를 설치하자.
HTML에 CSS를 적용하는 방법
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color:blue
}
</style>
</head>
<body>
<h1 style="color:red">Hello World</h1>
<h2>Hello World</h2>
</body>
</html>영상 속의 코드다.
CSS를 적용하는 방법은 크게 세 가지로 분류할 수 있는데, 여기서는 일단 두 가지의 방법만 소개했다.
<h1> 태그에 인라인 스타일, <h2> 태그에는 내부 스타일 시트를 사용했다.
또 두 가지 방식 외에 외부 CSS 파일을 연결하는 방법도 있는데, 그건 아주 나중에 소개될 것 같다.
다음 포스트
CSS 기본 선택자의 종류 (태그, 아이디, 클래스)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩