5. 그리드

grid

가로-세로 두방향 레이아웃 시스템

flex

한방향 레이아웃 시스템

<p>

content, margin이 존재함.

<div>

content가 존재함.

<span>

텍스트에만 공간을 차지함.

실습 예제 html 코드

<!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>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
  </body>
</html>

display:grid;

그리드 컨테이너 정의

grid-template-columns: 150px 1fr;

그리드의 열의 크기를 정의
1번열은 150px, 2번열은 1fr

grid-template-rows: 150px 1fr;

그리드의 행의 크기를 정의
1번행은 150px, 2번행은 1fr

fr 단위란 무엇일까?

1fr: 남은 자유공간의 1/3만큼의 크기를 할당하는 것이다.
2fr: 남은 자유공간의 2/3만큼의 크기를 할당하는 것이다.

auto

해당 Element 내부 콘텐츠에 맞게 사이즈가 조정된다.

+ ol 태그는 div로 따로 묶어줘야 할까?

그럴 필요없다. ol 태그는 부모 태그로써 ul 태그를 묶기에 따로 div 태그가 필요하지 않다.
하지만 이번 실습에서 h2 태그와 p 태그, div 태그를 묶어준 이유는 부모 태그가 없기 때문이다.
그리고 div 태그를 id로 묶는 것은 같은 열에 배치되게 해주고 싶기 때문이다.

기술 채택 통계 사이트

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

caniuse.com

저작자표시 (새창열림)

'🔤 Language > 🔵 CSS' 카테고리의 다른 글

7. 외부 스타일 시트 & CSS 파일을 따로 만드는 이유 (0)	2022.01.02
6. 반응형 디자인, 미디어 쿼리, @media (0)	2022.01.02
4. 박스 모델 (0)	2022.01.01
3. CSS 선택자 (tag, class, id) (0)	2022.01.01
2. 글자 크기 조절 & 글자 위치 정렬 (0)	2022.01.01

grid

flex

<p>

<div>

<span>

실습 예제 html 코드

display:grid;

grid-template-columns: 150px 1fr;

grid-template-rows: 150px 1fr;

fr 단위란 무엇일까?

auto

+ ol 태그는 div로 따로 묶어줘야 할까?

기술 채택 통계 사이트

'🔤 Language > 🔵 CSS' 카테고리의 다른 글

티스토리툴바