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; 를 사용하게 됩니다. 이렇게 되어있습니다.

1 2 3 4 5 6 7

#numWrap .gridkey {     display :  grid ;     grid-template-columns :  repeat(4, 50px) ;   /*가로 셀 개수 설정*/     grid-template-rows :  repeat(5, 50px) ;   /*세로 셀 개수 설정*/     gap :  5px ;   /*셀 별 여백*/     padding :  10px ; } Colored by Color Scripter

cs

보시면 display: grid만 사용하는 것 뿐만 아니라 늘 콤보처럼 따라오는 것들이 grid-template 관련 및 gap 입니다. 주석으로 설명은 달아두었으니 보시면 어떤 식으로 작동하는지 이해는 되실겁니다. columns는 가로, rows는 세로라는것도 알고 계시죠? 따라서 이해하기 어려운 옵션은 아닐텐데 repeat()는 어떤 식으로 동작하는 것일까요?

repeat()의 괄호 안에는 보통 값을 연속적으로 사용하거나 값과 크기만 마크업하는게 거의 대부분입니다. 제 경우에는 값과 크기만 들어있죠. 키보드의 키는 보통 반응형에 상관 없이 늘 고정된 크기로 해놔야하기에 px 단위를 적용시켰습니다. 정확한 크기가 아닌 반응형으로 각 키별로 크기를 일괄 적용시키는 단위는 fr 이라는 단위를 사용합니다. 즉 위의 코드에서 50px 대신 1fr를 사용하게 되면 어떻게 되느냐? 4개씩 가로 사이즈가 같은 크기를 가진 셀이 완성됩니다. 정 궁금하시면 위의 코드펜에서 변경해서 결과값을 살펴보시기 바랍니다. 바로 이해되실겁니다. 즉 columes의 repeat(4, 50px)의 의미는 가로로 50px 크기를 가진 셀을 4개씩 계속 배치한다는 뜻입니다. 그렇기에 4개씩 끊어진채로 아래로 키들이 계속해서 쌓이게 됩니다. rows의 repeat()도 같은 개념으로 이해하시면 됩니다.

셀 크기 변경

키보드의 숫자패드를 보시면 +, Enter, 0 키만 크기가 다릅니다. 일단 +키와 Enter키는 세로로 일반 키의 두 칸 정도의 크기를 차지하고 있으며 0키는 가로로 두 칸 차지하죠? 이것도 얼마든지 grid 관련 옵션으로 설정할 수 있습니다. 그게 아래의 CSS 코드입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#numWrap .gridkey .plus {     grid-column :  4/5 ;     grid-row :  2/4 ; } #numWrap .gridkey .enter {     grid-column :  4/5 ;     grid-row :  4/6 ; } #numWrap .gridkey .num0 {     grid-column :  1/3 ;     grid-row :  5/6 ; }

cs

보시면 두 개의 옵션 뿐이죠? 그리고 /를 사용해서 두 개의 값이 들어있습니다. 또한 클래스 선택자를 살펴보시면 방금 언급한 크기가 다른 각 키의 클래스명을 지목하고 있고요. 각 CSS 옵션은 아래의 그림들을 보면서 추가 설명하겠습니다.

자, 이건 바로 이해하실겁니다. 각 셀별로 열/행이 있잖아요? 왼쪽 상단 모서리가 기준이며 시작점입니다. 오른쪽으로, 아래쪽으로 각 라인이 있다고 생각하시고 각 라인별로 1씩 카운트 증가됩니다. 열/행 모두 마찬가지입니다. 이것을 잘 기억해 주세요.

먼저 +키를 세로로 두 배 키워야 합니다. 그렇기에 행열의 좌표를 입력해 주시고 얼마만큼의 영역을 확장하면 좋을지만 지정하면 되는 겁니다. 우선 grid-columns 가로죠? 그렇기에 4~5행까지가 +키의 좌표입니다. grid-rows는 세로입니다. 세로열의 경우에는 2~4열 까지 차지하면 딱 세로로 두 배가 늘어나는 셈이겠군요. 그렇기에 +키에 해당하는 plus 클래스명을 CSS에서 지정하고 grid-columns: 4/5; grid-rows:2/4; 로 입력해주는 것입니다. 슬래시의 의미는 ~부터라고 해석하시면 되고요. 이해 되시죠? +키가 세로로 두 배 커지면서 바로 아래에 있던 1번키는 다음 칸으로 자동으로 밀립니다.

Enter 키도 같은 방법입니다. grid-column: 4/5; 그리고 grid-row: 4/6; 으로 선택해주면 되는 것입니다. 그럼 밑에 있는 다음 키가 있다면 또 자동으로 밀려납니다.

마지막으로 0번키입니다. grid-column: 1/3; 그리고 grid-row: 5/6; 으로 선택하면 되겠군요. 그렇죠? 이렇게해서 키보드 숫자패드 레이아웃은 display: grid를 이용해서 매우 쉽게 만들 수 있었습니다. 오늘 내용 끝!