무한서고

과거 이X루스 시절에 유행했던 무지개 링크를 단순 CSS로 변경하여 보았습니다.

그 당시에는 javascript를 사용하여 작성한 뒤 관련 파일을 블로그에 올려야만 했던 걸로 기억하는데, 정말 간단하게 CSS 만 간단하게 수정 및 추가하여 무지개링크를 직접 구현할 수 있습니다.

아래 예시는 티스토리에서 적용하는 예시이지만, 아주 간단하게 css만 바꿔주는 작업이므로 어떤 블로그에서도 쉽게 사용하실 수 있을 것이라 생각합니다.

1) 먼저 티스토리에서 '관리'에 들어갑니다.

2) 왼쪽 아래 '꾸미기' 에서 '스킨편집'을 눌러줍니다.

3) 새 탭 혹은 창이 열리며 '스킨편집' 모드가 시작됩니다. 오른쪽에서 'html 편집'을 눌러주세요.

4) 바뀐 화면에서 오른쪽 상단에 'CSS'를 눌러주시고, a 태그가 있는 곳을 찾아주세요. ctrl+f로 a를 누르면 수많은 a 중 상단에 있습니다.

5) 찾게되면

 a { color: #000; text-decoration: none; }
 a:hover { color: #07a; }

이렇게 나와있을 것입니다.

6) a:hover에 주석처리를 해주시고(//a:hover { color: #07a; })

7) a:hover { animation: rainbow 5s infinite linear; } 와 같이 고쳐주신 뒤

8) 아래 내용을 a:hover 아래에 붙여넣어 줍니다.
@keyframes rainbow {
    0%   {color: red; }
    10%   {color: orange; }
    23%  {color: yellow; }
    36%  {color: yellowgreen; }
    49%  {color: green; }
    62%   {color: blue; }
    74%  {color: indigo; }
    86%   {color: purple; }
    100% {color: red; }
}

9) 주황색으로 불이 들어온 오른쪽 위의 '적용' 버튼을 눌러주시고, 블로그에 그냥 접속해보시면 무지개 링크가 걸린 모습을 보실 수 있습니다.

위에서 5s 는 애니메이션이 적용될 '초'이므로 좀 더 링크에서 색이 변하는 시간을 바꾸고 싶으신 분은 초를 늘리거나 줄여서 적용하시면 됩니다.

색 변화를 바꾸고 싶으신 분들은 keyframes 안에서 %가 전체 애니메이션 길이 중 비율이고, 안에 color가 글자 색이니 이 부분을 바꾸시거나 키프레임을 추가하시거나 줄이셔도 됩니다.

일반적으로 div에서 padding 속성을 적용하면 우리가 정의한 width, height 박스 크기보다 크게 확장이 되는 것을 보실 수 있습니다.

이는 div의 기본 box-sizing 속성이 content-box로 설정이 되어 있어서 그렇습니다.

즉, content영역의 width와 height만 우리가 정해준 크기이고 전체 박스의 크기는 width, height 더하기 padding 더하기 border 사이즈 인 것이죠.

이것을 box-sizing: border-box;로 설정해주시면 콘텐트, 패딩, 보더를 포함한 전체 박스의 width와 height를 정의해 주게 되므로, 패딩 적용시에도 박스가 확대되지 않는 것을 보실 수 있습니다.