font 테그 추가로 진행 = CSS의 등장 이전 상황
-> 만약 100억개의 테그를 수정해야 하는 일이 있다면? 매우 곤란해짐
-> 그래서 다음 챕터에서 CSS를 이용한 수 많은 불편함을 해결하는 방법이 등장함
web에 대한 정보는 HTML의 테그와 속성이 담고 있다.
그렇다면 CSS는 무엇을 의미할까?
CSS 자체는 web에 대한 정보는 전혀 가지고 있지 않으며 디자인을 나타내고 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <style>
a {
color: red;
}
</style>
-->
<title>우리누리의 축제정보</title>
<body>
<h1> <a href="home.html">우리누리 축제정보</a> </h1>
<ol>
<li><a href="소개.html">소개</a></li>
<li><a href="검색.html">검색</a></li>
<li><a href="캘린더.html">캘린더</a></li>
</ol>
<!--
<h1> <a href="home.html"><font color = "red">우리누리 축제정보</font></a> </h1>
<ol>
<li><a href="소개.html"><font color = "red">소개</font></a></li>
<li><a href="검색.html"><font color = "red">검색</font></a></li>
<li><a href="캘린더.html"><font color = "red">캘린더</font></a></li>
</ol>
-->
<h2>Fetival</h2>
<img src="C:\Users\Yeomyaloo\Desktop\Programming\Web\캡스톤디자인\이미지\festival.jpg" width="100%">
</body>
주석처리를 한 것들이 똑같은 디자인을 나타낼 수 있게 한 것이다
위의 주석은 CSS를 통해 디자인을 넣은 코드이고
아래의 주석은 HTML 테그인 font 테그를 이용해서 디자인을 넣은 코드이다.
'WEB > HTML+CSS(Front-end)' 카테고리의 다른 글
| CSS - CSS의 속성 알아내기 (부제: 속성을 알아내서 우리가 스스로 웹페이지를 꾸며보자) (0) | 2021.05.12 |
|---|---|
| CSS - CSS의 기본문법(부제: CSS의 기본적 문법과 CSS 적용 방법을 알아보자) (0) | 2021.05.10 |
| HTML - 태그의 제왕(부제: 링크를 알아보자 <a>) (0) | 2021.05.05 |
| HTML - 문서의 구조 (부제: 태그의 슈퍼스타들을 알아보자) (0) | 2021.05.05 |
| HTML - 부모자식과 목록 (부제: 목차를 만들며 부모자식 관계를 알아보자) (0) | 2021.05.05 |