IT Story/Html 4

HTML 제목 속성 태그 작성으로 검색 엔진 순위 올리기

최근 블로그에서 HTML 제목을 효과적으로 사용하는 방법에 대한 질문을 많이 받았다. 처음 블로그를 시작했을 때 저도 같은 고민을 했던 기억이 난다. 그때는 어떻게 하면 제목을 통해 정보를 명확하게 전달하고, 동시에 검색 엔진 최적화(SEO)에 잘 반영이 될 수 있을지 몰랐다. 하지만 원리를 이해하고 나니 좀 알겠다. 그래서 오늘은 HTML 제목 속성 태그에 대해서 간단하게 알아보도록 하겠다. ▤ 목차 HTML 제목의 정의와 중요성HTML 제목은 웹 페이지에서 가장 중요한 요소 중 하나이다. 웹 페이지의 구조를 정의하고, 사용자와 검색 엔진 모두에게 페이지의 내용을 명확하게 전달할 수 있다. HTML 제목은 부터 까지의 태그로 정의되며, 이 가장 중요한 제목을, 이 가장 덜 중요한 제목을 나타낸다.예제:..

IT Story/Html 2024.07.25

초보자가 알면 유용한 HTML 속성 7가지

오늘은 HTML 요소의 다양한 속성들에 대해 알아보려고 한다. 개인적으로 공부를 조금 하고 있기 때문에 궁금해 하는 사람이 있을 것이라 생각하고 작성한다. ▤ 목차 모든 HTML 요소는 속성을 가질 수 있다.HTML 요소는 다양한 속성을 가질 수 있다.속성은 요소에 추가적인 정보를 줄 수 있으며, 요소의 동작이나 스타일을 정의하는 데 사용된다.링크의 URL을 지정하는 href 속성Examplehref 속성은 태그에서 링크가 이동하는 페이지의 URL을 지정한다. 이를 통해 사용자가 클릭했을 때 이동할 페이지를 설정할 수 있다.이미지를 표시하는 src 속성src 속성은 태그에서 표시할 이미지의 경로를 지정한다. 이를 통해 웹 페이지에 이미지를 삽입할 수 있다.이미지의 크기를 지정하는 width와 heig..

IT Story/Html 2024.07.25

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

이 전 글에 목차를 만드는 방법을 작성한 적이 있습니다. 이번에는 내부 링크 또는 외부 링크를 걸어두고 페이지 이동하는 글을 작성하려 했으나, 그것보다는 현재 보이는 페이지에서 이동되는 목차를 알려드리는 것이 더 좋을 것 같아서 작성하게 되었습니다. 우선 간단하게 원리를 설명을 드리자면 아래와 같습니다. 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