div display:grid 사용해서 키보드 숫자패드 레이아웃 만들기
이번에는 CSS의 여러 옵션 중 display: grid; 라는 녀석으로 키보드의 숫자패드 부분을 div만 사용해서 만들어 보겠습니다. 생각보다 엄청 쉽습니다. 먼저 예시부터 살펴보겠습니다. 해당 예시는 펜코드에 업로드 되어있으며 HTML과 CSS 코드를 모두 확인 가능합니다. 미리보기 See the Pen display: grid [Keyboard Numpad Layout] by rgy0409 ( @rgy0409 ) on CodePen . 일단 HTML 뼈대를 살펴보시면 아시겠지만 그냥 평범한 div 태그들로만 구성되어 있습니다. 중요한건 CSS 부분의 display: grid에 대한 이해입니다. display: grid; grid는 display의 여러 옵션들 중 하나이며 주로 표를 표현하고자 할 때 요긴하게 쓰입니다. 어떤 분들은 이걸로 홈페이지 레이아웃을 구성한다고 하지만 개인적으로는 grid로 홈페이지 레이아웃을 구성하는것보다 차라리 flex를 적절히 사용해가며 제작하는게 훨씬 낫다고 봅니다. grid는 아무래도 table 태그의 업그레이드 버전이라고 생각해요. 사실 table 태그는 굉장히 오래된 요소 중 하나입니다. 근데 이 오래된 유물같은 태그를 아직도 사용하고 있어요. 특히 표 만들기 할 때 테이블 태그를 많이 씁니다. 아무튼 grid 옵션을 사용하면 위의 예시에 있는 숫자패드처럼 구성하는건 일도 아니에요. 너무 쉽습니다. 일단 numWrap의 id값을 가진 div는 전체를 감싸주는 최종 부모요소입니다. 그리고 gridkey라는 클래스명을 가진 div가 실제로 각 키들을 감싸주는 부모요소죠. 바로 여기에 display: grid; 를 사용하게 됩니다. 이렇게 되어있습니다. ...