Hong Cheung 
참고하세요
이 방법을 사용하려면 .mdx를 사용해야 합니다.
저는 Markdown으로 블로그 게시물을 작성하는 것을 좋아합니다.
하지만 이미지를 수정하는 것은 어려운 점 중 하나입니다.
이 글에서는 약간의 HTML을 사용하여 이미지 크기를 조정하고 원하는 대로 배치하는 방법을 알려드리겠습니다.
걱정하지 마세요, 제가 안내해 드리겠습니다.
문제
Markdown 블로그 게시물에 이미지를 삽입하는 유일한 방법은 다음과 같습니다:
결과:
귀엽게 보이는 건 알지만, 화면 전체를 차지하고 있네요! 더 작은 크기로 표시하고 싶다면 어떻게 해야 할까요?
크기 조정
여기서 약간의 HTML로 그 문제를 해결할 수 있습니다.
를 사용하는 대신, 다음을 사용합니다:<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px;" />코드 설명:
src는 해당 고양이 이미지의 소스를 나타내는 약자입니다.
alt는 여기에 - ! [picture description here] ( Link ) 를 입력하는 곳입니다.
style은 이미지의 표시 방식을 변경하는 방법입니다. 여기서는 무조건 최대 너비 400픽셀로 표시하도록 설정했습니다.
결과:
max-width를 원하는 값으로 변경할 수 있습니다.
하지만 여기서 max-height는 변경하지 않았다는 점에 주목하세요. 이미지에 너비와 높이를 모두 고정하면 이미지가 찌그러질 수 있는데, 그건 원하지 않으실 테니까요.
따라서 이미지의 비율을 올바르게 유지하려면 max-width나 max-height 중 하나만 설정하는 것이 좋습니다.
위치
이미지를 기본 왼쪽 정렬 대신 가운데에 배치하고 싶을 수도 있습니다.
‘max-with: 400px;’ 뒤에 ‘margin: auto;‘를 추가하면 됩니다.
코드:
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />결과:
좋습니다! 이제 블로그 게시물에서 이미지 크기를 변경하는 기본 방법을 알게 되셨습니다.
이제 같은 결과를 얻을 수 있지만, 더 나은 방법이라고 할 수 있는 다른 방법을 보여드리고자 합니다.
제가 선호하는 Markdown 이미지 수정 방법을 살펴보겠습니다.
제가 선호하는 방법
코드:
<div style="max-width: 400px; margin: auto"> </div>결과:
보시다시피 결과는 위와 동일합니다! 하지만 코드는 더 깔끔해 보입니다. 더 중요한 것은, 이미지를 삽입하는 기본 방법을 그대로 사용할 수 있다는 점입니다:
그런 다음 div(이 문맥에서는 이미지를 담는 컨테이너)로 감싸면 됩니다.
<div style="max-width: 400px; margin: auto"></div>style=“max-width: 400px; margin: auto”를 기억하시나요? img에서 사용했던 것입니다.
<img src="https://cms.hongct.com/assets/e52556d3-3e4a-4859-8caa-d9a2733140e0" alt="KittyOnACouch" style="max-width: 400px; margin: auto" />우리는 단지 스타일 수정을 이미지를 담는 컨테이너에 적용하는 것뿐입니다.
<div style="max-width: 400px; margin: auto"> </div>이렇게 하면 두 가지 장점을 모두 얻을 수 있습니다! 보기에도 깔끔하네요!
읽어주셔서 감사합니다, 도움이 되었으면 좋겠습니다!
문제가 있으시면 아래 댓글 섹션에 알려주세요.
즐거운 글쓰기 되세요!
