css div (1) 썸네일형 리스트형 (생활코딩) CSS 그리드 grid, <div>, <span> CSS의 그리드(grid)에 대해서 알아보자. 일단 박스 모델로 테두리 및 마진, 패딩값을 주어 위의 사진처럼 웹페이지를 구성하였다. 이제 노란색으로 동그라미 친 부분을 목차 옆으로 옮기는 방법으로 그리드로 사용해 보자. 그리드의 이해를 위해 예제를 만들어 보자. Navigation과 Article 각각의 문자에다 테두리를 주고 나란히 배치해보자. 이를 위해서는 각각 어떤 태그로 묶어줘야 하는데, 디자인이란 목적을 위해서 아무런 의미가 없는 태그를 사용해야 한다. 바로 태그, division의 약자이며, 기본 block level element이기 때문에 화면 전체를 사용한다. 똑같은 기능의 태그로 inline elemenet인 태그도 있다. 부피감 확인을 위해 테두리를 둘렀다. 여기서 이 두 글자를 나.. 이전 1 다음
