본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

링크 스타일 설정이 필요한 이유는?

링크의 외형을 전체 사이트 디자인에 맞게 꾸미고 싶을 때, CMS로 만든 여러 페이지에서 일관된 링크 형태를 쓰고 싶을 때 링크 스타일 설정을 사용합니다.

• 블로그 글 안에 있는 링크의 색상, 밑줄, 마우스 오버 효과 등을 통일되게 만들고 싶을 때

• CMS로 작성된 뉴스, 칼럼, 후기 페이지 등에서 링크가 너무 기본 형태로 보여서 디자인 흐름이 깨질 때

• "더 알아보기", "관련 글 보기" 같은 링크 텍스트가 페이지 내에서 잘 보이도록 스타일을 다르게 주고 싶을 때

• 링크마다 매번 수동으로 색이나 효과를 지정하기 번거로울 때

1단계: 새로운 링크 스타일 만들기

1. 좌측 패널에서 Assets(에셋) 탭 열기

2. 상단 탭에서 Styles 선택

3. + 버튼 클릭 후 Link Style 선택

4. 원하는 링크 스타일을 설정(생성)

Note :필요에 따라 기본 스타일 외에 hover 상태, 방문 후 상태 등도 세분화하여 설정할 수 있습니다.

2단계: CMS 상세 페이지에 링크 스타일 적용하기

1. CMS 상세 페이지에서 ‘Content’ 요소 선택

2. 우측 패널의 Text 섹션으로 이동

3. Link 속성 클릭

4. 적용할 링크 스타일 선택

이렇게 하면 프로젝트 전체에서 일관된 링크 스타일을 사용할 수 있게 됩니다.

본 글은 Framer 공식 블로그의 ‘How to style links for a CMS detail page’ 를 번역·각색한 콘텐츠입니다.