[C#] 구글 블로그에서 이미지 태그에 alt 속성 추가 일괄 처리 하는 방법

블로그 글을 작성할 때, 이미지를 올바르게 처리하는 것이 중요한데요~ 특히, 이미지가 제대로 표시되도록 돕고, 검색 엔진이 이미지를 인식할 수 있도록 alt 속성을 추가하는 것은 필수랍니다.

하지만 매번 이미지마다 alt 속성을 수동으로 추가하는 것은 번거로운 일이 될 수 있어요, 특히 사진을 정말 많이 올리는 경우, 대체 속성을 입력하는 게 여간 번거로운 일이 아니네요.

이번 포스팅에서는 C#을 사용하여 HTML 코드 내 이미지 태그에 alt 속성을 자동으로 추가하고, 이미지 URL에 =s16000을 끝에 덧붙여주는 방법을 소개해 드릴게요.

요약 : 이미지 태그에 alt 속성을 추가하고, src 속성 끝에 =s16000을 자동으로 추가하는 기능을 구현해보겠습니다.

아래는 HTML 코드 내의 이미지 태그에 alt 속성을 추가하고, src에 =s16000을 추가하는 C# 코드입니다.

C# 이미지 태그에 alt 속성 추가 일괄 처리 코드 예시

public void SetImgAttributes(string html, string altText)
{
    try
    {
        // 입력된 HTML이 비어 있거나 null인지 확인
        if (string.IsNullOrEmpty(html))
        {
            m_ErrBs = "Input HTML is null or empty.";
            return;
        }

        if (string.IsNullOrWhiteSpace(altText))
        {
            m_ErrBs = "No Alt text provided.";
            return;
        }

        // HTML에서 <br /> 및 빈 <p> 태그 제거
        html = Regex.Replace(html, @"<br />", string.Empty);
        html = Regex.Replace(html, @"<p></p>", string.Empty);

        // HtmlDocument 객체 생성 및 로드
        HtmlDocument document = new HtmlDocument();
        document.LoadHtml(html);

        // img 태그 탐색
        var imgNodes = document.DocumentNode.SelectNodes("//img");
        if (imgNodes != null)
        {
            foreach (HtmlNode imgNode in imgNodes)
            {
                // alt 속성이 비어 있으면 alt 속성 추가
                if (string.IsNullOrEmpty(imgNode.GetAttributeValue("alt", "")))
                {
                    imgNode.SetAttributeValue("alt", altText);
                }

                // src 끝에 =s16000 추가 (이미 있을 경우 생략)
                var srcValue = imgNode.GetAttributeValue("src", "");
                if (!srcValue.EndsWith("=s16000"))
                {
                    imgNode.SetAttributeValue("src", srcValue + "=s16000");
                }

                // width와 height 속성 제거
                imgNode.Attributes.Remove("width");
                imgNode.Attributes.Remove("height");
            }
        }

        // 최종 HTML 출력
        string modifiedHtml = document.DocumentNode.OuterHtml;
        Console.WriteLine(modifiedHtml);
    }
    catch (Exception ex)
    {
        m_ErrBs = $"An error occurred: {ex.Message}";
    }
    finally
    {
        // 결과 출력 및 클립보드에 복사
        m_TxtOut.Text = m_OutBs;
        m_TxtErr.Text = m_ErrBs;
        if (!string.IsNullOrEmpty(m_OutBs))
            Clipboard.SetDataObject(m_OutBs);
    }
}

코드 동작 설명

입력된 HTML 처리
- html 파라미터로 전달된 HTML 코드에서 이미지 태그를 찾아 alt 속성을 추가합니다. 만약 alt 속성이 비어있으면 새로 값을 추가하고, 이미지 src 속성 끝에 =s16000을 덧붙입니다.
불필요한 태그 제거
- HTML에서 <br />와 빈 <p></p> 태그를 제거하여 깨끗한 HTML을 만들어 줍니다.
이미지 태그 수정
- img 태그를 찾아 alt 속성을 추가하거나 변경하고, src 끝에 =s16000을 추가합니다. 또한 width와 height 속성은 모두 제거합니다.
수정된 HTML 반환
- 최종적으로 수정된 HTML을 출력하고, 클립보드에 복사할 수 있도록 합니다.

사용 예시

입력 HTML과 출력 HTML을 비교해 보겠습니다. 입력된 HTML에서 img 태그에 alt 속성이 없는 경우, 이 코드가 alt 속성을 추가하고, src 속성에 =s16000을 추가해 줍니다.

입력 HTML

<html>
  <body>
    <img src="https://example.com/image1.jpg" />
    <img src="https://example.com/image2.jpg" alt="" />
  </body>
</html>

출력 HTML

<html>
  <body>
    <img src="https://example.com/image1.jpg=s16000" alt="대체" />
    <img src="https://example.com/image2.jpg=s16000" alt="대체" />
  </body>
</html>