inline-grid

• 레이아웃을 구성해주는 방식
• 이미지나 글자화 된 태그 들을 패턴 아래 글자를 정렬하는 것을 말한다.
• 레이아웃을 사용하여 가독성을 높이고 유저에게 편한한 웹페이지를 만들고 영역을 구분하기 위해서 사용한다.

정렬하는 방법

• vertical-align:top;
  font-size:1rem; 활용하기
• 주의할 점
  • 부모태그에서 화면을 나눌 때는 calc을 쓸 것
• 사용법
  • 라이브러리 클래스로 만든다
  • 라이브러리 클래스란 클래스를 만들어 놓고 필요한 태그들에 붙여서 사용하는 것을 말한다.
  • css를 만들면서 쓰는 방법이 있지만 자주 쓰는 속성들은 미리 만들어 놓고 클래스 이름을 붙여서 사용하는 것이 편리하다.

.inline-grid {
  font-size:0; /* 공백을 없앰*/
}

.inline-grid > * { 
/* .inline-grid클래스 안에 있는 모든 자식*/
  vertical-align:top;
  font-size:1rem;
 /* 글자를 살리고 글자들의 정렬을 위로 올려서 수직정렬의 기준점을 맞춤*/
}

css의 구분점을 나누자면

• 노말라이즈(속성이 있는 태그들 일반화시키기)
• 라이브러리(클래스를 미리 만들고 붙여넣기)
• 커스텀(필요할때 그때 만들어 쓰는 방식)

활용하기