간단한 css 모서리 둥글게 하기 border-radius(ft. 티스토리)

오늘은 간단하게 티스토리 css 코드를 수정하는 방법을 알아보겠습니다.

 

최근에 아주 오랜만에 티스토리의 스킨을 변경하였는데요 기존에 전체 커스텀했던 스킨을 기본 스킨으로 변경을 하니까 어딘가 조금씩 심심하고 아쉬운 부분들이 보이더군요

 

그래서 앞으로 조금씩 스킨을 수정해보려고 하는데요 오늘은 그 첫번째로 메인 화면에서 리스트 썸네일 모서리를 부드럽게 둥글게 수정하는 방법을 알아보겠습니다.

티스토리 css 수정하기

아래 캡쳐 이미지를 보시면 우측의 썸네일 모서리가 직각인 것을 보실 수 있습니다.

 

너무 각이져있다 보니 부드러운 느낌으로 수정을 하고 싶은데요 어떤 부분의 css를 수정해야 하는지 추적해보도록 하겠습니다.

수정위치 찾기

먼저 크롬 브라우저를 기준으로 설명을 드리면 수정하고자 하는 요소에 마우스를 가져다 대시고 우측 마우스 버튼을 클릭해주세요

아래 캡처화면을 보시면 첫번째로 크롬의 개발자 도구 화면에 위의 게시물 리스트에 대한 html이 보입니다. 

크롬 개발자도구

동일한 코드가 반복되었는데요 하나의 포스팅에 해당하는 html 태그라고 보시면 됩니다.

수정을 하기 위해서 먼저 해당 요소의 class명을 선택해보겠습니다. 저는 맨 끝에 checked-item 이라는 클래스명을 사용해서 css를 수정할 것입니다.

 

*참고

class 명은 고유하지 않아 동일한 이름으로 여러곳에서 사용되었을 가능성이 있기 때문에 최대한 수정하고자 하는 요소를 선택할 때에는 부모 요소 선택을 시작으로 > 최대한 명확하게 요소를 선택해주시는 것이 좋습니다.

 

예)

내가 수정하고자하는 요소의 class가 thumbnail 이면, .area-common .checked-item .link-article .thumbnail

 

위에서 제가 수정하고자하는 썸네일을 아래와 같이 최종 선택하였습니다.

checked-item이라는 클래스가 포스팅 하나에 대한 클래스이고 이를 묶어주고 있는 부모영역의 클래스가 area-common입니다.

 

이제 썸네일에 해당하는 영역에 html구조는 a태그 하위에 p태그이구요 각각의 클래스명은 a.link-article > p.thumbnail 입니다.

 

그래서 결과적으로 아래와 같은 방식으로 선택을 하였습니다.

.area-common .checked-item .link-article .thumbnail

 

모서리 둥글게 하기 

.area-common .checked-item .link-article .thumbnail{
  border-radius:10px;
}

위 코드를 보시면 클래스를 선택하고 border-radius:10px이라는 css 코드를 작성해주었습니다. 

 

이것은 보더 모서리를 둥글게 바꿔주는 코드인데요 10px만큼의 굴곡을 적용하게 됩니다. 결과화면을 볼까요?

 

짠~!

border-radius:10px 적용

border-radius 미적용

결과적으로 어떻게 보이시나요? 조금더 부드럽고 안정감이 드는 것 같은데요?😊

 

저는 html 편집 창에서 css 소스 상단에 위의 코드를 추가해주었습니다.

티스토리 html 편집기

앞으로 조금씩 스킨을 수정할 예정인데요 스킨 인테리어를 하면서 간단하면서 좋은 효과를 내는 코드들에 대해서 올려보도록 하겠습니다.😊

 

그럼 빠이~