-
[CSS]background-image 사용하기 /img태그와의 차이 <background-repeat>프로그램/css 2013. 11. 4. 13:51background-image 사용 하는 방법과 img태그와의 차이 <background-repeat>
CSS의 background-image 사용 방법에 대해 포스팅 하겠습니다.
보통 <img> 태그로 하나의 엘리먼트를 이미지로 지정 하는 경우도 있지만 그 엘리먼트의 백그라운드를 이미지로 지정되게 하는 방법을 주로 사용한다.
이 둘의 쓰임세는 같습니다. 실제로 브라우저에서도 많은 차이가 나지 않는다고합니다.
대신 <img>태그가 먹혀 있는 엘리먼트를 마우스로 지정 할 수 있지만, background-image 같은 경우는 선택되지 않는 점!
더 정확하게 이 둘의 차이점을 파해쳐 보자면..
<img>는 해당 페이지의 content에 해당되는 것
background-image는 presentation에 해당되는 것
이 둘을 정확하게 사용 할때는 이렇게 분류 하면 됩니다.
표현하려는 이미지가 실제로 그 페이지의 실질적 내용이면 <img> 태그를
그렇지 않으면 background-image/css를 사용 하면 된다고 합니다.
background-image 태그 옵션 repeat 사용사진을 가로로만 표시
<body style="background-image: url('background-01.jpg'); background-repeat: repeat-x;">
사진을 세로로만 표시
<body style="background-image: url('background-01.jpg'); background-repeat: repeat-y;">
사진 반복 없앰
<body style="background-image: url('background-01.jpg'); background-repeat: no-repeat;">
반복을 없애고 사진의 위치를 지정
<body style="background-image: url('background-01.jpg'); background-repeat: no-repeat; background-position: 20px 50px;">
짧게 쓰기
<body style="background: url('background-01.jpg') no-repeat 20px 50px;">
이미지 여백
vertical-align:top
'프로그램 > css' 카테고리의 다른 글
[css]css position을 이용하여 상단고정 시키기 <fixed> (0) 2013.11.04 [CSS/HTML] CSS 속성 값 선언순서 <코딩순서 정리> (0) 2013.10.14