＊반짝이는＊이끌림

[생활코딩] WEB2(CSS_05) 그리드 본문

Computer/Web

[생활코딩] WEB2(CSS_05) 그리드

2kkeullim 2020. 4. 22. 21:49

* Windows 운영체제 기준으로 작성되었습니다.

* vs code editor를 사용합니다.

 

§ 그리드 → Click!

 

그리드를 공부하기 전에, html을 새로 만들어줍시다. navigation과 article, 두 가지 단어를 나란히 배치해주기 위해 단어들을 각각 태그를 이용해 묶어주어야 합니다. 우리가 지금까지 배운 태그들은 의미가 있는 태그들이므로, 아무거나 사용할 수는 없습니다. 이렇게 아무 의미가 없는 경우지만 태그로 묶어주어야 할 때에는 <div> 태그 혹은 <span> 태그를 사용합니다. <div> 태그는 block line element로서 한 줄 전체를 차지하며, <span> 태그는 inline element로서 해당 텍스트만큼만 차지합니다. 지금은 <div> 태그를 써 봅시다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
    	border: 5px solid gray;
    </style>
    
    <body>
        <div>NAVIGATION</div>
        <div>ARTICLE</div>
    </body>
</html>

그리드를 공부하기 위해서는, 각각의 태그의 부피감을 확실하게 알 필요가 있으므로, <style> 태그를 통해 속성을 변경해줄게요. div라는 selector에 border 속성을 주겠습니다.

navigation과 article을 나란히 놓기 위해서 그리드를 사용해보겠습니다. 그리드를 사용하기 위해서는 두 개의 태그를 감싸는 부모 태그가 필요합니다. 부모 태그로는 똑같이 <div> 태그를 사용할 것이며, grid라는 id값을 주겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
        #grid {
            border: 5px solid pink;    
        }

        div {
            border: 5px solid gray;
        }
    </style>

    <body>
        <div id = "grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>
    </body>
</html>

 

<style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;    
        }

        div {
            border: 5px solid gray;
        }
</style>

<style> 태그의 안쪽을 이렇게 바꿔주면

 

이렇게 변하는 모습을 볼 수 있습니다. grid를 사용했으며, 150px로 왼쪽의 navigation을 고정해주고, 남은 부분은 전부 article이 차지하도록 해주었으므로, 웹 페이지의 가로 사이즈를 변화시킬 때, 왼쪽의 navigation은 변화가 없이 고정된 150px의 값을 가지지만, 오른쪽의 article이 있는 부분은 유동적으로 변하는 모습을 볼 수 있습니다. 여기서 fr이 무엇인지 설명해드리기 위해 예시를 가져와봤습니다.

<!DOCTYPE html>
<html>
    <head>
        <title>grid</title>
        <meta charset="utf-8">
    </head>
    
    <style>
        #grid {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 150px 1fr;
            margin:20px;    
        }

        #grid2 {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 1fr 1fr;    
            margin:20px;
        }

        #grid3 {
            border: 5px solid pink;
            display: grid;
            grid-template-columns: 2fr 1fr;    
            margin:20px;
        }


        div {
            border: 5px solid gray;
        }
    </style>

    <body>
        <div id = "grid">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

        <div id = "grid2">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

        <div id = "grid3">
            <div>NAVIGATION</div>
            <div>ARTICLE</div>
        </div>

    </body>
</html>

그리드를 3개 만들고, grid는 150px, 1fr, grid2는 1fr, 1fr, grid3는 2fr, 1fr의 값을 주었습니다. 그리고 3개의 구분을 명확히 하기 위해 margin값을 20px씩 주었습니다.

차이가 보이시나요?? 일단 150px로 크기를 지정해주는 경우 웹페이지의 사이즈의 변화와 상관없이 일정한 크기를 가지게 되고, 남은 부분을 2fr이 차지하게 됩니다. 두 번째 경우 1fr 1fr을 주었으므로 전체 사이즈를 1/2씩 나눠 갖는 형태를 보입니다. 마지막 경우는 2fr 1fr으로 각각 2/3, 1/3의 비율로 나뉘게 됩니다.

 

grid를 사용하면 좋은 점은, 텍스트가 많아질 때 자동으로 크기가 커지게 됩니다. 사진으로 보여드리겠습니다.

이런식으로 오른쪽의 텍스트가 많아졌고, 아무런 조치를 취해주지 않았음에도 알아서 그리드의 크기가 늘어난 것을 볼 수 있습니다.

 

이제 그리드를 배워보았으니 아까 만들었던 예제 2번 웹 페이지를 그리드를 이용해 수정해봅시다.

<!DOCTYPE html>
<html>
    <head>
        <title>web2 실습용 파일</title>
        <meta charset="utf-8">
    </head>

    <body>
        <style>
            h1 { 
                text-align: center;
                font-size: 60px;
                border-bottom:3px black solid;
                padding:20px;
                margin:0px;
            }
            .list {
                text-decoration: none;
                font-size: 30px;

            }
            #grid {
                display: grid;
                grid-template-columns: 220px 1fr;
            }
            #article {
                padding:20px;
            }
            #grid ol {
                border-right: 3px black solid;
                width:150px;
                margin:0;
                padding-left:50px;
                padding-top: 20px;
            }
        </style>
        <h1>WEB2</h1>
        <div id = "grid">
            <ol>
                <li><a href="1.html" class ="list">HTML</a></li>
                <li><a href="1.html" class ="list">CSS</a></li>
                <li><a href="1.html" class ="list">JavaScript</a></li>
            </ol>
            <div id="article">
                <h2>CSS</h2>
                <p>
                    Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
                    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를 사용하였고, id 값으로 grid를 주었습니다. 또한 그리드를 사용할 때, 두 개의 부분으로 나눌 것이기 때문에 태그도 크게 두 개로 묶어주었습니다. 원래 있던 <ol> 태그 부분은 그대로 사용하고, <h2> 태그와 <p> 태그로 구성된 본문 부분을 그리드에 넣어주기 위해 <div> 태그로 묶어주었습니다.

그리드를 사용하니 훨씬 깔끔하게 정리되는 것 같습니다^^

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

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

[생활코딩] WEB2(CSS_07) CSS 코드의 재사용  (0) 2020.04.23
[생활코딩] WEB2(CSS_06) 반응형 디자인과 미디어 쿼리 소개  (0) 2020.04.23
[생활코딩] WEB2(CSS_04) 박스모델  (0) 2020.04.22
[생활코딩] WEB2(CSS_03) CSS 선택자  (0) 2020.04.21
[생활코딩] WEB2(CSS_02) CSS 속성  (0) 2020.04.21
'Computer/Web' Related Articles more
Comments