HTML5 및 CSS3 기반 웹 페이지에 이미지를 추가하는 방법 - 더미

로 바뀝니다. 웹을 탐색 할 때마다 방문하는 HTML5 및 CSS3 페이지의 거의 모든 사진을 볼 수 있습니다. 일반적으로 이미지는 웹 페이지에서 네 가지 방식으로 사용됩니다.

외부 링크: 페이지에 링크가 포함 된 텍스트가 있습니다. 사용자가 링크를 클릭하면 이미지가 웹 브라우저의 페이지를 대체합니다. 외부 링크 된 이미지를 만들려면 일반적인 링크를 만들고 HTML (HyperText Markup Language) 파일이 아닌 이미지 파일을 가리 키기 만하면됩니다.
포함 된 이미지: 이미지가 페이지에 삽입됩니다. 일반적으로 페이지의 텍스트가 이미지 주위를 흐릅니다. 이것은 웹에서 사용되는 가장 일반적인 유형의 이미지입니다.
배경 이미지: 이미지는 전체 페이지 또는 페이지의 특정 부분에 대한 배경으로 사용할 수 있습니다. 이미지는 일반적으로 배경 사용에 적합한 특수 조작이 필요합니다.
사용자 정의 글 머리 기호: CSS를 사용하면 순서가 매겨진 목록이나 순서가없는 목록에 작은 이미지를 글 머리 기호로 지정할 수 있습니다. 이렇게하면 사용자가 작성할 수있는 사용자 정의 된 목록 표식을 만들 수 있습니다.

이미지 링크 방법

이미지를 통합하는 가장 쉬운 방법은 이미지에 링크하는 것입니다. externalImage를 살펴보십시오. HTML 페이지.

페이지의 코드는 간단한 링크 이상은 아닙니다:

externalImage. html

외부 이미지에 연결

Susan B. Constant

href는 HTML 페이지가 아니라 이미지 파일을 가리 킵니다. 앵커 태그에 원하는 파일 유형을 지정할 수 있습니다. 브라우저가 파일 형식을 알고 있으면 브라우저에 파일이 표시됩니다. 브라우저가 파일 형식을 모르는 경우 사용자 컴퓨터는 해당 파일 형식을 여는 데 일반적으로 사용하는 프로그램을 사용하여 파일을 표시하려고합니다.

이미지가 브라우저에 직접 표시되기 때문에 대부분의 이미지에서 문제가 없습니다.

이 앵커 트릭을 모든 종류의 파일과 함께 사용할 수 있지만 결과는 예측할 수 없습니다. 일반적으로 GIF 및 JPG와 같은 일반적인 형식의 트릭을 저장하십시오.

대부분의 브라우저는 브라우저 크기에 맞게 이미지의 크기를 자동으로 조정합니다. 즉, 큰 이미지는 실제 크기보다 작아 보이지만 사용자는 전체 이미지를 다운로드 할 때까지 기다려야합니다.

이것은 상대 참조이기 때문에 표시된 이미지는 HTML 파일과 동일한 디렉토리에 있어야합니다. 사용자가 링크를 클릭하면 페이지가 이미지로 대체됩니다.

외부 링크는 쉽게 만들 수 있지만 몇 가지 문제가 있습니다.

이미지를 미리 보지 않습니다. 사용자는 그림이 무엇인지 알아내는 텍스트 설명 만 가지고 있습니다.
그들은 흐름을 방해합니다. 페이지에 일련의 이미지가 포함되어있는 경우 이미지를 보려면 페이지를 계속 나가야합니다.
기본 페이지로 돌아가려면 백업해야합니다. 이미지는 웹 페이지처럼 보이지만 그렇지 않습니다. 이미지에 링크 또는 기타 설명 텍스트가 없으면 웹 페이지로 돌아갈 방법을 나타냅니다. 대부분의 사용자는 브라우저의 뒤로 버튼을 클릭하는 것을 알고 있지만 모든 사용자가 무엇을해야하는지 알지는 않습니다.

태그를 사용하여 인라인 이미지를 추가하는 방법

이미지에 링크를 제공하는 대신 페이지에 이미지를 포함시킬 수 있습니다.

코드는이 이미지가 페이지에 포함 된 방법을 보여줍니다:

embeddedImage. html

수잔 B. 상수

수잔 B. 상수 는 신세계에서 최초로 성공한 영국 식민지 인 제임스 타운에 정착민을 데려온 세 개의 작은 함대의 기함이었다. 이것은 버지니아 주 제임스 타운 근처에 위치한 복제품입니다.

이미지 태그는이 페이지의 별입니다. 이 태그를 사용하면 이미지 파일을 잡고 페이지에 직접 통합 할 수 있습니다. 이미지 태그는 원샷 태그입니다. 그것은로 끝나지 않습니다. 대신 정의 끝에있는 문자를 사용하여이 태그에 내용이 없음을 나타냅니다.

당신은 수잔 B를 주목했을 것입니다. 상수 는이 효과를 얻기 위해 태그를 사용한 페이지에서 기울임 꼴로 표시됩니다. 강조, 의미 및 강조를 의미합니다. 기본적으로 쌍 내의 모든 텍스트는 기울임 꼴로 표시되며 텍스트는 굵게 표시됩니다. CSS로이 동작을 변경할 수 있습니다.

src (source)

src 속성을 사용하면 이미지의 URL을 지정할 수 있습니다. 이것은 절대 또는 상대 참조 일 수 있습니다. 자신의 디렉토리 구조에서 이미지에 링크하는 것이 가장 좋은 이유는 사용자가 페이지를 방문 할 때 외부 이미지가 계속있을 수 있기 때문입니다.

height 및 width

height 및 width 속성은 이미지의 크기를 나타내는 데 사용됩니다. 브라우저는이 정보를 사용하여 페이지에서 예약 할 공간을 나타냅니다.

height와 width 속성은 이미지의 크기를 묘사해야한다. 이 속성을 사용하여 실제로 이미지의 크기를 변경할 수 있지만 나쁜 생각입니다. 이미지 편집기로 이미지 크기를 변경하십시오. 이러한 속성을 사용하면 작은 버전이 표시 되더라도 사용자는 전체 이미지를 기다려야합니다. 사용자가 보지 않을 정보를 기다리지 않게하십시오. alt (대체 텍스트)