관리 메뉴

PC Geek's

글제목에 그림자 등 장식효과 붙이기 본문

프로그램/알림글, 블로그 유지 관리

글제목에 그림자 등 장식효과 붙이기

https://pcgeeks.tistory.com/12129       ▒    2018. 1. 26.

    출처는 MS사이트입니다.


    CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법

    https://msdn.microsoft.com/ko-kr/library/jj680149(v=vs.85).aspx

    text-shadow 


    여러 가지 예시가 나오는데, 그 중 제일 앞에 나오는 섀도우 효과만 코드를 따서 붙여 봤습니다.


    그래서 지금 바뀐 것.

    이런 제목이

     

    이렇게 바뀌었습니다. 오른쪽은 커서가 올라간(hover) 경우.

    제목줄에 글링크를 이대로 둘 지 지울 지 생각 중.



    text-decoration 을 이용할 때. 

    https://www.w3schools.com/cssref/css3_pr_text-decoration-style.asp

    https://css-tricks.com/styling-underlines-web/

    깔끔한 밑줄효과. 형광펜 등.


    text-decoration은 안 쓰고, a 태그가 붙은 텍스트나 다른 오브젝트에 border 속성을 써서 형광펜 밑줄효과내기.

    http://qing.one/1062


    제목칸 자체에 대고 할 때는 box-shadow

    https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

    https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow

    https://msdn.microsoft.com/ko-kr/library/gg589484(v=vs.85).aspx


    제목이 두 줄 이상 나오는 글도 있어서, 깔끔하게 색연필을 그려주는 디자인을 생각하고 있습니다. 본문 링크를 지금처럼 점선 밑줄을 해도 되자만, 전공서적의 본문 밑줄처럼 깔끔하게 그어주는 팁도 있던데, 나중에 레이아웃을 한 번 갈아엎게 되면 해봐야겠습니다. :)


    이 글과 같은 분류글목록으로 / 최신글목록 이동
    Comments
    Viewed Posts
    Recent Comments
    Recent Posts