anchor link 1 - 문서 내 이동

a 태그는 href 속성값에 의해 문서간의 이동이 가능하다는 것을 알고 있다. 

 

 

href속성값에 다른 문서로의 이동이 아닌, 자신의 문서 안에서 다른곳으로 이동시키고자 할때,

이동 될 박스에 id값을 주고, a 태그의 href속성에는 #target1이라는 속성값을 적용한다.

 

(예 : <a href="#target1">target1으로 바로가기</a> )

 

 

그리고 나서 같은 문서 안의 박스에 아이디값을 부여한다. 

 

(예 : <div id="target1"></div>)

 

하나의 본문에서 id속성이 부여된 박스에 바로 가게 할 수 있는 것을 anchor link라고 한다. 

 

 

See the Pen yLNvJrW by LimsUIUX (@LimsUIUX) on CodePen.

 

[림스Tip1]

 

다른 문서에서 본문의 target1로 이동하고자 할때는 

 

<a href="타겟문서.html#target1">타겟문서의 target1으로 이동</a>

 

라고 적는다. 

 

[림스Tip2]

 

/*

 행바꿈을 하기 위해 가상요소를 ::after나 ::before를 만들어서
 clear:both; 속성을 부여한다. 아무것도 없기 때문에            

 content:''; ->내용 무 를 의미
 display:block; -> 요소의 성격(block, inline)을 만들어준다. 
 를 함께 부여 한다. 
*/