코딩이야기

Grid 이해의 핵심 Grid는 말 그대로 격자이다.  격자라는 말이 한자라서 어려운데, 그냥 쉽게 눈금으로 표기되었다고이해하자. 이렇게 말이다.| 그리드 상에 줄은 행 row로 표기하면, 열은 column으로 표기한다. 위의 이미지를 예로 들면 2행 11컬럼의 격자이며, 2row, 11column, grid이다.  bootstrap에서 열에 대한 클래스는  col이라는 것이 나오는데 이는 column 에서 앞 3글자를 가져온 것이다.  bootstrap에서 그리드는 백분율로 구분된 12개의 열로 구분되어 있다   즉, 뷰포인트(Viewpoint) 상에서 가로에 12 열(column : 칸)으로 구분을 해 놓고, 1열 씩 사용하게 되면 12개의 그리드를 2열씩 사용하게 되면 6개의 그리드를 3열씩 사용하..

중단점 ( BreakPoint ), 특정 크기 이상은 이렇게 보여주고, 특정 크기 이하는 이렇게 보여주고와 같이 화면을 구성하는 것이다.위에 예를 들면, 모니터 크기가 어느 정도 되는 환경에서는 길을 글게 가로로 보여주고, 특정 크기 이하에서는 세로로 자동으로 줄바꿈을 하면서 보여주자~ 라고 기준을 잡아 주는 기준점을 breakpoint라 한다. 마치 1024px 이상은 모니터    768~1023px은 블릿, 768px  이하 부터는 모바일 정도로 구분해 놓고, breakpoint 기준으로 구분된  환경에 맞는 레이아웃을 보여 준다는 의미.    지정해 놓은 특정 크기가 되면 (Breakpoint)가 되면, 그 크기에 맞춰  레이아웃 구조를 변화시키는 시점   뷰포트 (Viewport)웹 브라우저에서는..