티스토리 뷰

웹/HTML, CSS

[CSS]그리드

cll179 2018. 1. 23. 13:58

그리드

- display : gird로 선언한다.

- gird-template-columns로 열(column)을 정의, grid-template-rows로 행을 정의한다. 

- '숫자'px은 고정크기, '숫자'fr은 일정 비율로 크기를 지정한다.

- <div></div> : block level element, 오로지 디자인 용도로만 쓰이는 특별한 의미없는 태그, 이 태그를 이용해 부모-자식관계의 코드를 만들어 디자인한다.
- <span></span> : inline element, <div>와 상동

ex)

<!DOCTYPE html>
<html>
<head>
    <meta charset = "utf-8">
    <title></title>
    <style>
    #grid{
        border : 5px solid pink;
        display : grid;
        grid-template-columns: 2fr 1fr;
    }
    div {
        border:5px solid gray;
    }
    </style>
</head>
<body>
    <div id = "grid">
     <div>NAVIGATION</div>
     <div>
         내용물
     </div>
    </div>
</body>
</html>

 

- caniuse사이트를 이용, 통계에 따른 학습하기 : https://caniuse.com/

 

 

<전체 코드>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html>
<head>
  <style>
    body{
      margin : 0;
    }
    h1{
      text-align : center;
      border-bottom : 1px solid gray;
      margin : 0;
      padding : 20px;
    }
    a{
      color : gray;
      text-decoration: none;
    }
    ol{/*ol 태그는 block level element 
        width 지정*/
      border-right : 1px solid gray;
      width : 100px;
      margin :0;
      padding : 20px;
    }
    #grid{
      display: grid;
      grid-template-columns: 150px 1fr;
    }
    #grid ol{/*아이디 grid 밑에있는 ol의 스타일 지정*/
      padding-left : 33px;
    }
    #article{
      padding-left : 25px;
    }
  </style>
  <title>WEB1 - CSS</title>
  <meta charset="utf-8">
</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>
  <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.[2]
 
CSS is designed primarily to enable the separation of presentation and content, including aspects such as the layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple HTML pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
 
Separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. It can also display the web page differently depending on the screen size or viewing device. Readers can also specify a different style sheet, such as a CSS file stored on their own computer, to override the one the author specified.
  </p>
  </div>
  </div>
</body>
<html>
 
 cs

 

<실행 결과>

※

해당 게시물은 '생활코딩'에서 진행하는 코딩야학 3기 수강 내용을 정리한 내용입니다.


본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.

※

저작자표시 비영리 변경금지

'웹 > HTML, CSS' 카테고리의 다른 글

[HTML,CSS]float 레이아웃  (0) 2018.05.22
[CSS]미디어 쿼리  (0) 2018.01.23
[CSS]박스 모델  (0) 2018.01.22
[HTML/CSS]CSS 문법, 선택자  (0) 2018.01.08
HTML 문법, 자주쓰는 태그  (0) 2017.12.31
댓글