[CSS] width 속성 퍼센트 값에서 원하는 픽셀만큼 빼는 방법

이 방법은 CSS3에서 지원되는 내용입니다.

div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.

예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.

하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.

예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.

연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.

[CSS] 앨리먼트 요소 center 정렬 해결방법

CSS 정렬에 있어서 각 요소의 width, height 값은 중요합니다. 이들이 없으면 상호간 정렬 또는 위치를 잡는데 애를 먹게 됩니다.

parent라는 class를 가진 부모 DIV 앨리먼트가 child라는 class를 가진 자식 DIV 앨리먼트를 감싸고 있다고 가정합니다.

이때 흔히 고민하는 부분이 자식 앨리먼트를 어떻게 하면 center 정렬을 시킬 수 있을까 일겁니다.

text-align? margin? padding?

요소를 정렬시키는데 있어 위 모두 사용할 수 있는 녀석들입니다. 하지만 그 이전에 각 요소의 사이즈를 정의해줘야 합니다. 사이즈를 지정하지 않고도 문제가 없다면 다른 브라우저로 테스트 해보십시오. 위치나 사이즈가 일그러지는 모습을 볼 수 있습니다.

parent 클래스를 가진 부모 DIV에는 width:100%을 줍니다. 그리고 child 클래스를 가진 자식 DIV에는 의도하는 가로 사이즈를 정의합니다. (width: 300px)

그리고나서 parent 클래스에 text-align:center와 margin:0 auto; 를 적용해주면 됩니다.

text-align:center;는 IE에서만 동작합니다. 나머지 브라우저에서는 Text에만 대응하죠. 그리고 margin:0 auto는 IE 외 나머지 브라우저에서 동작합니다. 즉, 이 둘은 같이 한 쌍이 됩니다.

정리하면 위와 같이 CSS가 만들어집니다. 여기서 한가지 문제는 parent의 text-align:center가 그대로 child의 속성에 까지 영향을 준다는 것입니다. child에 텍스트를 넣게 되면 center 정렬이 된다는 의미입니다.

그렇다면 child에 한가지 추가를 해줘야 합니다.

child에 text-align:left;를 넣어줍니다. 이렇게 되면 child안에 텍스트들은 부모 CSS의 center 정렬에 영향을 받지 않게 됩니다.