loading
본문 바로가기 메뉴 바로가기
[CSS3] border-radius : 사각형의 모서리를 둥글게 하기

기존 XHTML의 코딩 시절에는 특정 사각형 박스의 모서리를 둥글게 하기 위해서 일일이 포토샵으로 배경 이미지를 제작해야 했습니다. 하지만 CSS3에서 새롭게 추가된 border-radius라는 속성을 이용하면 포토샵의 도움 없이 순수 CSS 기술만으로도 간단하게 사각형의 모서리를 둥글게 하거나 원 형태의 모양으로 변형할 수 있습니다. (1) border-radius : 왼쪽위 오른쪽위 오른쪽아래 왼쪽아래; 다음의 예제를 통해 border-radius의 기본 개념을 숙지해 보겠습니다. 2개의 태그를 생성합니다. 태그에 넓이와 높이를 각각 300px로 동일하게 적용한 후, nth-child를 이용해 첫 번째 에는 네 모서리의 곡률을 각기 다르게 설정하고 두 번째 에는 네 모서리에 공통으로 해당 넓이의 절반..

💕IT 공부하기/CSS3 2023. 4. 19. 09:00
이전 1 다음
이전 다음

티스토리툴바

이메일: help@abaeksite.com | 운영자 : 아로스
제작 : 아로스
Copyrights © 2022 All Rights Reserved by (주)아백.

※ 해당 웹사이트는 정보 전달을 목적으로 운영하고 있으며, 금융 상품 판매 및 중개의 목적이 아닌 정보만 전달합니다. 또한, 어떠한 지적재산권 또한 침해하지 않고 있음을 명시합니다. 조회, 신청 및 다운로드와 같은 편의 서비스에 관한 내용은 관련 처리기관 홈페이지를 참고하시기 바랍니다.