WEB/HTML+CSS(Front-end)

CSS - CSS의 시작 (부제: HTML과 CSS의 사용 차이법을 알아보자)

얄루몬 2021. 5. 10. 19:35



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 테그를 이용해서 디자인을 넣은 코드이다.