[Web] CSS

in Backend on Web


CSS도 공부했지만,,, 새로 시작하는 마음으로 또 다시 정리하기,, 이번에는 정말 블로그에 기록하고 까먹지 않게 찾아볼 수 있도록 해야지. 이번 정리도 생활코딩 CSS강의를 기반으로 정리했다.

CSS

Tag

  • style
    • html에서 <head>안에 넣어주면 되는 것으로, <body>에서 등록한 태그들 각각에 유저가 보기 좋게 꾸며주기(?)가 가능한 태그
    • 여기에서 각각의 태그들에 대해서 글자 색(color), 글자 크기(font-size), 정렬 방법(text-alian) 등을 설정할 수 있다.
    • 아래는 이러한 것을 적용한 style 태그의 한 부분
      <style>
      body{
          margin: 0;
      }
      a{
          color: black;
          text-decoration: none;
      }
      h1 {
          font-size: 45px;
          text-align: center;
          border-bottom: 1px solid gray;
          margin: 0;
          padding: 15px;
      }
      ol{
          border-right: 1px solid gray;
          width: 120px;
          margin: 0;
          padding: 10px;
      }
      #grid{
          display: grid;
          grid-template-columns: 150px 1fr;
      }
      #grid ol{
          padding-left: 33px;
      }
      #grid #article{
          padding-left: 25px;
      }

      @media(max-width:800px){
          #grid{
              display: block;
          }
          ol{
              border-right: none;
          }
          h1{
              border-bottom: none;
          }
      }
  </style>

    그리고 아래는 body 부분

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

          <div id="article">
              <h2>What is Web?</h2>
      <p>
          Internet guides. Wikipedia articles should not exist only to describe the nature, appearance or services a website offers, but should also describe the site in an encyclopedic manner, offering detail on a website's achievements, impact or historical significance, which can be kept significantly more up-to-date than most reference sources, since editors can incorporate new developments and facts as they are made known. See the Current events portal for examples.
      </p>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/OAqcrvZ58wA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
          </div>
      </div>
  </body>