====== HTML Images ====== * description : HTML Images * author : 오션 * email : shlim@repia.com * lastupdate : 2021-03-23 \\ ====Source of the article==== * [[https://www.w3schools.com/html/html_images.asp|HTML Images]] \\ =====HTML Images Syntax===== %%HTML%% '''' 태그는 웹 페이지에 이미지를 끼어 넣기 위해 사용합니다.\\ \\ 이미지는 기술적으로 웹 페이지에 삽입되지 않고, 웹 페이지에 링크됩니다.\\ '''' 태그는 참조할 이미지를 붙잡고 있는 공간을 만듭니다.\\ \\ ''''태그는 비어있고, 속성만을 포함하며, 종료 태그(closing tag)가 없습니다.\\ \\ ''''태그에는 2개의 필수 속성이 있습니다. \\ * src - 이미지에 대한 경로(path)를 지정합니다. * alt - 이미지를 대체하는 텍스트를 지정합니다. Syntax(씬텍스, 문법)\\

\\ =====The src Attribute===== 필수인 ''src'' 속성은 이미지에 대한 경로(URL)를 지정합니다.\\ \\ **Note:**\\ 웹 페이지가 로딩되는 순간 웹 서버에서 이미지를 가져와서 웹 페이지에 삽입하는 것은 바로 브라우저입니다.\\ 그러므로, 이미지가 실제로 해당 웹 페이지와 관계있는 동일한 곳에 있어야 합니다,\\ 그렇지 않으면, 방문자에게 깨진 링크 아이콘이 표시됩니다.\\ 브라우저가 이미지를 찾을 수 없는 경우, 깨진 링크 아이콘과 ''alt'' 텍스트가 표시됩니다.\\ \\ =====The alt Attribute===== 어떤 이유로 사용자가 이미지를 볼 수 없을 경우, 필수인 ''alt'' 속성은 이미지에 대한 대체 텍스트를 제공합니다.\\ (연결이 느리거나, src 속성에 기인한 오류 또는 사용자가 스크린 리더기를 사용할 경우)\\ alt 속성을 사용하지 않을 경우, 깨진 링크 표시와 텍스트 둘 다 표시되지 않습니다.\\

If a browser cannot find the image, it will display the alternate text:

\\ **Tip:**\\ 스크린 리더기 (screen reader)는 %%HTML%% 코드를 읽고 사용자가 콘텐츠를 들을 수 있게 하는 소프트웨어 프로그램입니다.\\ 스크린 리더기는 시각 장애가 있거나 학습장애를 가진 이들에게 유용합니다.\\ \\ =====Image Size - Width and Height===== 이미지의 너비(width)와 높이(height)를 지정하기 위해 ''style'' 속성을 사용할 수 있습니다.\\

\\ 대안으로, ''width'' 속성과 ''height'' 속성을 사용할 수 있습니다.\\

''width''와 ''height'' 속성은 항상 이미지의 너비와 높이를 픽셀 단위로 정의합니다.\\ \\ **Note:**\\ 이미지의 너비와 높이를 항상 지정하세요. 만약 너비와 높이가 지정되지 않는 경우,\\ 해당 웹 페이지는 이미지가 로딩될 때 깜작일 수 있습니다.\\ \\ =====Width and Height, or Style?===== ''width'', ''height'', 그리고 ''style'' 속성은 %%HTML%%에서 항상 유효합니다.\\ \\ 하지만 ''style'' 속성 사용을 권장합니다. 스타일 속성은 스타일 시트가 이미지의 크기를 변경하는 것을 방지합니다.\\ ====예제====

Width/Height Attribute or Style?

The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%;

The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:

\\ =====Images in Another Folder===== 이미지가 하위 폴더에 있는 경우, ''src''속성에 폴더 명을 포함시켜야 합니다.\\

\\ =====Images on Another Server/Website===== 일부 웹 사이트는 다른 서버의 이미지를 가리킵니다.\\ \\ 다른 서버의 이미지를 가리키려면, ''src'' 속성에 절대 경로(an absolute (full) URL)를 지정해야 합니다.\\

\\ **Note on external images**\\ 외부 이미지는 저작권이 있을 수 있습니다. 사용 허가를 받지 못하면 저작권법을 위배될 수 있습니다.\\ 또한 갑자기 제거 또는 변경될 수 있기 때문에 외부 이미지를 제어할 수 없습니다.\\ \\ =====Animated Images===== %%HTML%%은 애니메이션 GIF를 허용합니다.\\

\\ =====Image as a Link===== 이미지를 링크로 사용하기 위해, ''''태그를 '''' 태그 내부에 넣습니다.\\

Image as a Link

The image is a link. You can click on it.

\\ =====Image Floating===== CSS ''float'' 속성을 사용하여 이미지가 텍스트의 오른쪽이나 왼쪽으로 떠있게 합니다.\\

Floating Images

Float the image to the right

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left

A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.