CSS 가로 길이 빼기, CSS 가로 길이 빼기 - width:calc()을 이용한 자동 길이 지정

본문 바로가기

CSS CSS 가로 길이 빼기, CSS 가로 길이 빼기 - width:calc()을 이용한 자동 길이 지정

페이지 정보

작성자 키스세븐 댓글 0건 조회 30회 작성일 18-09-23 17:16

본문

[CSS 가로 길이 빼기, CSS 가로 길이 빼기 - width:calc()을 이용한 자동 길이 지정]



CSS의 calc 기능


일반적인 홈페이지 뿐만 아니라, 특히 반응형 홈페이지를 만들 때 모든 객체의 가로 길이, 세로 길이는 상대적인 길이를 정하게 됩니다. 예를 들자면 width=100px라고 할 것도 width:70%처럼 표현하는 것입니다. 

그런데, 한 라인의 전체 길이를 여러 개로 쪼개서 배치할 때는 계산이 필요해 집니다. 예를 들어, 한 줄에 글자와 이미지를 배치할 때 너비를 다시 쪼개야 한다면 width:70%와 width:30%처럼 하고 있습니다.


그런데 이미지의 크기를 기준으로 "이미지의 너비를 제외한 나머지 모두에 글자를 넣어라"는 형식으로 배치를 해야 할 때는 어떻게 해야 할까요? 이럴 때 필요한 것이 CSS 가로 길이 빼기와 CSS 세로 길이 빼기의 방법입니다.


기본적으로 HTML에서 div나 이미지의 가로 길이를 조정하는 방법은 아래와 같습니다.

<img src="이미지 주소" width="가로 길이" height="세로 길이" alt="그림 설명" />

그러나 요즘은 div나 image 가로 길이를 CSS로 조정합니다. 

이때 CSS 가로 길이 빼기를 할 경우라면 CSS 파일에서 아래와 같이 표현할 수 있습니다. CSS로 세로 길이 빼기도 물론 가능합니다.

.img {width:calc(100% - 100px);} // 너비를 전체 너비에서 100만큼 적은 길이로 표시하라는 의미

이것은 CSS3가 적용되면서 생긴 새로운 방법입니다. 물론 최신 브라우저는 모두 지원한다고 보면 됩니다. 그러나 오래된 브라우저일 경우 CSS3를 지원하지 못해서 전체 레이아웃이 깨질 수도 있음을 주의해야 합니다. 즉, 접속자 대상이 최신 컴퓨터를 쓰는 것으로 예상된다면 쓰면 좋은 태그가 calc입니다. 



CSS의 가로 길이 빼기, 세로 길이 빼기 원리


여기에서 calc의 구조를 조금 더 자세히 알아 봅시다. 

CSS3의 calc는 계산을 해 주는 함수입니다. 그러므로 당연히 덧셈, 뺄셈, 곱셈, 나눗셈이 가능합니다. 제작자가 계산해야 할 것들을 CSS3가 대신해서 가로 길이 빼기, 세로 길이 빼기를 해주는 것입니다. 더하기, 곱하기도 마찬가지이지만 대체로 빼기를 많이 사용합니다.

단위도 em, px, cm 등 다양하게 사용할 수 있습니다. 


CSS의 calc은 괄호 안에서 (원래의 길이 - 뺄 길이); 의 형식으로 지정하면 됩니다.


그런데 주의할 것은 CSS 가로 길이 빼기, 세로 길이 빼기 등을 할 때 연산자의 양쪽에 반드시 공백을 넣어야만 한다는 것입니다. 위의 예를 보면 100%와 100px 사이에 공백이 하나씩 들어가 있는 것을 볼 수 있습니다. 


그렇다면 최신 CSS3이기 때문에 적용하지 못하는 오래된 브라우저일 경우에는 어떻게 처리해야 할까요?

보편적인 방법인 콜백을 사용합니다. 그 코드는 아래와 같습니다.

width : 95%; /* 일반적인 길이 지정 */

    width : -webkit-calc(100% - 100px); /* for Chrome, Safari */

    width :    -moz-calc(100% - 100px); /* for Firefox */

    width :         calc(100% - 100px); /* for IE */

이렇게 해도 적용이 안되는 브라우저도 있지만, 결과적으로는 브라우저를 만드는 회사에서 처리해줘야 할 부분이므로 개발자가 더 이상 손 쓸 방법은 없습니다.


CSS의 calc로 가로 길이 빼기, 세로 길이 빼기를 할 때 추가로 알아둘 것은 빼는 숫자가 원래 숫자보다 크다면 결과값은 그냥 0이라는 것입니다. 즉, calc(100px - 110px)는 길이가 모자라므로 그냥 0px가 됩니다.

추천0
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.


Copyright © 1997-. 키스세븐 www.kiss7.kr All rights reserved.