seoyoung.dev

[CSS] 그리드 본문

WEB/HTML&CSS

[CSS] 그리드

seo-0 2019. 9. 3. 15:08 
  <div id="grid">
        <ol>
          <li><a href="html.html"class="saw">HTML</a></li>
          <li><a href="css.html" class="saw" id="active"> css</a></li>
          <li><a href="js.html">  js </a></li>
        </ol>

      <div id="article">
        <h2>CSS</h2>
          <p>
            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
          </p>
        </div>
  </div>

id값으로 grid를 갖는 div  -> ol & article 

    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr
      
    }
    #grid ol{
      padding-left:33px;
    }
    #article{
      padding-left:25px;
    }
  • grid-template-columns : 150px 1fr  /* 150px : ol , 1fr : article */
  • grid 태그 밑에 있는 ol -> #grid ol : 부모가 grid 인 ol을 선택 가능

 

# 전체 소스 코드

...더보기 
<!doctype html>
<html>
<head>
  <title>WEB1 - css </title>
  <meta charset = "utf-8">
  <style>
    a {
      text-decoration: none;
      color : black;
    }
    body{
      margin:0;
    }
    h1{
      font-size : 50px;
      text-align : center;
      border-bottom : 1px solid gray;
      margin:0;
      padding:10px;
    }
    ol{
      border-right:1px solid gray;
      width:100px;
      margin:0;
      padding:20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr
      
    }
    #grid ol{
      padding-left:33px;
    }
    #article{
      padding-left:25px;
    }
  </style>
</head>

<body>
  <h1> <a href="index.html" >WEB </a></h1>
  <div id="grid">
        <ol>
          <li><a href="html.html"class="saw">HTML</a></li>
          <li><a href="css.html" class="saw" id="active"> css</a></li>
          <li><a href="js.html">  js </a></li>
        </ol>

      <div id="article">
        <h2>CSS</h2>
          <p>
            Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
          </p>
        </div>
  </div>
</body>
</html>

 

https://opentutorials.org/course/3086/18322

 

그리드 - 생활코딩

그리드의 기본 사용법 강의 caniuse 홈페이지   소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid 

opentutorials.org

 

'WEB > HTML&CSS' 카테고리의 다른 글

[CSS]Selector/Font/Element 배치  (0) 2019.09.03
[CSS]반응형 디자인  (0) 2019.09.03
'WEB/HTML&CSS' Related Articles more