HTML 기초 – 이미지 표시

• 할 수있다 19, 2024

웹 사이트 텍스트를 원하는대로 게시하고 형식화하면 몇 가지 이미지로 페이지를 구성 할 차례입니다. 이미지는 페이지에 색상과 수명을 추가 할 수있을뿐만 아니라 일반 텍스트 및 서식으로는 어렵거나 불가능한 텍스트 효과를 생성하는 데 사용할 수 있습니다. 예를 들어 글꼴 선택은 일반적으로 방문자의 컴퓨터에 설치할 수있는 적은 수의 글꼴로 제한됩니다. 글꼴이 설치되어 있지 않으면 사이트에서 볼 수 없기 때문입니다! 사용할 수없는 글꼴로 텍스트를 게시 할 때마다 방문자의 컴퓨터는 사용 가능한 글꼴이 가장 가까운 스타일로 렌더링되므로 웹 사이트 디자인에 혼란을 줄 수 있습니다.

반면에 이미지 편집 프로그램을 사용하여 멋진 글꼴로 텍스트를 캡처하여 사이트에 GIF 또는 JPEG로 게시하면 방문자가 원하는대로 정확하게 볼 수 있습니다. 이제는 텍스트가 아니라 텍스트 그림이기 때문입니다. 텍스트 자체. 이를 통해 헤더에 멋진 글꼴을 사용하고 특별한 방식으로 그룹화 할 수 있습니다.

이미지를 표시하는 데 사용되는 기본 태그는 다음과 같습니다.



위의 코드는 HTML에서 완벽하게 작동합니다. XHTML을 사용 중이거나 사이트가 XHTML을 지원하는지 확인하려면 슬래시를 추가하여 태그를 닫아야합니다. XHTML에서는 개방형 태그를 사용할 수 없기 때문입니다.



'Src'는 소스의 줄임말로 이미지의 파일 경로를 지정하는 데 사용됩니다. 즉, 브라우저에서 사이트에서 이미지를 찾을 수있는 위치를 알려줍니다. 이미지를 웹 페이지와 동일한 폴더에 유지하는 경우 폴더를 'src'텍스트로 나열 할 필요가 없습니다. 이미지 파일 이름 만 입력하면됩니다.

이미지 소스를 지정한 후에는 다양한 옵션 속성으로이 기본 프레임 워크를 향상시켜 이미지를 최대한 활용할 수 있습니다. 거의 항상 사용해야하는 속성 중 하나는 'alt'속성입니다. 어떤 이유로 든 이미지를 표시 할 수없는 경우 브라우저에 표시 할 텍스트를 지정할 수 있습니다. 'alt'텍스트는 다음과 같이 준비됩니다.



또 다른 유용한 속성 세트는 'width'및 'height'태그입니다. 이를 통해 실제 이미지 크기와 다른 크기로 이미지를 표시 할 수 있습니다. 이를 사용하여 이미지를 전체 페이지 디자인에 완벽하게 맞도록 이미지를 조정할 수 있습니다. 그러나 일반적으로 이미지 편집 프로그램을 사용하여 실제 이미지 크기를 변경 한 다음 두 가지 이유로 이미지를 온라인에 게시하는 것이 좋습니다. 첫째, 이미지 편집 소프트웨어는 거의 항상 손으로 크기를 조정하는 것보다 더 나은 결과를 제공합니다. 둘째, 'width'및 'height'태그를 변경해도 실제 이미지의 파일 크기는 변경되지 않으므로, 축소판으로 표시하는 거대한 이미지가 있으면 이미지를로드하는 데 시간이 오래 걸리고 전체 크기로 표시 한 것처럼 많은 대역폭.

이미지의 크기를 지정할 때 높이, 너비 또는 둘 다를 나열 할 수 있습니다. 아래에서 볼 수 있듯이 크기는 픽셀로 지정됩니다.



텍스트의 흐름에 따라 이미지를 부드럽게 정렬하도록 이미지를 '정렬'할 수도 있습니다. 왼쪽 맞춤을 선택하면 텍스트가 이미지 오른쪽에서 시작됩니다. 오른쪽 맞춤을 선택하면 이미지가 페이지의 오른쪽에 표시되고 텍스트가 이미지의 왼쪽으로 올라간 다음 줄 바꿈됩니다.

이미지 정렬은 다음과 같이 설정됩니다.



정렬을 "위쪽", "아래쪽"또는 "중간"으로 설정하여 이미지를 텍스트 줄의 위쪽 또는 아래쪽에 맞출 수 있습니다. 정렬을 지정하지 않으면 이미지의 기본값은 "아래쪽"입니다.

참고로 이미지 태그 내에서 이미지 속성 (src, align, alt 등)을 임의의 순서로 포함 할 수 있습니다. 내 개인적인 취향은 'src'속성을 먼저 나열하는 것입니다 .'src '속성이 가장 기본적인 특성이므로 모든 이미지 태그에 포함되어야하지만 가장 자연스러운 느낌의 시퀀스를 사용할 수 있습니다.

비디오 지침: [HTML 기초 강좌 1강] 태그 이해하면 네이버를 해킹할 수 있다고? (할 수있다 2024).