먼지나는 블로그

생활코딩 WEB2 - CSS 본문

프론트엔드 공부/css

생활코딩 WEB2 - CSS

고먼지 2021. 6. 27. 22:57

1. CSS 등장 이전

<h1><a href="index.html"><font color = "red">WEB</font></a></h1>
  <ol>
    <li><a href="1.html"><font color = "red">HTML</font></a></li>
    <li><a href="2.html"><font color = "red">CSS</font></a></li>
    <li><a href="3.html"><font color = "red">JavaScript</font></a></li>
  </ol>

과거 CSS 언어가 생기기 전 더 쉬운 방법을 선호하던 사람들은

새로운 언어를 만드는 것이 아닌 html에 새롭게 디자인 태그를 추가했다

현재 전혀 쓰이지 않는 태그이기에 기억할 필요는 없지만 알아만 두자

 

<h1><a href="index.html"><font color = "red">WEB</font></a></h1>

 

<a>태그는 <font>태그와 달리 WEB이 링크임을 설명하는 정보

<h1>태그는 WEB이라는 문자가 페이지 내에서 제목임을 알수있는 정보

 

반면 <font>는 WEB에 대한 어떠한 정보도 갖고있지 않다

단순히 빨간색으로 표현해야하는 디자인적 요소를 갖고있을 뿐이다

 

디자인이 중요하지 않다기보단 디자인 자체를

정보로 볼 수 없다는 점에 유의해야 한다

 

2. CSS 등장

<!doctype html>
<html>
<head>
  <title>WEB2 - CSS</title>
  <meta charset="utf-8">
  <style>
  a {
    color:red;
  }
  </style>

</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html">CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

  <!--
  <h1><a href="index.html"><font color = "red">WEB</font></a></h1>
  <ol>
    <li><a href="1.html"><font color = "red">HTML</font></a></li>
    <li><a href="2.html"><font color = "red">CSS</font></a></li>
    <li><a href="3.html"><font color = "red">JavaScript</font></a></li>
  </ol>
-->

  <p>
    Cascading Style Sheets (CSS) is a style sheet language
    used for describing the presentation of a document
    written in a markup language such as HTML.
    CSS is a cornerstone technology of the World Wide Web,
    alongside HTML and JavaScript.
    CSS is designed to enable the separation of presentation
    and content, including layout, colors, and fonts.
    This separation can improve content accessibility,
    provide more flexibility and control in the specification
    of presentation characteristics, enable multiple web pages
    to share formatting by specifying the relevant CSS in a separate.</p>
    <p style="margin-top:45px;">
    css file which reduces complexity and repetition in the
    structural content as well as enabling the css file
    to be cached to improve the page load speed between
    the pages that share the file and its formatting.</p>

    <p>
      <div id="disqus_thread"></div>
      <script>
      /**
      *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
      *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
      /*
      var disqus_config = function () {
      this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
      this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };
      */
      (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = 'https://web1-uwrtt5hwxf.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
      })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>
    </p>

</body>
</html>

만약 font태그의 갯수가 10만개 이상일 경우 일일히 수정해주어야하는

문제점이 발생하게 된다 이때 이것을 한번에 수정할 수 있도록

도와주는 것이 바로 CSS 이다

 

<style> 태그 아래에 a { color:red }를 작성하고 나면

우리가 표현하고자 4줄에 추가했던 font태그를 사용하지 않고도

한줄로 컨트롤 할 수 있다는 장점이 드러난다

 

반면 줄마다 추가해야 하는 font 태그의 경우 추가해줘야 하는

코드가 늘어날 수록 웹페이지의 크기 또한 커지게 된다

 

규모가 커질수록 비효율적으로 느껴지게 되는것이다

이것이 바로 CSS가 탄생하게 된 배경이라고 할 수있다

 

 

3. CSS 기본문법

<!doctype html>
<html>
<head>
  <title>WEB2 - CSS</title>
  <meta charset="utf-8">
  <style>
  a {
    color:black;
  }
  </style>

</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <ol>
    <li><a href="1.html">HTML</a></li>
    <li><a href="2.html" style = "color:red" >CSS</a></li>
    <li><a href="3.html">JavaScript</a></li>
  </ol>

  <!--
  <h1><a href="index.html"><font color = "red">WEB</font></a></h1>
  <ol>
    <li><a href="1.html"><font color = "red">HTML</font></a></li>
    <li><a href="2.html"><font color = "red">CSS</font></a></li>
    <li><a href="3.html"><font color = "red">JavaScript</font></a></li>
  </ol>
-->

  <p>
    Cascading Style Sheets (CSS) is a style sheet language
    used for describing the presentation of a document
    written in a markup language such as HTML.
    CSS is a cornerstone technology of the World Wide Web,
    alongside HTML and JavaScript.
    CSS is designed to enable the separation of presentation
    and content, including layout, colors, and fonts.
    This separation can improve content accessibility,
    provide more flexibility and control in the specification
    of presentation characteristics, enable multiple web pages
    to share formatting by specifying the relevant CSS in a separate.</p>
    <p style="margin-top:45px;">
    css file which reduces complexity and repetition in the
    structural content as well as enabling the css file
    to be cached to improve the page load speed between
    the pages that share the file and its formatting.</p>

    <p>
      <div id="disqus_thread"></div>
      <script>
      /**
      *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
      *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
      /*
      var disqus_config = function () {
      this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
      this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };
      */
      (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = 'https://web1-uwrtt5hwxf.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
      })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
    </noscript>
    </p>

</body>
</html>

style 태그를 통해 a 태그안에 있는 내용들을 모두 빨간색으로 변경해주는 코드를 작성해봤다

하지만 이중에서 CSS라는 문자의 색깔만 바꾸고 싶을 경우엔 어떻게 해야할까

 

바로 해당 a 태그내에 직접 CSS코드를 넣는 방법이다

어떻게 보면 "color:red" 부분은 html의 속성이라고 볼 수 있지만

앞에 style속성을 붙임으로써 웹페이지는 css의 문법에 따라

해석해 도출한 결과를 해당 코드에 적용하게 된다

 

style 태그내에 a태그 내용을 모두 바꾸는 경우엔

효과만 적혀있을 뿐 어떤 대상에게 지정됐는지 알 수 없기에

{ } 중괄호 부분, 즉 선택자가 필요하다

 

 

'프론트엔드 공부 > css' 카테고리의 다른 글

CSS 박스모델  (0) 2021.07.01
css 속성 알아보기  (0) 2021.06.30
'프론트엔드 공부/css' Related Articles more