홍강zone

[CSS] 그리드(grid)의 기본 본문

CSS

[CSS] 그리드(grid)의 기본

홍강 2023. 3. 27. 00:28

문자에 테두리를 쓰고 나란히 배치하려면 각각 어떤 태그로 묶어줘야된다.

 

div태그는 block으로 적용되는 h1대신 쓸 수 있는 아무런 의미가 없이 단지 디자인의 용도로만 쓰는 태그이다. 화면 전체를 사용해 줄바꿈이 일어난다.

span은 inline으로 적용되는 태그이다.

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

이것을 나란히 하기 위해서 그리드(grid)를 사용해준다.

div태그의 부모태그를 만들어주고 id값을 설정해준뒤(id이름은 아무거나 넣는다) id의 스타일값을 지정해준다.

<style>
        #grid{
            border:5px solid pink;
        }
        
        div{
            border:5px solid gray;
        }
   </style>
    
   <div id="grid">
    <div>NAVIGATION</div> 
    <div>ARTICLE</div>
   </div>

display:grid; 를 설정해주고

grid-template-columns:값; 을 지정해주면 하나의 columns(단)의 크기를 설정할수있는데,

값에 첫번째단 두번째단의 크기를 순서대로 넣어주며

1fr 1fr로 한다면 두개는 같은 크기로 된다.

2fr 1fr로 한다면 첫번째것이 2/3크기가 된다.

<style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
        }
        
        div{
            border:5px solid gray;
        }
    </style>
    
    <div id="grid">
    <div>NAVIGATION</div> 
    <div>ARTICLE</div>
   </div>

caniuse.com 그리드를 최신에 사용할 수 있는지 볼 수 있는 사이트

 

저작자표시

'CSS' 카테고리의 다른 글

[CSS] 미디어 쿼리 기본  (0) 2023.03.27
[CSS] 그리드 사용하기  (0) 2023.03.27
[CSS] 박스 모델 block, inline / padding, margin, width  (0) 2023.03.26
[CSS] Tag와 .class선택자 #id선택자 우선순위  (0) 2023.03.26
[CSS] 모든 h1태그를 크게,가운데 정렬 하는 방법, 구글링 하는 방법  (0) 2023.03.26
'CSS' Related Articles more