IT Story/Html 2

클릭하면 스크롤 이동하는 목차 만들기

이 전 글에 목차를 만드는 방법을 작성한 적이 있습니다. 이번에는 내부 링크 또는 외부 링크를 걸어두고 페이지 이동하는 글을 작성하려 했으나, 그것보다는 현재 보이는 페이지에서 이동되는 목차를 알려드리는 것이 더 좋을 것 같아서 작성하게 되었습니다. 우선 간단하게 원리를 설명을 드리자면 아래와 같습니다. See the Pen Untitled by Hokyun (@Grayruma) on CodePen. 위에 보시는 것과 같이 목차를 클릭하게 되면 해당 목차의 위치로 이동되는 html 간단 코드입니다. 지금부터 html 을 간단하게 설명하겠습니다. 원리는 이해하지 않아도 됩니다. 작동방식만 이해하신다면 언제 어디서든 사용 가능하니 참고하면 좋습니다. 다음 이동 다음 이 a 태그의 코드는 "다음" 클릭 시 이..

IT Story/Html 2022.09.12

HTML 하이퍼링크 <a>태그로 이미지 링크 걸기

Html의 기초를 공부하려면 기본적으로 아래 용어를 알고 있어야 합니다. 어렵게 보일 수 있지만 생각보다 어렵지 않습니다. '태그-Tag' : HTML 문서를 이루는 문법적 표시 '요소-element' : HTML 요소 즉, 시작 태그에서 종료 태그까지 '속성-attribute' : HTML 속성은 요소에 대한 추가 정보를 제공 태그는 html 페이지에서 객체를 만들 때 사용하는 것입니다. 그리고 태그를 사용해 만들어진 객체를 요소라고 부릅니다. 이제 조금 감이 오시나요? 간단하게 위 이미지처럼 태그를 이용해 요소를 만들어봤습니다. 이제 이미지나 문구에 링크를 걸기 위해 속성을 사용해야 되는데요. 속성은 태그에 추가 정보를 부여함으로써 사용됩니다. a 앵커태그라 불리우는 이 태그는 속성블록에 적혀져있는 ..

IT Story/Html 2022.09.09