In this post, 03 CSS lecture is introuduced.

Grid

이전 css-02 에서 마지막에 웹 페이지의 본문을 목차 옆에 배치하는 방법을 알아보고자 한다.

• CSS 디자인만을 위해서 실질적 의미를 가지지 않고 감싸주는 역할 만을 하는 tag로 block level element 로써 div tag가 존재하고 inline element 로써 span tag 가 존재한다.

• 두 tag를 나란히 배치하고 싶다면 부모 tag로 이들 tag를 감싼다. div tag의 display를 grid로 설정하고, 두 tag를 한 열에 나란히 배치하고 싶으면 grid-template-colums 속성을 설정한다. 이 때, 아래 처럼 적으면 첫 번째 tag는 고정 길이를 가지고, 두 번째 tag 의 길이는 화면의 크기에 따라 조정되는 반면 2fr 1fr; 처럼 적으면 2:1의 비율로 나눠 가지게 된다.

  <!doctype html>
  <html>
  <head>
      <title>Grid</title>
      <meta charset="utf-8">
      <style>
          div {
              border: 5px gray solid;
              display: grid;
              grid-template-columns: 150px 1fr;
          }
          #grid {
              border: 5px pink solid;
          }
      </style>
  </head>
    
  <body>
      <div id="grid">
          <div>Navivagtion</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
      </div>
        
  </body>
  </html>
  

• 아래처럼 #grid ol 이라 적으면 ol tag 중 부모 tag의 id가 grid인 것들만 선택된다.

  <!doctype html>
  <html>
  <head>
      <title>WEB1 - html</title>
      <meta charset="utf-8">  
    
      <style>
          a {
              color: black;
              text-decoration:none;
          }
          h1 {
              font-size: 45px;
              text-align: center;
              border-bottom: 1px solid gray;
              margin: 0;
              padding: 20px;
          }
          #grid ol {
              border-right: 1px solid gray;
              width: 100px;
              margin: 0px;
              padding-left: 33px;
          }
    
          body{
              margin: 0px;
          }
    
          #grid {
              display: grid;
              grid-template-columns: 150px 1fr;
          }
          #article {
              padding-left: 25px;
          }
      </style>
  </head>
    
  <body>
      <h1><a href="index.html">WEB</a></h1>
    
      <div id="grid">
          <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>
          <div id="article">
              <h2> CSS</h2>
              I'm <u>studying</u> <strong>CSS</strong>.<br>
              Visit <a href="https://www.w3.org/Style/CSS/Overview.en.html">HERE</a> if you want to see the official document of CSS.
              <img src="coding.jpg" width="100%">
          </div>
      </div>
        
  </body>
  </html>
  

CanIUse

grid 는 최신 CSS 기술이다.

https://caniuse.com 에 접속하면 여러 HTML, CSS, JS 기술들 중에서 현재 웹 브라우저들이 얼마나 그 기술들을 채택하고 있는지에 대한 통계를 볼 수 있다.