부트스트랩(Bootstrap)에서 제공하는 img-rounded 클래스를 사용하면 별도의 CSS 코드를 작성하지 않고도 이미지에 둥근 모서리(rounded corners) 스타일을 간편하게 적용할 수 있습니다.
이미지 태그에 class="img-rounded" 속성만 추가하면 되기 때문에, 웹 페이지 내 이미지를 부드럽고 세련된 느낌으로 꾸미고 싶을 때 유용하게 활용할 수 있습니다.
사용 예제
아래 예제는 원본 이미지와 img-rounded 클래스가 적용된 이미지를 나란히 비교하여 보여줍니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Images</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <p>부트스트랩으로 이미지 스타일링하기</p> <h1>원본 이미지</h1> <img src = "https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg"> <h1>둥근 모서리가 적용된 이미지</h1> <img src = "https://www.tutorialspoint.com/videotutorials/images/numerical_ability_home.jpg" class = "img-rounded"> </body> </html>
코드 설명
- <link> 태그: 부트스트랩의 CSS 파일을 불러와 img-rounded 클래스를 사용할 수 있도록 합니다.
- jQuery 및 bootstrap.min.js: 부트스트랩의 자바스크립트 기능을 위한 필수 라이브러리입니다.
- class = "img-rounded": 해당 이미지에 둥근 모서리 효과를 적용하는 핵심 부분입니다.
위 코드를 실행하면 첫 번째 이미지는 일반적인 사각형 형태로 표시되고, 두 번째 이미지는 네 모서리가 부드럽게 둥글게 처리된 것을 확인할 수 있습니다.