본문 바로가기
카테고리 없음

HTML 기본 요소 코드 설명

by 아메리아 2024. 6. 15.
반응형

1. a 태그 (링크)

  • a 태그는 웹 페이지 내 다른 위치 또는 외부 웹사이트로 연결하는 하이퍼링크를 만들 때 사용됩니다.
  • 속성:
    • href: 링크 대상의 URL 주소를 지정합니다.
    • target: 링크 클릭 시 열리는 창을 지정합니다. 예를 들어, _blank는 새 창에서 엽니다.
    • title: 링크에 대한 설명을 지정합니다. 마우스 포인터를 올리면 툴팁으로 표시됩니다.
<a href="https://any-miscellaneous.com/" target="_blank"
title="새창으로 열기">https://any-miscellaneous.com/</a>

 

※주의: href에 반드시 http:// 혹은 https:// 코드가 들어가야 사이트가 정상적으로 열립니다.

 

 

2. href 속성

  • href 속성은 a 태그뿐만 아니라, 이미지 (img), 프레임 (iframe) 등 다른 요소에서도 사용됩니다.
  • 각 요소에서 다소 다른 역할을 하지만, 기본적으로 링크 대상의 URL 주소를 지정하는 역할을 합니다.
 
 
3. img 태그 (이미지)
  • img 태그는 웹 페이지에 이미지를 삽입하는 데 사용됩니다.
  • 속성:
    • src: 이미지 파일의 경로를 지정합니다.
    • alt: 이미지가 표시될 수 없는 경우 대신 보여질 대체 텍스트를 지정합니다.
    • width: 이미지 너비를 픽셀 단위로 지정합니다.
    • height: 이미지 높이를 픽셀 단위로 지정합니다.
<img src="예시.jpg" alt="이미지 설명">

<img src="https://designhub-file.miricanvas.com/file-item/20240612/3fe9b2cf-9847-4085-a961-b642474cebd0/%EB%82%98%EB%AC%B4_300.png"
alt="나무">
 

 

4. p 태그 (단락)

  • p 태그는 웹 페이지에서 단락을 구성하는 데 사용됩니다.
  • 각 단락 사이에 기본적으로 여백이 추가됩니다.
  • 속성:
    • align: 단락의 정렬 방식을 지정합니다. left, center, right 등의 값을 사용할 수 있습니다.
    • style: 글꼴, 색상, 여백 등 단락의 스타일을 CSS로 지정할 수 있습니다.
<p>이것은 단락입니다.</p>
<p style="text-align: center;">이 단락은 가운데 정렬됩니다.</p>
 
 
 

5. br 태그 (줄바꿈)

  • br 태그는 웹 페이지에서 텍스트 줄을 강제로 바꿔쓰는 데 사용됩니다.
  • 단독으로 사용되거나, 다른 요소와 함께 사용될 수 있습니다.
  • 속성:
    • /: 닫는 태그를 생략할 수 있습니다.
이것은<br>
줄바꿈한 텍스트입니다.<br>

 

반응형