이미지에 링크를 걸고 싶은데요. 채택완료

백그라운드 이미지를 쓰면서 링크를 거는방법을 문의주신게 맞나요?

해당 질문은 자바스크립트 없이 스타일 시트만으로 가능합니다.

1. a요소가 인라인 요소기 때문에 inline-block을 해야 넓이,높이를 설정할수 가 있습니다.그리고 백그라운드 부분에 이미지 링크를 거시면 됩니다.

2.그리고 해당요소를 설명하는 부분은  skip 을 활용하여 숨겨 줍니다.

<a href="http://sir.co.kr" target="_blank">http://sir.co.kr" target="_blank" class='imgLink skip'>그누보드바로가기</a>
<style type='text/css'>
.imgLink{display:inline-block;width:100px;height:100px;background:red;}
.skip {
    overflow: hidden;
    line-height: 0;
    font-size: 0;
    text-indent: -9999px;
}
</style>

onclick="location.href='주소'" 대신

새창으로
onclick="window.open('주소')"
팝업으로
onclick="window.open('주소','팝업이름','width=가로픽셀,height=세로픽셀,location=no,status=no,scrollbars=no');

그리고 스타일에 넣는다는건 
pc-header .at-container02 { padding:0px 10px 5px; background: url('/img/banner_t02.jpg') no-repeat left top; cursor:pointer}를 추가해주라는 말입니다.

해당 클래스가 있는 곳에 onclick으로 처리하면 간단하게 해결됩니다

ex) <div class="at-container02" onclick="location.href='link'"></div>

사용자의 링크 인식을위해서 style에 cursor:pointer 까지 넣어주면 완벽하겠죠?

.at-container02 클래스가 지정된 테그에 onClick="location.href='링크주소';" 해주시면 될꺼 같아요.