먼지나는 블로그

css 속성 알아보기 본문

프론트엔드 공부/css

css 속성 알아보기

고먼지 2021. 6. 30. 00:13

1. css 속성 알아내기

<!doctype html>
<html>
<head>
  <title>WEB2 - CSS</title>
  <meta charset="utf-8">
  <style>
  a {
    color:black;
    text-decoration:  none;
  }
  h1 {
    font-size: 45px;
    text-align: center;
  }
  </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>

 

css text size property 검색을 통해 font-size를 알아냈다

https://www.w3schools.com/cssref/pr_font_font-size.asp

 

CSS font-size property

CSS font-size Property Example Set the font size for different elements: div.a {   font-size: 15px; } div.b {   font-size: large; } div.c {   font-size: 150%; } Try it Yourself » Definition and Usage The font-size property sets the size of a font. Defa

www.w3schools.com

 

 

2. css 선택자

<!doctype html>
<html>
<head>
  <title>WEB2 - CSS</title>
  <meta charset="utf-8">
  <style>
  a {
    color:black;
    text-decoration:  none;
  }
  .saw {
    color:gray;
  }
  h1 {
    font-size: 45px;
    text-align: center;
  }
  </style>

</head>
<body>
  <h1><a href="index.html" >WEB</a></h1>
  <ol>
    <li><a href="1.html" class="saw">HTML</a></li>
    <li><a href="2.html" class="saw">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>

 

saw라는 태그를 만들어 이미 방문한 사이트는 회색으로 보이도록 했다

클래스 값이 saw인 태그를 찾기 위해서 써야하는 것이 바로 . 이다

 

.saw .을 붙이는 순간 웹페이지 내에 있는 모든 saw태그를 가리키는 선택자가 된다

 

<style>
  a {
    color:black;
    text-decoration:  none;
  }
  .saw {
    color:gray;
  }
  .active{
    color:red;
  }
  h1 {
    font-size: 45px;
    text-align: center;
  }
  </style>

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

 

이때 CSS라는 문자만 빨간색으로 표현하고 싶어 active 태그를 추가해봤다

웹페이즈를 리로드 해보면 정상적으로 CSS문자만 빨간색으로 표시되는데

만약 active와 saw 선택자의 순서가 바뀌게 된다면?

 

가장 마지막에 선언된 saw선택자에 의해 CSS문자는

다른문자와 마찬가지로 회색으로 변하게 된다

 

<style>
  a {
    color:black;
    text-decoration:  none;
  }
  #active{
    color:red;
  }
  .saw {
    color:gray;
  }
  h1 {
    font-size: 45px;
    text-align: center;
  }
  </style>

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

 

우선순위가 같은 선택자를 사용하기 위해선 순서가 중요해진다

그래서 좀 더 우선순위가 높은 태그를 사용할 필요가 있다

 

이때 등장하는 것이 바로 id이다

id값이 active인 id 선택자를 통해 CSS문자의 색깔이

빨간색으로 바뀌는 모습을 볼 수 있다

 

(saw태그완 다르게 .이 아닌 #을 붙여주면 된다)

 

 

태그선택자와 클래스 선택자, id 선택자가 존재할 때

id 선택자 > 클래스 선택자 > 태그선택자 순으로 강하다

 

도대체 왜?

 

id 값이 active인 태그가 한번 등장하게 되면

다시는 같은 값을 사용해선 안된다

 

즉, id의 값은 단 한번만 등장해야된다는 것을 알 수 있다

이와 달리 태그 선택자는 해당되는 모든 태그들을 가리키기 때문에

좀더 포괄적이고 id선택자는 구체적이라 볼 수 있다

 

결과적으로 좀 더 구체적인 것이 포괄적인 것보다

우선순위가 높다는 것이다

 

그로 인해 전체적인 태그의 디자인은 태그선택자를 통해

디자인한 후 그 외에 세부적으로 디자인해야 할 부분은

id 선택자를 통해 예외를 두는 것이 훨씬 효율적이라 볼 수 있다

 

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

CSS 박스모델  (0) 2021.07.01
생활코딩 WEB2 - CSS  (0) 2021.06.27
'프론트엔드 공부/css' Related Articles more