내일을 위한 오늘

반응형 웹이란? 반응형 웹 Responsive Web 이란 컴퓨터, 태블릿, 스마트폰 등의 여러 디바이스 환경에 따라 웹페이지의 구성이 적절하게 배치되도록 설계된 웹디자인 기법입니다. 그렇다면, 반응형 웹을 만드는 방법은 어떤 것들이 있을까요? 1. 미디어 쿼리를 이용한 방법 첫 번째로 소개할 방법은 가장 많이 사용되는 방법 중 하나인 CSS 미디어 쿼리를 이용한 방법입니다. 일반적으로 아래와 같은 css 코드를 이용합니다. @media 미디어 타입 (너비 및 높이) { (CSS 입력) } 이 방법의 장점은 하나의 HTML 코드만으로 여러 타입의 웹페이지를 분기하여 구성할 수 있다는 점입니다. 전형적인 PC 웹에서부터, 태블릿, 모바일 등을 모두 아우를 수 있는 멋진 방법이라고 할 수 있습니다. 유용한 ..

앞서, Table 코드를 반응형으로 만드는 방법에 관한 글을 포스팅한 적이 있는데요. 2022.06.28 - [컴퓨터/css] - [CSS#1] Responsive Table and CSS 테이블 코드를 반응형으로 만들기 오늘은 또 다른 방향으로 사용할 수 있는 방법을 소개합니다. 표 안의 내용이 많은 경우, 모바일에서도 table 표를 그대로 가져가고 싶을 때가 있는데요. Table 구조는 깨지지 않게 유지하면서 좌우로 터치 스크롤 기능을 넣는 방법입니다. 사실 조금만 고민하면 금방 답이 나오는 것이긴 하지만, 그 생각할 시간마저 아까울 때, 그럴 때 쓰려고 적어 놓습니다. 코드 그대로 카피해서 브라우저로 확인해 보시면 가로 사이즈 480px 이하에서는 가로 스크롤이 확인될껍니다. 가로 스크롤이 거슬린..

웹 퍼블리싱을 하다 보면 꼭 고민에 빠지게 하는 것들이 있습니다. 백엔드 작업시에는 DB 접속을 최소한으로 줄이는 최적화 과정에서 주로 고민이 많고요. 프론트엔드 작업시에는 css 를 이용해 html 코딩을 어떻게 하면 효율적으로 할 수 있을가를 고민하게 됩니다. 그 중에서도 프론트엔드 작업시, 테이블 처리 문제는 없어지지 않는 난제이지요. TABLE 테이블 코딩은 모바일과 반응형웹의 시대로 넘어오면서 정말 계륵과 같은 존재가 되어버렸습니다. 그동안 저도 여러가지 방법을 사용했었는데요. 1. desktop 버전에서는 table 코딩, mobile 버전에서는 div 코딩으로 분기하는 방법 2. table 코딩을 사용하되, 모바일에서는 display:none 을 사용하여 모바일에 그나마 최적화하는 방법 3...