CSS를 사용하여 플로팅 이미지 주위에 텍스트 랩을 만드는 방법을 알아봅니다.
이 기사를 소개하는 사진에서와 같이 텍스트가 오른쪽 이미지를 감싸도록 하려면 다음과 같은 CSS 규칙을 사용하세요.
float: left 규칙은 이미지를 왼쪽 여백으로 이동합니다. padding-right 규칙은 텍스트가 이미지의 오른쪽에 부딪히는 것을 방지합니다. 이 이미지에 테두리가 추가되면 이미지와 테두리 사이에 패딩이 생깁니다. 테두리가 있는 이미지로 작업하려면 섹션 2를 참조하세요.
그런 다음 이미지의 왼쪽과 오른쪽에 여백을 추가하여 중앙에 배치합니다. 왼쪽 및 오른쪽 여백에 대한 적절한 값은 무엇이든 가운데에 자동입니다.
홈 테두리 스타일을 사용하여 두꺼운 프레임과 같은 테두리를 만들려면 다음과 같은 규칙을 사용할 수 있습니다.
다른 테두리 스타일은 실선, 점선, 파선, 이중, 능선, 인셋 및 인셋입니다. 너비는 픽셀, em 또는 백분율로 표현할 수 있습니다.
테두리는 이미지의 위, 오른쪽, 아래, 왼쪽에 선택적으로 적용할 수 있습니다. 이 지식을 사용하여 그림자와 같은 효과를 만들 수 있습니다.
오른쪽과 아래쪽 테두리에 회색 2가지 음영의 단색 테두리를 사용하면 그림자 효과를 얻을 수 있습니다.
img { 부동 소수점: 왼쪽; 테두리 오른쪽 스타일: 단색; 테두리 오른쪽 너비: 8px; 테두리 오른쪽 색상: #CCCCCC; 테두리 바닥 스타일: 솔리드; 테두리 하단 너비: 8px; 테두리 바닥 색상: #999999; 여백 오른쪽: 1em; 여백-하단: 1em; }
팁
페이지의 둘 이상의 디비전(div)에 이미지가 있는 경우 하위 선택기를 사용하여 개별적으로 스타일을 지정합니다. 가능한 선택기: #content img, #sidebar img, #feature img.
