HTML CSS 하이퍼링크

 

• 하이퍼링크 걸기
• <a href = " url " title "마우스올렸을때 뜨는 문구"> 보이는문구 < /a>

    <a href="http://naver.com" title="네이버로 이동">네이버</a>
    <a href="http://kakao.com" title="카카오로 이동">카카오</a>
    <a href="http://google.com" title="구글 이동">구글</a>

• 이미지에 하이퍼링크 걸기

• <a href = " url " title "마우스올렸을때 뜨는 문구" alt = "이미지없을때 보여지는 문구"> 보이는문구 < /a>

<a href="http://google.com"><img src="img/sunny3.jpg" alt="구글"></a>

 

• 리스트 태그 활용 하여 버튼처럼 만들기

       <style>
        ul li{ list-style: none; float: left; } 
        ul li a{ 
            display: inline-block;
            padding: 20px 30px;
            margin-right: 10px;
            text-decoration: none;
            background-color: darkcyan;
            color: lightgoldenrodyellow;
        }
    </style>
    
    <ul>
       <li><a href="www.naver.com">네이버</a></li>
       <li><a href="www.kakao.com">카카오</a></li>
       <li><a href="www.google.com">구글</a></li>
    </ul>   

• 스타일 살펴보기

            display: inline-block;
            padding: 20px 30px;   //안쪽 여백
            margin-right: 10px;   //오른쪽 여백 
            text-decoration: none;    //하이퍼링크 밑줄 없애기
            background-color: darkcyan;   //배경색
            color: lightgoldenrodyellow;  //글자색