안녕하세요 우리시우입니다.
오늘은 티스토리 블로그를 구경하다가
우연히 형광펜으로 칠한듯한 밑줄을 보게 되었는데요,
기본기능으로는 절~~~~~대 구현이 불가능하더라구요~!!!
그래서 오늘은 아주 간단하게
티스토리 블로그 밑줄만 선택하더라도 형광펜 효과가 되는 방법을 소개해드릴게요!
혹시 코드가 바로 필요하신분은 아래 파일을 다운로드해주세요~!
형광펜 세팅하는 방법
아주 쉽기때문에 제 글 그대로 천천히 따라오시면 되겠습니다~!!
우선 티스토리 관리 → 꾸미기 → 스킨편집을 눌러줍니다
스킨편집을 누르신 후 우측에 보이는 빨간 네모박스 HTML편집 버튼을 클릭해줍니다.
html을 클릭해주시면 사진과 같이 html css 파일업로드 세 버튼이 나오는데 CSS 버튼을 눌러줍니다.
CSS버튼 맨 하단에 아래와 같이 코드를 입력해줍니다. 이 코드를 중간에 넣거나 한다면 나중에 찾기 어려워집니다.
반드시 맨 하단에 넣어서 기억하기 쉽도록 해주시는 게 좋습니다.
그리고 적용을 누르고 나면 끝입니다~!!!
형광펜 밑줄 코드 설명
위에서 언급해드린 코드는 아래와 같고 바로 적용하시고싶으신 분은 아래 코드를 다운로드 받아 CSS에 등록하시기 바랍니다.
여기서 변경이 가능한 것중 하나는 hsla 앞의 색깔 부분인데요, 형광펜의 색상을 변경할 수 있습니다. 위 사진과 같이 직접 클릭해서 원하는 색깔로 바꾸면 되겠습니다. 그외 10px는 밑줄의 굵기를 조절할 수 있는 항목입니다.
형광펜 밑줄 설정이 보이지 않는다???
만약 글을 작성후 밑줄 형광펜 효과가 보이지 않는다면
구글 시크릿모드 또는 로그아웃상태에서 글을 보시면 적용이 된 것을 알 수 있습니다.
또한 모바일 어플로 직접 보는 경우에도 간혹 안보이기도 하는데
이또한 로그아웃상태에서 글을 보게 된다면 적용되어 있을 것입니다~!
이상으로 간단하게 밑줄 형광펜을 만드는 방법을 알아보았습니다. 감사합니다~!!!