HTML 블로그 안에서 페이지 이동하기, id, label값 주기 , 블로그 순간이동

 

 

input 입력창을 클릭하지 않고 다른 곳을 클릭해도 클릭한 것처럼 해당 인풋창으로 입력 스크롤이 지정된다거나, 버튼이나 지정 텍스트를 클릭하면 페이지 내부로 이동하는 기능 보셨을 겁니다.

 

 

 

 

 

 

요약

---

클릭하면 이동시킬 텍스트를 만들어 HTML태그 안에 href="#id"값을 준다. ex)

 <a href ="#move">마지막으로 이동하기</a>

이동되고 싶은 화면 쪽 태그에 id값을 move라고 지정해 준다. ex)

<p>여기로 이동했습니다</p>

마지막으로 이동하기

 

 

---

label 태그는 for속성으로 id값을 지정해 주면 같은 id값으로 이동해 스크롤을 지정할 수 있습니다.

<label for="id">id</label>
<p>아이디 : <input type="text" id="id" name="ID" value="아이디를 적으세요."></p>

id   여기 클릭해 보세요

아이디 :

↑↑↑ 여기로 스크롤 이동 될 겁니다.

(회원가입 HTML 예제 만들었을 때 사용했었네요)

 

 

 

 

 

 

 

 

 

페이지 내 링크이동 <a> 태그 #id 값으로 해당 스크롤로 이동하기

---

 

티스토리 블로그는 HTML을 수정할 수 있습니다. 상단 텍스트 에디터 부분 보면 기본모드라는 부분 클릭하시면 드롭다운으로 마크다운, HTML 순서대로 표시되는데 HTML클릭하시면 HTML 코드를 보실 수 있습니다.

 

들어가셔서 위에 요약 설명대로 a태그 href 안에 #id 값으로 지정해 줬습니다.

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

id값을 지정해 줘서 #id라고 지정된 태그를 클릭하면 연결돼서 해당 위치로 스크롤이 이동하게 됩니다.

 

 

 

 

 

팁을 조금 알려드리자면 정말 원하는 위치에 해두면 너무 타이트하게 글이 보이기 때문에

밑에 사진처럼 해당글이 상단바에 조금 떨어져 나오게 하기 위해 더 위쪽에 id값을 배치해 주면 여유 있게 나옵니다.

 

<결과사진>

결과 

 

 

 

위에 결과물은 밑에 포스팅을 보시면 직접 확인하실 수 있습니다.

 

프리미어프로 없이 컷 영상편집 및 오디오 제거 사이트 추천 좋은 영상 만들기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

마지막으로 이동하셨습니다

 

 

다시 올라가셔서 확인해보세요 ㅎㅎㅎ →→→ 바로 올라가기 있습니다.