CSS

a 태그 속성 href의 #과 #none의 차이

01. a 태그의 href? 

<a href=""></a>

 

a 태그의 기본 모습은 위와 같다. 평소 별 생각없이 #을 넣었는데 #none을 넣는 방식이 있다는 것을 알게 되면서 href 속성에 대해 제대로 알고 있지 못했다는 생각이 들었다. 

href = Hypertext REFerence (하이퍼참조) 

다른 페이지의 링크를 생성하는데 쓰이는 HTML 코드로 a(anchor) 태그의 속성이다. 

 

💡 그럼 rel과 href의 차이점은? 

여기서 또 드는 의문점 하나, 외부스타일로 CSS를 작성할때 header영역에 사용하는 <link rel="stylesheet" href="../css/01.css">로 rel의 속성을 가지고 있는 것을 볼 수 있다. 여기에서의 rel은 무엇일까? 

rel = relation (관계) 
파일간의 관계를 의미한다. 불러올 파일이 이 파일과 어떠한 관계를 가지는지를 rel에서 정의하는 것 
즉, CSS의 rel="stylesheet"의 의미는 01.css 파일이 스타일을 담당한다고 말하고 있는 것 

 

 

 

 

02. href="#" / href="#none"

실제 홈페이지를 제작한다면 <a href="../html/about.html>ABOUT</a> 과 같은 모습으로 href안을 채워넣게 되겠지만

아직 개발단계나 연습단계일때에는 a태그이지만 아무런 동작을 하지 못하도록 #을 넣거나 #none을 넣는 식으로 많이들 사용한다. 그런데 #과 #none의 차이는 무엇일까? 

 

결론부터 말하자면 아래와 같은 차이점이 있었다.

 

# : a태그를 클릭해도 아무런 반응(실행)이 없지만 최상단으로 이동 

#none : a태그를 클릭해도 아무런 반응이 없고 최상단으로 이동하지도 않는다 

#id : 지정된 id값으로 이동 

 

그전까지는 #을 넣는 방법밖에 몰랐고 #을 넣은 a 태그를 클릭할 경우 최상단으로 이동하는 것 때문에 불편하다라고만 인식하고 있었는데 사실상 최상단으로 이동하지 않게 설정하는 방법이 있었고 내가 몰랐던 것 뿐이었다. 😅