[css] 그리드(grid), div, span

뉴비뉴

Web/CSS

[css] 그리드(grid), div, span

뉴비뉴 2019. 1. 29.

grid



<!doctype html>

<html>

<head>

  <title>WEB - CSS</title>

  <meta charset="utf-8">

  <style>


    #active {

      color:red;

    }

    .saw {

      color:gray;

    }

    h1 {

      font-size:45px;

      text-align: center;

      border-bottom:1px solid grey;

      margin:0;

      padding:20px;

    }

    ol {

      border-right:1px solid grey;

      width:100px;

      margin:0;

      padding:20px;

    }

    body{

      margin:0;

    }

    a {

      color:red;

      text-decoration: none;

    }

    #grid{

      display: grid;

      grid-template-columns: 150px 1fr;

    }

  </style>

</head>

<body>

  <h1><a href="index.html">WEB</a></h1>

  <div id="grid">

  <ol>

    <li><a href="1.html" class="saw">HTML</a></li>

    <li><a href="2.html" class="saw" id="active">CSS</a></li>

    <li><a href="3.html">JavaScript</a></li>

  </ol>

  <div>

    <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>



위 처럼 나누고 싶은 것들을 div 태그 안에 넣어두고 아이디명을 그리드로 설정해준다.

위에 색깔로 표시 된 부분을 보면 ol 과 div 태그 두 개로 나눠진 것을 볼 수 있다.

그리고 #grid로 그리드를 따로 설정해준다.

display: grid;

grid-template-columns: 150px 1fr; 

150px은 ol 를 가르키고, 1fr는 div를 가르킨다.

fr은 화면을 자동으로 나눠주는 것이다, 화면의 크기를 줄였다 늘렸다, 내용의 추가가 있다고해도 알아서 자동으로 설정 된 값에 맞게

칸의 크기를 조절한다.



<과정>



<결과>






<div>, <span>


디자인을 하기 위해서 어떠한 의미가 없는 태그를 사용해야 할 때가 있다.


그럴 때 사용하라고 존재하는 것 


<div> 태그: blcok

<span> 태그: inline




'Web > CSS' 카테고리의 다른 글

CSS Layout(float, overflow) 실습  (0) 2019.06.13
[css] 미디어 쿼리, @media, 조건문?  (0) 2019.01.31
[css] 박스 모델, 중복의 제거, display:inline, block  (0) 2019.01.29
[css] HTML 과 CSS 구분  (0) 2019.01.23
[css] 서브메뉴 만들기  (0) 2019.01.23

댓글

💲 추천 글

티스토리툴바