티스토리 글 상자 모서리 라운드 서식 만들기

안녕하세요.

이전 포스팅에서 txc-textbox 속성과 border 속성을 활용하여 글 상자 서식을 만들었습니다.

이번 포스팅에서는 기존에 만들었던 글 상자 모서리에 라운드 효과를 주는 방법에 대해 알아보겠습니다.

위의 그림과 같이 기존의 글 상자 서식에서 border 속성 중 하나인 border-radius를 활용하여 모서리에 라운드 처리를 해보겠습니다.

<div class="txc-textbox" style="background-color: #ffffff; padding: 10px; border: 5px solid blue; border-radius: 20px;">

<p> </p>

</div>

속성값은 위와 같으며 기존 글 상자 속성값에서 border-radius: 20px 속성값만 추가되었습니다. border-radius: 20px의 의미는 4개의 모서리 모두 반지름 20px의 라운드를 적용한다는 뜻입니다.

4개의 모서리에 각기 다른 반지름 값의 라운드를 적용하고 싶다면 아래와 같이 속성값을 나누어 적용하면 됩니다.

<p> </p>

</div>

위 속성의 의미는 상측 왼쪽은 직각으로, 상측 오른쪽은 50px, 하측 오른쪽은 80px, 하측 왼쪽은 20px 반지름의 라운드를 적용한다는 의미입니다.

[border-radius 속성 예시]

1. border-radius : 20px; -> 4개의 모서리 라운드가 동일할 경우

2. border-radius : 10px 20px 30px 40px; -> 상측 왼쪽부터 시계 방향으로 라운드 값 적용

(상측 왼쪽 -> 상측 오른쪽 -> 하측 오른쪽 -> 하측 왼쪽)

3. border-radius : 10px 20px; -> 대각선으로 마주 보는 모서리의 라운드 값이 동일할 경우

(상측 왼쪽, 하측 오른쪽 10px / 상측 오른쪽, 하측 왼쪽 20px)

4. border-top-left-radius : 10px; -> 상측 왼쪽 모서리 라운드

5. border-top-right-radius : 20px; -> 상측 오른쪽 모서리 라운드

6. border-bottom-right-radius : 30px; -> 하측 오른쪽 모서리 라운드

7. border-bottom-left-radius : 40px; -> 하측 왼쪽 모서리 라운드

정리하면 글 상자의 테두리 속성 중 라운드 처리는 위의 속성값들을 활용하여 적용하면 됩니다

[티스토리 서식 Case 1 : 4개의 라운드 값이 동일]

<div class="txc-textbox" style="background-color: #ffffff; padding: 10px; border: 5px solid blue; border-radius: 20px;">

<p> </p>

</div>

[티스토리 서식 Case2 : 4곳의 라운드 값이 서로 다를 경우]

<div class="txc-textbox" style="background-color: #ffffff; padding: 10px; border: 5px solid blue; border-radius: 10px 20px 30px 40px;">

<p> </p>

</div>

그리고 위의 두 속성 값들을 티스토리 서식에 저장해두고 글쓰기에서 필요할 경우 서식을 불러와 바로 적용하면 편리합니다. 서식을 불러오고 나서 색상, 반지름 등 변경이 필요할 경우 글쓰기의 HTML 편집기로 들어가서 변경이 가능합니다.

방문해 주셔서 감사합니다.

행복한 하루 보내세요.

티스토리툴바