CSS | id 활용법: 같은 페이지 내에서 이동시키기

여전히 웹페이지 클로닝 중입니다. 오늘 기억하려고 포스팅에 함께 공유하는 부분은 같은 페이지 내에서 링크 시키는 방법이에요. 예를 들면, 같은 페이지 내에서 A라는 부분을 눌렀을 때 A에 해당하는 섹션으로 화면을 자동으로 보여주는 거에요. 요즘은 한 웹페이지를 길게 만들어서 메뉴를 누르면 자동으로 그 메뉴에 해당하는 섹션으로 화면이 내려가도록 해 놓은 것들이 많더라구요. 

 

속성 id

 

한 페이지 내에서 이렇게 이동시킬 수 있는 방법으로 오늘 활용해볼 것은 id입니다.

id는 class와 다르게 특정한 부분에만 적용시킬 CSS를 지정할 수 있는 속성이에요. html에서는 id=" "로 쓰고, id를 지정하고 싶은 태그 안에 입력해주시면 되요.

 

CSS에서는 #을 이용합니다. 예를 들면, #id이름{  }이렇게 지정해주시면 됩니다.

 

저같은 경우는 상단의 메뉴 중 contact를 누르면 화면 맨 아래에 있는 contact 부분으로 이동하도록 지정해 주려고 합니다.

 

첫 번째에 위치한 CONTACT를 누르면 

 

 

 

화면 가장 아래에 위치한 any question? 메일주소 부분으로 이동시키려고 해요.

 

자 이제 코드를 하나하나 살펴 볼게요.

 

 

 

먼저, <nav>안에 위치한 contact의 링크로 #contact를 만들어 줍니다. 

 

그리고 id=contact가 footer로 연결되어야 하겠죠?

footer에 id="contact"를 지정해줍니다.

 

 

끝!

 

 

링크에 #name을 설정하고, 링크될 부분에 id=" "입력하면 끝!