Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 CSS가 어려운 이유 — 프로젝트 중심 실전 CSS 강의 소개 2023-04-13
📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

둥근 모서리 CSS(파폭과 크롬)

다들 아는 거겠지만 소스 긁기 쉽게 갈무리한다.

일단 소스부터.

-moz-border-radius: 10px; 
-webkit-border-radius: 10px;

위처럼 하면 반지금 10px로 모서리를 둥글게 처리한다. -moz-가 붙은 게 모질라 엔젠(즉, 파이어폭스 등)에서 지원하는 것이고, -webkit-이 붙은 게 웹킷 엔진(즉, 크롬과 사파리 등)에서 지원하는 것이다.

위 CSS는 각각 아래처럼 각 모서리별로 다르게 사용할 수 있다. 이 표는 CSS: border-radius and -moz-border-radius에서 퍼온 것이다.

CSS3 (아직 사용 불가) 모질라 엔진(파폭 등) 웹킷 엔진(크롬,사파리 등)
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radius

역시 축약형도 있다.

-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius 10px 0 0 10px;

이렇게 쓰면 왼쪽위와 왼쪽아래만 둥글게 처리된다.

즉, 처음부터 왼쪽위/오른쪽위/오른쪽아래/왼쪽아래 순으로 시계방향으로 돌리면서 적용된다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다