오뚝이개발자

[CSS] CSS 기초 5(div, span, 그리드) 본문

Front-end/CSS

[CSS] CSS 기초 5(div, span, 그리드)

땅어 2020. 7. 8. 18:03
728x90
300x250

위 사진에서 CSS에 대해 설명하는 글을 우측의 공간에 넣으려면 어떻게 해야 할까? 이럴 때 사용하는 것이 바로 grid라는 CSS의 최신기술이다.

 

div, span 태그

웹을 만들다보면 디자인을 위해 의미없는 태그를 사용해야 하는 때가 있다. 이 때 사용하는 것이 <div>와 <span>이라는 태그이다. <div>는 block level element, <span>은 inline element이다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>NAVIGATION</div> 
    <div>ARTICLE</div>
</body>
</html>

<div> 태그 사용

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <span>NAVIGATION</span> 
    <span>ARTICLE</span>
</body>
</html>

<span> 태그 사용

 

그리드(grid)

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

위와 같이 div를 div 부모 태그로 한 번 더 감싸주고, grid라는 id를 준다. 그 후, display 속성을 grid로 선택한 뒤 grid-template을 선택해주면 된다. 여기서 grid-template은 어떻게 배치할 것인지를 나타낸다. grid-template-columns는 grid로 묶인 친구들을 column으로, grid-template-rows는 row로 배치해준다. 이 때, 속성값 150px 1fr은 차지하는 공간의 비율을 나타낸다. 1fr이라는 것은 NAVIGATION이 150px을 차지하고 남는 공간을 모두 ARTICLE이 차지하도록 한다는 것이다. 2fr 1fr와 같이 사용하면 2:1의 비율로 공간을 분할하도록 할 수 있다.

아래 사진을 보면 회색 경계선이 div를, 분홍색 경계선이 grid를 나타낸다.

grid-template-columns 사용
grid-template-rows 사용

 

실습

그럼 초반에 제시한 문제를 배운내용을 통해 해결해보자.

<!doctype html>
<html>
<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-171104859-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-171104859-1');
    </script>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
    <style>
        a {
            color:orange;
            text-decoration: none;
        }
        h1 {
            font-size: 45px;
            text-align: center;
            border-bottom:1px solid gray;
            margin:0px;
            padding:20px;
        }
        ol{
            border-right: 1px solid gray;
            width:100px;
            padding:20px;
            margin:0px;
        }
        body{
            margin:0px;
        }
        #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="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 like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2]

                CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web 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 also makes it feasible 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. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4]
                
                The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.
                
                The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.[5]
                
                In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
            </p>
        </div>
    </div>
</body>
</html>

위의 코드에서 <ol>과 <h2><p>태그로 묶인 부분이 서로 grid-template-columns 속성으로 배치되면 된다. 따라서 위와 같이 <div>태그를 추가해주고 style 속성을 주면 된다. 짜잔!!!

paddig-left를 통해 적절하게 공간도 조절해주었다. 이 때, style 태그 내에서 #grid ol이라는 선택자를 사용하였는데 이는 모든 ol태그가 아니라 gird 밑에 ol이라는 태그를 특정하여 지칭하는 것이다.

참고로 caniuse라는 웹사이트에 들어가 검색어에 grid를 입력하면 해당 기능을 사용할 수 있는 웹 브라우저의 종류와 버전들을 알려준다. 매우 중요한 부분이니 추후 특정 기능을 사용할 때 해당 브라우저가 그 기능을 지원하는지 알아볼 때 사용하도록 하자.

caniuse에서 grid를 검색한 결과

728x90
300x250
저작자표시

'Front-end > CSS' 카테고리의 다른 글

[CSS] CSS 기초 7(CSS 코드의 재사용)  (0) 2020.07.10
[CSS] CSS 기초 6(미디어 쿼리)  (0) 2020.07.10
[CSS] CSS 기초 4(경계선, 박스모델 조절)  (0) 2020.07.08
[CSS] CSS 기초3(CSS 박스 모델)  (0) 2020.07.06
[CSS] CSS 기초2  (0) 2020.07.06
'Front-end/CSS' Related Articles more
Comments