TIL-CSS(grid)

8127 단어 gridCSSCSS

22.04.19

⚾ 그리드란?

🎲 그리드는 수평선과 교차해서 이루어진 집합체입니다. 하나의 집합체는 새로 열을 그리고 다른 하나는 가로 행을 정의합니다. 각 요소는 이러한 열과 행으로된 라인을 따라 생성된 그리드에 배치할 수 있습니다.

<<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tittle></tittle>
<style>
    div{
        border:5px solid gray;
    }
</style>
</head>
<body>
        <div>NAVIGATION</div>
        <div>article</div>
</div>
</body>
</html>

🎲 이런 코드를 작성했을 때, 웹페이지에는 이러한 출력이 나타납니다.

🎲 여기에서 만약 레이아웃을 세로 나열이 아닌 가로 나열을 바꾸고 싶다면 아이디 그리드엔 대한 스타일을 지정합니다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<tittle></tittle>
<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>

🎲 요소를 어떻게 보여줄지를 나타내는 속성이 display이다. 여기에서 속성을 display, 값을 grid로 한다면 세로로 나열되었던 박스들이 가로로 배열됨을 알 수 있다.

🎲 위는 왼쪽 columns의 부피가 150px,오른쪽 columns은 나머지를 모두 차지한다는 뜻으로 의미합니다.

🎲 이때, 화면을 크게하거나 줄여도 왼쪽 columns의 부피는 150px로 유지가 되고 오른쪽은 크기가 조절됩니다. 만약 이를 1fr로 바꾸면 전체화면의 크기를 2라고 했을 때 1:1의 비율로 화면의 크기에 따라 부피가 조절된다는 것을 알 수 있습니다.
만약, 박스안의 텍스트가 늘어나도 크기는 자동으로 조절이 됩니다.

플러터 Typography 와 Layout 만드는법
플러터 기본 위젯 넣는 법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage