Web 100

background-image position : 위치 지정

background-position 값 [ | ]{1,2} | [top | center | bottom] || [left | center | right] 초기값 0% 0% 상 속 no 'background-position' 속성은 배경 이미지의 시작 위치를 지정합니다. 포지션 값은 한번 또는 두번이 나올 수 있습니다. 1) 키워드 '키워드'의 기본값은 top left 입니다. 키워드는 다섯가지입니다. top, left, right, center, bottom. 이들 키워드는 두개의 방향을 나타나기만 하면 됩니다. 나타나는 순서는 상관이 없습니다. 만일 하나의 키워드만이 설정된다면 다른 하나는 'center'가 됩니다. 즉, background-position: top right; 나 background-..

Web 2017.06.04

div 이미지 공백 없애기

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

Web 2017.06.02