여백 및 정렬

이전 다음 

내부여백

셀의 테두리와 내용 사이의 여백을 설정합니다.

외부여백

셀의 테두리 기준 외부 여백을 설정합니다. 즉, 셀과 셀간의 여백을 의미하며 인접한 셀에 모두 외부여백이 설정된 경우는 CSS 중첩여백 규칙에 따라 둘 중 큰 숫자의 여백값만 적용됩니다. 외부여백은 셀의 크기에 포함되지 않습니다.

CSS 박스 모델 자세히 알아보기

외부여백의 경우 음수로 지정 가능합니다. 음수인 경우는 인접할 셀 또는 부모셀과의 거리를 벌리는게 아니라, 반대로 겹쳐보이게 합니다.

자동할당 : 셀의 넓이가 고정 또는 최대넓이가 지정된 경우 좌우 여백을 "auto" 로 설정하여 셀의 좌우 정렬을 설정합니다.

넓이:300px
좌우여백 모두 "auto" 설정 시 가운데 정렬 효과
넓이:300px
우측여백 모두 "auto" 설정 시 좌측 정렬 효과
넓이:300px
좌측여백 모두 "auto" 설정 시 우측 정렬 효과

절대위치로 지정된 셀을 가운데 위치시키기 위해서는 좌측 또는 우측 외부여백값을 셀넓이의 반 만큼을 음수로 지정하여 가운데 정렬할 수 있습니다.

위치:절대위치(left:50%)
좌측외부여백:0
넓이:300px
부모셀의 왼쪽으로부터 50% 떨어진 지점에 셀의 왼쪽이 위치하게됨
위치:절대위치(left:50%)
좌측외부여백:-150px
넓이:300px
위의 조건에서 좌측 외부여백을 셀넓이(300)의 반인 150픽셀 만큼 왼쪽으로 들어가게(음수여백)하여 가운데 정렬시킴

내부/외부 여백 반응형 설정

필요시 브라우저의 넓이 변화에 따른 여백값을 설정할 수 있습니다. 값을 지정하지 않은 항목은 위에서 설정한 값을 따릅니다.

셀 정렬

위에서 설명한 외부여백의 "자동할당" 설정을 좀더 쉽게 사용하기 위한 옵션으로 해당 옵션 변경시 실제로는 좌우 외부여백을 조정하게 됩니다.

정렬(텍스트)

셀 내의 텍스트 정렬를 지정합니다. 단, 셀 내에 등록된 모듈내에서 별도 정렬을 하지 않는 경우에만 해당 설정이 적용가능합니다. 예를들어 HTML 삽입모듈로 카피라이트와 같은 내용을 별도의 정렬설정하지 않고 등록 시 반응형에 따른 텍스트 정렬을 할 수 있습니다.

이전 다음 
go top