HTML5 & CSS3 배워보자 (2화 : Image, Link)

HTML 태그 중에서 가장 사용빈도가 높은 태그중의 하나가 바로 이미지 관련 태그와 하이퍼링크 관련 태그일 것입니다. 지난 1화에 이어서 이미지 및 하이퍼링크 관련 태그를 알아보도록 하겠습니다. 이외에도 요즘 웹 사이트에서 자주 사용하고 있는 SVG 이미지에 대해서도 한번 알아보도록 하겠습니다.

 

1.이미지 관련

웹 사이트를 작성할 때 이미지는 텍스트와 함께 사용되어 시각적인 효과를 높이는 데 중요한 역할을 합니다. 그러나 웹에서 사용할 수 있는 이미지의 형식은 제한되어 있습니다. 보통 GIF, JPG/JPEG, PNG 형식의 이미지가 주로 사용됩니다.

• GIF(Graphics Interchange Format): 간단한 애니메이션 및 작은 크기의 이미지에 적합합니다. 투명한 배경을 지원하며, 간단한 로고나 아이콘 등에 많이 사용됩니다.
• JPG/JPEG(Joint Photographic Experts Group): 사진이나 복잡한 이미지에 적합한 형식입니다. 높은 압축률을 제공하여 작은 파일 크기로 저장할 수 있으며, 색상 변형이나 압축 손실이 발생할 수 있습니다.
• PNG(Portable Network Graphics): 투명한 배경이나 고해상도 이미지에 적합한 형식입니다. 압축 손실이 없는 이미지를 제공하며, 웹 디자인에서 로고나 아이콘 등에 많이 사용됩니다.

웹 사이트를 작성할 때 이러한 이미지 형식을 사용하여 텍스트와 함께 시각적으로 매력적인 콘텐츠를 제공할 수 있습니다. 이미지를 선택할 때는 사용자 경험을 고려하여 적절한 형식과 해상도를 선택하는 것이 중요합니다.

 

 

이미지 관련 태그

 

 

<img> 태그: 가장 기본적으로 사용되는 이미지 태그입니다. 다음과 같이 사용됩니다.

<img src="image.jpg" alt="이미지 설명"> 

 

<picture> 태그: 여러 이미지 중에서 가장 적합한 이미지를 선택하여 표시할 때 사용됩니다.

<picture>
  <source srcset="large-image.jpg" media="(min-width: 1200px)">
  <source srcset="medium-image.jpg" media="(min-width: 768px)">
  <img src="small-image.jpg" alt="이미지 설명">
</picture>

 

<source> 태그: <picture> 요소 내에서 사용되며, 다양한 환경에서 다른 이미지를 제공할 때 사용됩니다.

<source srcset="large-image.jpg" media="(min-width: 1200px)">

 

<figure> 및 <figcaption> 태그: 이미지와 그림 설명을 그룹화하고 의미 있는 구조를 만들 때 사용됩니다.

<figure>
  <img src="image.jpg" alt="이미지 설명">
  <figcaption>이미지 설명</figcaption>
</figure>

 

※ 이미지 파일의 경로는 웹 문서 파일의 위치를 기준으로 같은 경로에 있다면 "이미지 파일 이름"을 적으면 되지만, 다른 경로에 있다면 "폴더명 / 이미지 파일 이름"을 적으면 됩니다.

 

 

2.하이퍼링크 관련

하이퍼링크는 HTML 문서에서 다른 문서로 연결되는 기능을 제공하여 사용자가 웹 페이지 간을 자유롭게 이동할 수 있도록 도와줍니다. 텍스트 뿐만 아니라 이미지에도 링크를 삽입하여 사용자에게 시각적인 요소를 클릭하여 다른 페이지로 이동할 수 있게 할 수 있습니다.

 

또한, 링크를 클릭할 때 현재 페이지가 아닌 새로운 창을 띄워 연결된 페이지를 보여주는 기능도 있습니다. 이것은 사용자가 현재 페이지를 유지하면서도 새로운 페이지를 확인할 수 있게 해주는데, 특히 외부 링크를 제공할 때 유용합니다.

 

하이퍼링크는 웹 페이지의 상호 연결성을 강화하고 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 사용자가 정보에 쉽게 접근할 수 있도록 하기 위해 적절하게 활용하는 것이 좋습니다.

 

하이퍼링크 관련 태그

 

<a>(anchor) 태그: 가장 일반적으로 사용되는 하이퍼링크를 생성하는 태그입니다. href 속성을 사용하여 링크된 URL을 지정합니다.

<a href="링크 주소">이 링크를 클릭하세요</a>

 

target 속성: 링크가 열리는 위치를 지정하는 속성입니다. 주로 _self, _blank, _parent, _top 값이 사용됩니다.

<a href=" 링크 주소 " target="_blank">새 창에서 열기</a>

 

<link> 태그: 외부 스타일 시트를 연결하는 데 사용되지만, HTML 문서와 관련된 다른 문서를 링크할 때도 사용될 수 있습니다.

<link rel="stylesheet" href="styles.css">

 

<area> 태그: 이미지 맵을 생성할 때 사용됩니다. 이미지의 특정 부분을 클릭하면 다른 URL로 이동하도록 할 수 있습니다.

<img src="planets.jpg" usemap="#planetmap">
<map name="planetmap">
  <area shape="circle" coords="180,139,14" href="venus.html" alt="Venus">
  <area shape="circle" coords="129,161,10" href="earth.html" alt="Earth">
</map>

 

download 속성: 링크를 클릭할 때 연결된 문서를 다운로드할 수 있게 해줍니다.

<a href="document.pdf" download>문서 다운로드</a>

 

 

 

 

3.SVG 이미지 관련

HTML5에서는 SVG(Scalable Vector Graphics) 파일 형식을 지원합니다. SVG는 XML 기반의 벡터 그래픽 형식으로, 크기를 조절하더라도 그래픽의 품질이 유지되므로 고해상도 디스플레이에서도 선명하게 표시됩니다.

 

SVG 파일은 주로 아이콘, 차트, 그래픽 요소 및 로고와 같은 정적 또는 동적인 그래픽을 만들 때 사용됩니다. HTML5에서는 SVG 파일을 웹 페이지에 직접 삽입하여 화면에 표시할 수 있으며, 이를 통해 웹 디자인의 다양한 가능성을 탐색할 수 있습니다.

 

SVG 이미지 관련 태그

 

<svg>: SVG 이미지의 컨테이너를 정의합니다.

<svg width="400" height="180">
  <!-- SVG 그래픽 요소들 -->
</svg>

 

<circle>: 원을 그립니다.

<circle cx="50" cy="50" r="40" fill="red" />

 

<rect>: 직사각형을 그립니다.

<rect x="50" y="20" width="150" height="100" fill="blue" />

 

<line>: 직선을 그립니다.

<line x1="10" y1="10" x2="100" y2="100" stroke="black" />

 

<path>: 경로를 그립니다.

<path d="M10 10 L50 50 H100 V100 Z" stroke="black" fill="transparent" />

 

<polygon>: 다각형을 그립니다.

<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />

 

<text>: 텍스트를 표시합니다.

<text x="50" y="50" fill="black">Hello, SVG!</text>

 

<g>: 그래픽 요소들을 그룹화합니다.

<g id="group1">
  <!-- 그룹화된 그래픽 요소들 -->
</g>

 

 

 

HTML5 기본을 배워보자 (1화)

https://zzangdis.com/28

 

 

※ 다음화에서는 폼(Form) 에 대해서 공부하겠습니다!!