CSS의 등장 전
- HTML의 등장(1991년)
웹의 나오면서 전자문서를 작성하기 위한 HTML이 만들어졌다.
HTML으로 작성 된 전자문서(정보)를 인터넷으로 통해 누구에가 전달 할 수 있다는 것은 당시에 혁명적인 일이였다.
그러나 HTML으로만 문서를 작성하기엔 한계점들이 있었다. 문서에 디자인적 측면이 부족하다는 것이였다. 디자인적 측면은 사용자가 문서를 얼마나 가독성 있게 읽을 수 있느냐가 달린 문제였다.
- HTML의 한계점
전자문서를 예쁘게 꾸미지 못한다. - 글꼴변경, 글꼴색상, 가운데정렬, 배경 이미지 삽입 등등
CSS 등장
HTML의 한계 극복 방법
1. HTML 언어에 디자인태그 추가하기. (쉽지만 한계점이 있는 방법)
<font></font> 태그 추가
- <font color="red">글씨 색을 바꾸고 싶은 부분</font>
- 다른 태그들과의 차이점 :
다른 태그들은 웹문서의 정보(단락, 목차, 제목 등)를 나타낸다. 정보를 해석해서 검색엔진 같은 시스템들이 사용자들이 필요한 정보를 찾아주는 것이다. 그러나 <font>태그는 오직 디자인적인 역할만을 할 뿐 웹의 정보를 담고 있지 않다.(예를 들어 시각장애인 분들이 봤을 때 의미 없는 것들은 정보가 아니다.)
- 디자인태그 추가하기의 한계점 :
정보태그와 디자인태그가 섞이면서 웹페이지의 중요한 특성인 정보로서의 가치가 떨어지는 문제점이 생겼다.
글씨를 바꾸고 싶은 부분이 많아 질 수록 같은 코드를 여러번 작성해야 하고 수정시에도 하나하나 직접 바꿔줘야 한다는 문제점도 있다.
2. 새로운 언어 CSS 만들기. (어렵지만 근본적인 해결책)
<style></style>
- CSS는 HTML과 다른 언어다. 그래서 웹이 CSS의 문법으로 읽기 원하면 웹에게 CSS언어로 읽으라고 알려줘야 한다. 이 때 웹은 기본적으로 문서를 HTML의 문법으로 읽기 때문에 HTML의 문법으로 CSS언어로 읽으라고 알려줘야 한다.
- CSS가 font태그보다 좋은 이유
<body>
<h1><a href="index.html"><font color="red">CSS공부시작</font></a></h1>
<ul>
<li><a href="1.html"><a href="index.html">HTML의 한계점</font></a></li>
<li><a href="2.html"><a href="index.html">CSS 등장</a></font></li>
<li><a href="3.html"><a href="index.html">CSS의 장점</a></font></li>
</ul>
</body><head>
<style>
a {
color:red;
}
</style>
</head>
<body>
<h1><a href="index.html">CSS공부시작</a></h1>
<ul>
<li><a href="1.html">HTML의 한계점</a></li>
<li><a href="2.html">CSS 등장</a></li>
<li><a href="3.html">CSS의 장점</a></li>
</ul>
</body>위의 두 코드는 결과 값이 같아도 효율적 측면이 다르다.
규모가 커질수록 중복 된 코드를 줄이는 것이 유지 보수면에서 효율성이 좋고 가독성면에서도 훨씬 효과적이다.
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] Grid(그리드) (0) | 2020.12.01 |
|---|---|
| [CSS] 박스모델 (0) | 2020.11.25 |
| [CSS] 선택자들 (0) | 2020.11.21 |
| [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성) (0) | 2020.11.20 |
| [CSS] CSS의 기본 문법 (0) | 2020.11.20 |
CSS의 등장 전
- HTML의 등장(1991년)
웹의 나오면서 전자문서를 작성하기 위한 HTML이 만들어졌다.
HTML으로 작성 된 전자문서(정보)를 인터넷으로 통해 누구에가 전달 할 수 있다는 것은 당시에 혁명적인 일이였다.
그러나 HTML으로만 문서를 작성하기엔 한계점들이 있었다. 문서에 디자인적 측면이 부족하다는 것이였다. 디자인적 측면은 사용자가 문서를 얼마나 가독성 있게 읽을 수 있느냐가 달린 문제였다.
- HTML의 한계점
전자문서를 예쁘게 꾸미지 못한다. - 글꼴변경, 글꼴색상, 가운데정렬, 배경 이미지 삽입 등등
CSS 등장
HTML의 한계 극복 방법
1. HTML 언어에 디자인태그 추가하기. (쉽지만 한계점이 있는 방법)
<font></font> 태그 추가
- <font color="red">글씨 색을 바꾸고 싶은 부분</font>
- 다른 태그들과의 차이점 :
다른 태그들은 웹문서의 정보(단락, 목차, 제목 등)를 나타낸다. 정보를 해석해서 검색엔진 같은 시스템들이 사용자들이 필요한 정보를 찾아주는 것이다. 그러나 <font>태그는 오직 디자인적인 역할만을 할 뿐 웹의 정보를 담고 있지 않다.(예를 들어 시각장애인 분들이 봤을 때 의미 없는 것들은 정보가 아니다.)
- 디자인태그 추가하기의 한계점 :
정보태그와 디자인태그가 섞이면서 웹페이지의 중요한 특성인 정보로서의 가치가 떨어지는 문제점이 생겼다.
글씨를 바꾸고 싶은 부분이 많아 질 수록 같은 코드를 여러번 작성해야 하고 수정시에도 하나하나 직접 바꿔줘야 한다는 문제점도 있다.
2. 새로운 언어 CSS 만들기. (어렵지만 근본적인 해결책)
<style></style>
- CSS는 HTML과 다른 언어다. 그래서 웹이 CSS의 문법으로 읽기 원하면 웹에게 CSS언어로 읽으라고 알려줘야 한다. 이 때 웹은 기본적으로 문서를 HTML의 문법으로 읽기 때문에 HTML의 문법으로 CSS언어로 읽으라고 알려줘야 한다.
- CSS가 font태그보다 좋은 이유
<body>
<h1><a href="index.html"><font color="red">CSS공부시작</font></a></h1>
<ul>
<li><a href="1.html"><a href="index.html">HTML의 한계점</font></a></li>
<li><a href="2.html"><a href="index.html">CSS 등장</a></font></li>
<li><a href="3.html"><a href="index.html">CSS의 장점</a></font></li>
</ul>
</body><head>
<style>
a {
color:red;
}
</style>
</head>
<body>
<h1><a href="index.html">CSS공부시작</a></h1>
<ul>
<li><a href="1.html">HTML의 한계점</a></li>
<li><a href="2.html">CSS 등장</a></li>
<li><a href="3.html">CSS의 장점</a></li>
</ul>
</body>위의 두 코드는 결과 값이 같아도 효율적 측면이 다르다.
규모가 커질수록 중복 된 코드를 줄이는 것이 유지 보수면에서 효율성이 좋고 가독성면에서도 훨씬 효과적이다.
'프로그래밍언어 > CSS' 카테고리의 다른 글
| [CSS] Grid(그리드) (0) | 2020.12.01 |
|---|---|
| [CSS] 박스모델 (0) | 2020.11.25 |
| [CSS] 선택자들 (0) | 2020.11.21 |
| [CSS] Property(속성) 검색 하는 법(+폰트 크기 속성, 글 정렬 속성) (0) | 2020.11.20 |
| [CSS] CSS의 기본 문법 (0) | 2020.11.20 |
