DIV 4

div 고정폭 + 가변폭

왼쪽은 130px로 고정 오른쪽은 그 나머지를 지정하고자 하고자 할때 CSS3의 calc() 함수를 이용하면 해결이 가능합니다. calc() 함수 사용시 유의사항 -. 모든 계산은 왼쪽에서 오른쪽으로 진행 -. 사칙연산과 마찬가지로 곱하기, 나누기 먼저 계산 -. 호환성을 위해 -moz, -webkit과 같은 vendor-prefix를 먼저 작성 -. calc(100% - 10px)과 같이 더하기(+). 빼기(-) 연산자의 경우 앞뒤 공백 -. 곱하기(x), 나누기(/)는 공백 불필요 지원브라우저 IE 9+ , Firefox 4+(모바일 19+), Chrome 19+(모바일 25+), Safari 6+(모바일 6+), Blackberry 10+ 왼쪽 오른쪽 참고자료 http://fils.tistory.c..

Web 2017.07.03

div 이미지 공백 없애기

div나 table 안에 이미지를 넣다 보면 뜻하지 않게 공백이 생기는 경우가 있습니다. 이미지 공백은 왜 생기는 것일까? 이미지는 인라인 요소인데요, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를 생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다. 인라인 요소의 수직 정렬 1. 비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬 2. 표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬 [방법 1] 인라인 요소(이미지)를 블록 요소로 만들기 인라인 요소로 인해 생성된 박스의 수직 정렬이 문제이므로, 인라인 요소를 블록 요소로 만듭니다. [방법 2] 인라인 요소의 기준선을 bottom에 맞추..

Web 2017.06.02