IT 강좌 CSS 기초 023_이미지, 배경
이미지
이미지는 웹페이지에서 매우 중요한 미디어 유형입니다. 이미지를 적절히 사용하면 웹페이지를 다채롭고 생동감 있게 만들 수 있으며, 차가운 텍스트에만 국한되지 않습니다.
이미지 레이아웃
img 요소는 기본적으로 인라인 요소이며, 기본 여백이 5px입니다. 블록 요소로 설정하면 한 줄에 하나의 이미지만 표시됩니다. 인라인 요소로 설정하면 한 줄에 여러 이미지를 표시할 수 있습니다. 블록 요소의 위치를 지정할 때는 margin 속성을 사용하고, 인라인 요소의 위치를 지정할 때는 text-align 속성을 사용합니다.
예제:
<img src="zhaojian1.jpg" alt="" ><img src="zhaojian1.jpg" alt="" ><img src="zhaojian1.jpg" alt="" ><img style="display: block;" src="zhaojian1.jpg" alt="" ><img style="display: block;" src="zhaojian1.jpg" alt="" ><img style="display: block;margin: 0 auto;" src="zhaojian1.jpg" alt="" >효과:
이미지 투명도
CSS에서 opacity 속성을 사용하여 요소(이미지 포함)의 투명도를 설정할 수 있습니다. 이 속성은 0(완전 투명)에서 1(완전 불투명) 범위의 값을 받습니다.
이미지의 배경만 투명하게 하고 내용에는 영향을 주지 않으려면 RGBA 색상 값을 사용할 수 있습니다.
예제:
<img src="zhaojian1.jpg" alt="" ><img style="opacity: 0.5;" src="zhaojian1.jpg" alt="" >효과:
이미지 둥근 모서리
CSS에서 border-radius 속성을 사용하여 이미지에 둥근 모서리를 추가할 수 있습니다. 이 속성은 요소 테두리 모서리의 곡률을 설정하는 데 사용됩니다.
예제:
<img style="border-radius: 10px;" src="zhaojian1.jpg" alt="" ><!-- 둥근 모서리의 반지름 설정, 필요에 따라 조정 가능 --><img style="border-radius: 20px 10px;" src="zhaojian1.jpg" alt="" ><!-- 수평 반지름 20px, 수직 반지름 10px --><img style="border-radius: 10px 20px 15px 5px;" src="zhaojian1.jpg" alt="" ><!-- 왼쪽 상단 10px, 오른쪽 상단 20px, 오른쪽 하단 15px, 왼쪽 하단 5px -->효과:
이미지 그림자
CSS에서 box-shadow 속성을 사용하여 이미지에 그림자 효과를 추가할 수 있습니다. 이 속성은 그림자 색상, 흐림 반지름, 오프셋 등을 포함한 투영 효과를 추가할 수 있게 해줍니다.
예제:
<img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);" src="zhaojian1.jpg" alt="" ><br><br><!-- 수평 오프셋 5px, 수직 오프셋 5px, 흐림 반지름 10px, 그림자 색상은 반투명 검정 --><img style="box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 255, 255, 0.7) inset;" src="zhaojian1.jpg" alt="" ><!-- 외부 그림자와 내부 그림자, inset 키워드를 사용하여 내부 그림자를 지정 -->효과:
배경
CSS에서 배경은 웹 디자인에서 자주 사용되는 스타일 중 하나로, 요소의 배경 스타일을 설정하는 데 사용됩니다.
배경색
요소의 배경색은 background-color 속성을 통해 설정됩니다.
예제:
.example1 { background-color: #f0f0f0; width: 500px; height: 500px; } <div class="example1"></div>효과:
배경 이미지
요소의 배경 이미지는 background-image 속성을 통해 설정됩니다. 상대 경로, 절대 경로 또는 URL을 사용할 수 있습니다.
예제:
.example1 { background-image: url('zhaojian.jpg'); width: 500px; height: 500px; } <div class="example1"></div>효과:
배경 반복 (타일링)
background-repeat 속성은 배경 이미지의 반복 방식을 설정하며, 수평, 수직, 양방향 또는 반복 없음으로 설정할 수 있습니다.
- repeat: 이미지가 수평 및 수직으로 반복됨 (기본값)
- repeat-x: 이미지가 수평으로 반복됨
- repeat-y: 이미지가 수직으로 반복됨
- no-repeat: 이미지가 한 번만 표시됨
예제:
.base { background-image: url('zhaojian1.jpg'); width: 200px; height: 200px; } .example1 { background-repeat: no-repeat; } .example2 { background-repeat: repeat-x; } .example3 { background-repeat: repeat-y; } 반복 없음 <div class="base example1"></div> 수평 반복 <div class="base example2"></div> 수직 반복 <div class="base example3"></div>효과:
배경 크기
background-size 속성은 배경 이미지의 크기를 설정하며, 구체적인 픽셀 값, 백분율 또는 cover나 contain 같은 키워드를 사용할 수 있습니다.
- 기본값: 원본 배경 이미지를 완전히 표시합니다.
- auto: 이미지를 비율에 맞게 축소/확대하여 배경으로 사용하며, 이미지가 반복 타일링됩니다.
- cover: 이미지를 비율을 유지하면서 전체 영역을 덮도록 확장합니다. 이미지가 완전히 표시되지 않을 수 있으며, 일부가 잘릴 수 있습니다.
- contain: 이미지를 가능한 한 크게 확대하면서 가로세로 비율을 유지하여, 높이 또는 너비가 배경 영역에 완전히 맞도록 합니다. 축소/확대로 인해 배경에 빈 영역이 생길 수 있으며, 컨테이너의 빈 영역에는 background-color로 설정된 배경색이 표시됩니다.
예제:
.base { width: 200px; height: 200px; } .example1 { background-image: url('zhaojian.jpg'); background-size: auto; } .example2 { background-image: url('zhaojian2.jpg'); background-size: cover; } .example3 { background-image: url('zhaojian2.jpg'); background-size: contain; } .example4 { background-image: url('zhaojian2.jpg'); background-size: 50% 100%; } <div class="base example1"></div> <br> <div class="base example2"></div> <br> <div class="base example3"></div> <br> <div class="base example4"></div>효과:
배경 위치
background-position 속성은 배경 이미지의 시작 위치를 설정하며, 픽셀 값, 백분율 또는 키워드를 사용할 수 있습니다.
- 모든 길이 단위를 사용할 수 있으며, 두 번째 위치(Y축 방향)를 선언하지 않으면 기본값은 50%입니다 (두 위치 모두 설정하지 않으면 기본값은 0% 0%)
- 위치 키워드(left/right/top/bottom/center), 단독 또는 쌍으로 사용 가능 (두 번째 키워드를 선언하지 않으면 기본값은 center)
- 혼합 사용
예제:
.base { background-image: url('zhaojian1.jpg'); background-repeat: no-repeat; background-color: #d6d7d8; width: 200px; height: 200px; } .example1 { background-position: center top; } .example2 { background-position: 50% 50%; } .example3 { background-position: 50% bottom; } <div class="base example1"></div> <br> <div class="base example2"></div> <br> <div class="base example3"></div>효과:
배경 부착 (고정)
background-attachment 속성은 배경 이미지가 고정되어 있는지 또는 내용과 함께 스크롤되는지를 설정합니다.
- scroll: 배경 이미지가 페이지 스크롤에 따라 이동함 (기본값)
- fixed: 배경 이미지가 페이지 스크롤에 따라 이동하지 않음
- local: 배경 이미지가 요소 내용의 스크롤에 따라 이동함
예제:
.example1 { background-attachment: scroll;}.example2 { background-attachment: fixed;}.example3 { background-attachment: local;}효과:
배경 약식 표기
background 속성은 약식 표기가 가능하며, 개별 하위 속성을 선언하는 것보다 훨씬 간결하여 많은 코드를 절약할 수 있습니다. background에는 하위 속성이 많기 때문에 약식 표기의 순서도 하나의 과제입니다. CSS2에서는 다음과 같은 약식 표기 순서 규칙을 권장합니다:
예제:
.example1{ background: color image repeat attachment position/size;}
.example2{ background: #ffffff url('img_tree.png') no-repeat right top;}