파이어 베이스를 이용하여 웹서비스를 만들다 보면, HTML을 이용하여 여러 가지 화면 출력을 하게 되는데 매 상황별로, 화면에서 여백을 조절할 필요가 있는데, 나는 화면의 좌우측 여백을 다음과 같은 방법으로 조절한다.
예를 들어 다음과 같은 간단한 로그인 화면을 만드는 경우라면, 다음과 같은 HTML을 사용하면,
다음과 같은 로그인 입력 화면을 표시할 수 있는데, 위와 같이 HTML을 사용하게 되면, 화면의 좌측과 우측 끝부분에 여백이 거의 없어 매우 답답하게 보이는 문제가 있다.
이런 경우, 가장 쉽게 여백을 확보하는 방법의 하나는 다음과 같이 container를 적용해 주는 방법이다.
위와 같이 기존 HTML 코드에 단순히 container를 적용해 주는 것만으로도,
기본적으로 다음과 같이 화면 좌측과 우측 끝부분에 상당한 여백이 생기게 된다.
다만, 이렇게 기본적으로 생기는 여백이 너무 넓게 느껴지거나, 또는 그래도 좁게 느껴질 수도 있다.
그런 경우에는 웹페이지 헤더 부분에서 다음과 같은 style 구문을 만들고 container의 좌우 측 padding 값을 추가로 지정해 주면 container로 인해 생성되는 여백의 크기를 원하는 대로 조절할 수 있다.
예를 들어 기본 여백이 너무 넓게 느껴지는 경우라면, 다음과 같이
좌우 측 padding 값을 15px로 지정해 주면, 다음 화면에서처럼 미지정 시에 비해 절반 정도로 줄어든 여백으로 줄어들게 되며,
padding 값을 다음과 같이 100px나 200px 등의 값을 지정해 주면
다음 화면에서처럼 좌우 측으로 무척 넓은 여백도 만들 수 있게 된다.
참고 : Container를 적용 시 기본적으로 만들어지는 좌우 측 여백의 크기는 padding 값을 약 40px 정도로 지정했을 때와 유사하다.