0. 선행학습
- CSS를 배우기 전에 꼭 HTML을 먼저 배워야 한다!
그래야 이후 진행되는 내용의 개념이 이해가 간다.
1. CSS란?
- CSS는 HTML을 아름답게 꾸며주는 디자인 언어이다.
- HTML는 웹이 생길 때부터 있던 태초의 언어라고 볼 수 있는데, HTML에 디자인 기능을 더하려니 비효율적이고 복잡해져서 아예 정보와 디자인을 분리해 HTML은 정보에 좀 더 집중할 수 있도록 하고, 디자인에 집중하는 새로운 문법과 새로운 체계로 만든 것이 CSS 언어인 것이다.
2. HTML과 CSS가 분리된 목적
- 디자인과 정보를 분리함으로써 가독성과 효율성이 몇 배 이상이나 높아지게 된다. 예를 들어 위 이미지를 보면 좌측과 우측의 결과값은 모두 아래와 동일하게 나타난다
#Result
같은 결과라면 HTML만 배워서 써도 되지 않겠냐는 궁금증이 생길 수 있는데(.. 있으려나?) 한번 만들고 끝이라면 그럴 수도 있겠으나 지속적인 업데이트와 유지보수가 필요한 개발의 특성상 컨텐츠의 컬러를 매일 변경해 달라고 한다면 어떻게 될까?..🥲 (돔황챠!)
꼭 이런 경우가 아니라고 해도 수정할 때 드는 loss를 따져보면 CSS를 배워야 할 이유가 충분해진다. HTML로만 작성된 좌측 코드는 정보 속에 혼재된 코드 중 <font> 태그의 color 속성 값을 찾아서 일일이 바꿔야 하는 반면, HTML과 CSS로 분리된 우측의 코드는 Style 태그의 CSS 문법으로 쓰인 color의 값을 바꿔주기만 하면 된다.
예시로 들은 건 3개의 리스트 정보이지만 실전에서는 훨씬 더 복잡하고 정교한 방식으로 구성되어 있기 때문에 배워야 하는 언어가 늘어남에도 불구하고 좀 더 간결한 방식으로 작업할 수 있는 더 큰 장점이 있기에 CSS가 탄생하게 된 것이다.
#Source_1_HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<li><font color="blue">HTML</font></li>
<li><font color="blue">CSS</font></li>
<li><font color="blue">JavaScript</font></li>
</body>
</html>
#Source_2_HTML+CSS
<!DOCTYPE html>
<html>
<head>
<style>
li{
color:blue;
}
</style>
</head>
<body>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</body>
</html>
*출처 및 자세한 내용은 생활코딩 이고잉님 영상 참고!
CSS https://opentutorials.org/course/2418/13339
CSS 소개 - 생활코딩
CSS 소개 2016-08-15 16:50:37
opentutorials.org
'Dev 개발 스터디 (동면 중) > Dev_CSS' 카테고리의 다른 글
| [CSS] HTML에 CSS를 결합시키는 2가지 방법 (0) | 2021.06.09 |
|---|