친효상담소! 본문 소제목 스타일 꾸미기에 대한 문의

오랜만에 문의 메일이 도착했습니다. 스킨 스타일에 대한 문의였습니다. 본문의 소제목에 대해서 첨부파일의 내용대로 수정을 하는 방법에 대한 궁금증이었어요. 이 부분은 이메일로 답변드리기는 너무 부적절하기에 이렇게 강좌 형태로 작성할 수 밖에 없습니다. 아래는 메일의 원본에 대한 스크린샷입니다.

지금 보시면 저기 초록색 부분의 스타일입니다. 왼쪽 하단과 오른쪽 상단의 모서리가 둥근 형태죠. 즉 이건 네모난 형태에서 특정 부분만 모서리에 라운드를 적용한 상태입니다. 적용 방법은 생각보다 간단합니다. 아래에 간단하게 스타일을 만든 예시가 있습니다. 참고해주시기 바랍니다.

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

친효스킨의 경우

<h4>태그는 티스토리 글쓰기에서 제목3으로 바꾸면 적용됩니다. 만약 위의 CSS 스타일을 활용한다면 질문주신분께서 원하는 소제목 스타일을 구현할 수 있게 됩니다. 친효스킨의 경우는 CSS에서 다음의 영역을 찾아야 합니다.

#contents .article h4 {
    padding: 7px 5px;
    font-size: 1em;
    border-left: 10px dashed #888;
    border-bottom: none;
    background-color: #eee;
}

바로 이 코드입니다. 이 부분을 위의 예시에 나와있는 코드로 변경하시면 됩니다. 선택자가 아닌 괄호 안의 스타일 코드만 변경해야 합니다. 백그라운드 색상은 원하는 16진수 코드를 사용하면 될 것입니다. 예시에서 사용된 코드는 아래의 첨부파일을 다운로드 받으시면 되시겠습니다.

친효스킨 본문 소제목4 스타일 변경 CSS.txt

0.00MB

첨부파일의 메모장을 열어보시면 다음의 코드들이 들어있습니다.

#contents .article h4 {
    padding: 5px 10px;
    color: #fff;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color: #ff5544;
}

#contents .article h4 {
    padding: 5px 10px;
    color: #fff;
    border-radius: 0 10px 0 10px;
    background-color: #f0f;
}

이 두개를 모두 적용하는것이 아닌 둘 중에 하나만 사용하시면 됩니다. 다만 사용되는 코드가 서로 다를 뿐입니다. 결과는 같습니다. 다음은 각 코드별 설명입니다.

padding : 패딩값. 텍스트 주변의 공간을 넓힘. 사람은 추우면 패딩을 입게 되고 그 결과 몸이 불어나는 효과와 같음. 첫번째 값은 상/하에 적용되며 두번째 값은 좌/우에 적용됨.

color : 글자 색상

border-bottom-left-radius : 박스 하단-좌측의 모서리에 대한 둥글기 값

border-top-right-radius : 박스 상단-우측의 모서리에 대한 둥글기 값

border-radius : 박스 모서리의 둥글기 값

background-color : 박스 배경 색상

이렇게 됩니다. 간단하게 표현하는건 아무래도 두번째 방식일 겁니다. border-radius의 값이 몇 개가 들어가느냐에 따라 적용되는 위치가 달라집니다. 그림으로 빠르게 알아보겠습니다.

좌측 상단을 기준으로 합니다. 그리고 시계 방향으로 돌아가며 번호를 매겼습니다. 이 기준으로 설명을 드리겠습니다.

값이 1개일 때 : 1/2/3/4번 모두 일괄 적용

값이 2개일 때 : 1/3번, 2/4번 적용

값이 3개일 때 : 1번, 2/4번, 3번 적용

값이 4개일 때 : 1번, 2번, 3번, 4번 순으로 적용

이해가 되시나요? 이 순서를 기억해낼 자신이 없다면 첫번째 코드처럼 직관적으로 사용하는 방법도 있습니다. bottom은 아래라는 뜻이고 left는 왼쪽이니까 border-bottom-left-radius는 하단-좌측이므로 4번에 해당됩니다. top은 위라는 뜻이고 right는 오른쪽이니까 border-top-right-radius는 상단-우측이므로 2번에 해당됩니다. 그러면 1번은 어떻게 표현할까요? 그렇습니다. border-top-left-radius가 됩니다. 이해 되시죠? 이렇게 직관적으로 사용하는 방법도 있으니 둘 중 편한 방법을 사용하시면 되시겠습니다.