마크다운에 이미지 추가 및 이미지 크기 수정

Makeudaun E Imiji Chuga Mich Imiji Keugi Sujeong



'Markdown'은 텍스트, 제목, 단락, 목록 및 링크를 추가할 수 있는 다양한 기능을 제공하는 Markup 언어 중 하나이며 Markdown에서 이러한 요소에 서식을 적용할 수도 있습니다. Markdown에 이미지를 삽입한 다음 Markdown에 추가한 이미지의 크기를 수정할 수도 있습니다. Markdown에서 이미지의 크기를 수정하거나 변경하려면 태그를 사용해야 합니다. 이 가이드에서는 Markdown에서 이미지를 추가하는 방법과 Markdown에서 이미지 크기를 수정하는 방법을 보여줍니다.

마크다운에 이미지를 추가하는 경우:

구문은 아래에 나와 있습니다.

![alt text ](확장자가 있는 이미지/이미지 이름의 경로 '마우스오버 시 표시되는 텍스트' )

마크다운에서 이미지 크기 수정:

Markdown에서 이미지 크기를 수정하기 위해 HTML의 ' ' 태그를 사용합니다. 이 태그만 Markdown에서 이미지 크기를 수정하는 데 도움이 되며 이 ' ' 태그의 구문은 아래에 나와 있습니다.







< 이미지 src = '이미지 이름' 모든 것 = '' 너비 = '값' = '값' >

너비와 높이 값을 숫자와 백분율로 설정하여 이미지의 크기를 변경할 수 있습니다. Markdown에서 이미지 크기를 수정하기 위해 이 ' ' 태그의 style 속성을 사용할 수도 있습니다.



예 # 01:

Markdown 코드를 수행하기 위해 Visual Studio Code를 사용합니다. Markdown 코드의 경우 텍스트 편집기와 미리 보기 창을 모두 열어야 합니다. 텍스트 편집기에서 입력을 추가해야 하고 미리 보기 창에서 출력을 얻습니다. 텍스트 편집기에서 먼저 '!'를 배치하여 Markdown에 이미지를 추가합니다. 기호를 클릭한 다음 '대체 텍스트'를 추가하는 대괄호를 추가합니다. 이제 이미지의 경로를 추가합니다.



코드와 이미지가 같은 디렉토리에 저장되기 때문에 확장자와 함께 이미지 이름을 입력합니다. 그래서 여기에 'cloud.png'라는 이름을 추가합니다. 그런 다음 'Cloud Image'라는 텍스트를 추가하고 이것은 마우스 오버 시에만 표시되는 텍스트입니다. 이제 이미지가 추가되고 미리보기 창에서도 이 이미지를 볼 수 있습니다.





클라우드 이미지는 위에 표시된 Markdown 코드에 이 이미지를 추가했기 때문에 아래에 표시됩니다.



예 # 02:

이제 ' ' 태그를 사용하여 이 이미지의 크기를 수정합니다. 먼저 이미지의 이름이나 경로가 추가되는 'src'를 입력합니다. 그런 다음 'alt'를 배치하고 'Cloud Image'를 조정합니다. 이미지의 '너비'를 '230'으로 조정했습니다. '높이'가 '300'으로 조정됩니다. 또한 이 ' ' 태그에 '제목'을 추가하고 이 '제목'의 값은 '클라우드 제목'입니다. 이제 이미지의 크기가 수정되었습니다. 미리보기 창에서 수정된 이미지의 크기를 확인할 수 있습니다.

이 결과에서 이미지의 크기는 수정되고 이미지의 '너비'는 '230'이고 '높이'는 '300'입니다. Markdown 코드에서 이 너비와 높이를 조정했기 때문입니다.

예 # 03:

값을 백분율로 지정하여 이미지 '너비'와 '높이'를 수정할 수도 있습니다. 이미지의 이름이나 경로를 추가하고 'alt'를 'Cloud Image'로 조정한 후 이미지의 'width'와 'height'를 '50%'로 설정했습니다. 그런 다음 '제목'을 추가하고 이 태그를 닫습니다.

다음은 ' ' 태그를 사용하여 크기를 수정한 이미지입니다. 이미지의 높이와 너비는 '50%'입니다.

예 # 04:

이제 Markdown에서 이미지 크기를 수정하기 위해 이 ' ' 태그의 'style' 속성을 활용하고 있습니다. 이미지 이름을 추가한 다음 'alt' 속성을 추가해야 합니다. 그런 다음 'style' 속성을 넣고 'width and height'를 값으로 추가했습니다. 우리가 설정한 '너비'는 '500px'이고 '높이'는 '400px'인 픽셀 단위입니다. 이제 이미지 크기가 그에 따라 조정됩니다.

이 결과의 이미지 크기가 업데이트되었습니다. '너비'는 이제 '500px'이고 '높이'는 '400px'입니다. 이것은 style 속성에서 너비와 높이를 조정한 위에 제공된 Markdown 코드의 결과로 볼 수 있습니다.

예 # 05:

다른 이미지를 추가하고 있습니다. 그러나 이 Markdown 코드에서는 이미지의 크기를 변경하지 않습니다. ' ' 태그를 사용한 경우에만 이미지의 크기가 변경됩니다. 우리는 '!' 그런 다음 '태양 이미지'인 대괄호 안에 텍스트를 추가하십시오. 대괄호를 닫은 후 이미지 이름 'New_sun.png'를 삽입한 괄호를 넣은 다음 마우스 오버 시 표시될 텍스트를 추가합니다. 이미지의 원래 크기가 결과에 표시됩니다.

Markdown 코드에 이 이미지를 추가하면 태양 이미지가 표시됩니다. 또한 ' ' 태그를 사용하지 않고는 이미지의 크기를 조정할 수 없기 때문에 이미지의 원래 크기가 보입니다.

예 # 06:

' ' 태그를 사용하여 이제 이 이미지의 크기를 변경합니다. 먼저 크기를 수정하려는 이미지의 이름이나 경로를 'src' 필드에 추가합니다. 이미지의 '너비'와 '높이'가 모두 '300'으로 변경되었습니다. 이제 이미지의 크기가 변경되었습니다. 미리보기 창에 이미지의 새 크기가 표시됩니다.

이미지의 너비와 높이가 모두 '300'으로 수정되었습니다.

예 # 07:

이미지의 '너비' 및 '높이' 값을 백분율로 설정하면 이러한 치수를 쉽게 변경할 수 있습니다. 우리는 둘 다 이미지의 '너비'와 '높이'를 '40%'로 조정한 다음 이 태그를 닫았습니다.

다음은 높이가 40%이고 너비가 40%인 이미지입니다. 이미지 이름을 추가한 후 ' ' 태그 안에 이 너비와 높이를 추가했습니다.

예 # 08:

이제 ' ' 태그의 'style' 속성을 사용하여 Markdown에서 이미지 크기를 변경합니다. 이미지 이름과 'alt' 속성을 추가한 후 'style' 속성에 값으로 'width and height'를 추가했습니다. 우리가 지정하는 '너비'는 '450px'이고 '높이'도 '450px'로 조정됩니다. 이미지 크기는 이제 너비와 높이의 새로운 값에 따라 적절하게 변경됩니다.

이제 이 코드의 결과는 아래에 표시되는 미리보기 창에도 표시됩니다. 이 이미지의 너비와 높이는 이제 아래 결과에서 '450px'입니다.

결론:

이 가이드에서 이미지를 추가하는 개념을 자세히 살펴보았고 Markdown에서 이미지 크기를 수정하는 방법도 살펴보았습니다. Markdown에 이미지를 추가하고 ' ' 태그를 사용하여 크기를 수정했으며 Markdown에서 이 모든 작업을 수행하는 방법을 보여주었습니다. 너비와 높이 값을 숫자와 백분율로 입력하여 이미지의 크기를 변경했습니다. 또한 Markdown에서 이미지 크기를 업데이트하거나 수정하기 위해 ' ' 태그의 스타일 속성을 활용했습니다.