나의 발자취

[CSS]CSS selector 본문

Frontend/HTML,CSS, , UI,UX

[CSS]CSS selector

달모드 2020. 11. 4. 13:12

#id, .class, ... 등등

불필요한 중복을 줄이고 작성하는 코드의 양을 줄일 수 ㅣㅇㅆ다.

<!doctype html>
<html>
<head>
    <title>WEBpage front</title>
    <meta charset="utf-8">
    <style>
        a { 
            color:black;
            text-decoration: none;
        }

        #active{
            color : red;
        }
        .saw{
            color:grey;
        }  

        h1{
            font-size: 40px;
            text-align: center;
        }
    </style>

</head>


<body>

    <h1><a href="index.html">WEB</font></a></h1>
    <ol>
      <li><a href="1.html"class = "saw" id="active">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>
        <h1>link for <a href = "https://www.naver.com/" target = "_blank" title="naver website">reference</a></h1>
        <iframe width="640" height="360" src="https://www.youtube.com/embed/7T7r_oSp0SE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    <h2>HTML</h2>
    <p>We need to buy some <strong>breads </strong> and... run errends etc
        <img src = "photo.jpeg" width = "100%">

        (function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://web1-2.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>

'Frontend > HTML,CSS, , UI,UX' 카테고리의 다른 글

[CSS] grid 기본 사용법  (0) 2020.11.04
[CSS] CSS box model  (0) 2020.11.04
[HTML/CSS]<style>tag, css적용, 주석<!-- 내용 -->  (0) 2020.11.04
웹페이지의 시초(화석)  (0) 2020.11.03
[HTML] 하이퍼링크, UTF-8, 기본태그 HTML, HEAD, BODY  (0) 2020.11.03
'Frontend/HTML,CSS, , UI,UX' Related Articles more
Comments