기술자료 (KB)/Power Platform
PowerApps- HTML 텍스트
이완주
2025. 5. 24. 10:40
HTML 코드로 작성되어 있는 내용을 PowerApps에 적용하고 싶다.
예를 들어 아래 문서처럼 HTML과 CSS 가 포함되어 있는 문서를 PowerApps에 넣기 위해서는 코드 수정이 필요하다.
https://leemcse.tistory.com/507/#comment29755926
Microsoft SSPR(Self-Service Password Reset) 가이드
V0로 만들어 봤습니다.비밀번호를 잃어 버린 사용자에게 전달하면 좋을 듯 하네요. 🛡️ Microsoft SSPR 비밀번호 재설정 안내 Self-Service Password Reset 사용 방법 안녕하세요! Microsoft SSPR(Self-Service Passwo
leemcse.tistory.com
V0의 도움으로 쉽게 수정했다. 그런데 오류가 발생해서 확인해 보니
아래 코드 처럼 "로 되어 있는 모든 코드 내용을 ""로 변경해야 가능함을 확인했다.
메모장 바꾸기를 통해 " 를 ""로 변경
<div style=""font-family: 'Segoe UI', Arial, sans-serif; max-width: 100%; background-color: #f5f5f5; padding: 20px;"">
HTML 텍스트 추가
HtmlText에 코드를 추가하면 화면처럼 내용이 삽입된다.
"<div style=""font-family: 'Segoe UI', Arial, sans-serif; max-width: 100%; background-color: #f5f5f5; padding: 20px;"">
<!-- 헤더 -->
<div style=""background-color: #0078d4; color: white; padding: 20px; text-align: center; border-radius: 8px; margin-bottom: 20px;"">
<h2 style=""margin: 0; font-size: 20px;"">🛡️ Microsoft SSPR 비밀번호 재설정 안내</h2>
<p style=""margin: 5px 0 0 0; font-size: 14px;"">Self-Service Password Reset 사용 방법</p>
</div>
<!-- 인사말 -->
<div style=""background-color: #e3f2fd; border-left: 4px solid #0078d4; padding: 15px; margin-bottom: 20px; border-radius: 4px;"">
<p style=""margin: 0; color: #333;""><strong>안녕하세요!</strong><br>
Microsoft SSPR(Self-Service Password Reset)을 통해 비밀번호를 직접 재설정하는 방법을 안내해드립니다.</p>
</div>
<!-- SSPR 소개 -->
<div style=""margin-bottom: 25px;"">
<h3 style=""color: #0078d4; font-size: 16px; margin-bottom: 10px; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px;"">🔒 SSPR이란?</h3>
<p style=""color: #666; margin-bottom: 15px;"">SSPR은 IT 관리자의 도움 없이 사용자가 직접 비밀번호를 재설정할 수 있는 Microsoft의 셀프서비스 기능입니다.</p>
<div style=""display: flex; flex-wrap: wrap; gap: 10px;"">
<span style=""background-color: #e8f4fd; color: #0078d4; padding: 6px 10px; border-radius: 15px; font-size: 12px; border: 1px solid #b3d9f7;"">✅ 24시간 이용 가능</span>
<span style=""background-color: #e8f4fd; color: #0078d4; padding: 6px 10px; border-radius: 15px; font-size: 12px; border: 1px solid #b3d9f7;"">⚡ 즉시 재설정</span>
<span style=""background-color: #e8f4fd; color: #0078d4; padding: 6px 10px; border-radius: 15px; font-size: 12px; border: 1px solid #b3d9f7;"">🔐 안전한 인증</span>
</div>
</div>
<!-- 구분선 -->
<div style=""height: 1px; background-color: #e0e0e0; margin: 20px 0;""></div>
<!-- 단계별 안내 -->
<div style=""margin-bottom: 25px;"">
<h3 style=""color: #0078d4; font-size: 16px; margin-bottom: 15px; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px;"">📱 비밀번호 재설정 단계</h3>
<!-- 1단계 -->
<div style=""display: flex; margin-bottom: 15px; padding: 12px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;"">
<div style=""background-color: #0078d4; color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; font-size: 14px;"">1</div>
<div>
<h4 style=""margin: 0 0 5px 0; font-size: 14px; color: #333;"">SSPR 포털 접속</h4>
<p style=""margin: 0; color: #666; font-size: 13px;"">웹 브라우저에서 <strong>aka.ms/sspr</strong> 또는 <strong>passwordreset.microsoftonline.com</strong>에 접속합니다.</p>
</div>
</div>
<!-- 2단계 -->
<div style=""display: flex; margin-bottom: 15px; padding: 12px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;"">
<div style=""background-color: #0078d4; color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; font-size: 14px;"">2</div>
<div>
<h4 style=""margin: 0 0 5px 0; font-size: 14px; color: #333;"">사용자 ID 입력</h4>
<p style=""margin: 0; color: #666; font-size: 13px;"">회사 이메일 주소(예: user@company.com)를 입력하고 ""다음"" 버튼을 클릭합니다.</p>
</div>
</div>
<!-- 3단계 -->
<div style=""display: flex; margin-bottom: 15px; padding: 12px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;"">
<div style=""background-color: #0078d4; color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; font-size: 14px;"">3</div>
<div>
<h4 style=""margin: 0 0 5px 0; font-size: 14px; color: #333;"">본인 인증</h4>
<p style=""margin: 0 0 8px 0; color: #666; font-size: 13px;"">등록된 인증 방법 중 하나를 선택합니다:</p>
<ul style=""margin: 0; padding-left: 15px; color: #666; font-size: 13px;"">
<li>휴대폰 SMS 인증</li>
<li>휴대폰 음성 통화</li>
<li>대체 이메일 주소</li>
<li>보안 질문 답변</li>
</ul>
</div>
</div>
<!-- 4단계 -->
<div style=""display: flex; margin-bottom: 15px; padding: 12px; background-color: #f8f9fa; border-radius: 6px; border: 1px solid #e0e0e0;"">
<div style=""background-color: #0078d4; color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; margin-right: 12px; font-size: 14px;"">4</div>
<div>
<h4 style=""margin: 0 0 5px 0; font-size: 14px; color: #333;"">새 비밀번호 설정</h4>
<p style=""margin: 0; color: #666; font-size: 13px;"">인증 완료 후 새로운 비밀번호를 입력하고 확인합니다. 회사 비밀번호 정책을 준수해야 합니다.</p>
</div>
</div>
</div>
<!-- 구분선 -->
<div style=""height: 1px; background-color: #e0e0e0; margin: 20px 0;""></div>
<!-- 비밀번호 정책 -->
<div style=""margin-bottom: 25px;"">
<h3 style=""color: #0078d4; font-size: 16px; margin-bottom: 10px; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px;"">🛡️ 비밀번호 정책</h3>
<div style=""background-color: #fff8e1; border: 1px solid #ffcc02; border-radius: 6px; padding: 15px;"">
<h4 style=""margin: 0 0 10px 0; color: #f57c00; font-size: 14px;"">⚠️ 새 비밀번호는 다음 조건을 만족해야 합니다:</h4>
<ul style=""margin: 0; padding-left: 20px; color: #f57c00; font-size: 13px;"">
<li>최소 8자 이상</li>
<li>대문자, 소문자, 숫자, 특수문자 중 3가지 이상 포함</li>
<li>이전 비밀번호와 달라야 함</li>
<li>사용자 이름이나 표시 이름 포함 금지</li>
</ul>
</div>
</div>
<!-- 문제 해결 -->
<div style=""margin-bottom: 25px;"">
<h3 style=""color: #0078d4; font-size: 16px; margin-bottom: 15px; border-bottom: 2px solid #e0e0e0; padding-bottom: 5px;"">❗ 문제 해결</h3>
<div style=""border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; margin-bottom: 10px; background-color: #fafafa;"">
<h4 style=""margin: 0 0 5px 0; color: #333; font-size: 14px;"">SSPR이 활성화되지 않은 경우</h4>
<p style=""margin: 0; color: #666; font-size: 13px;"">IT 관리자에게 SSPR 등록을 요청하거나 기존 방법으로 비밀번호 재설정을 문의하세요.</p>
</div>
<div style=""border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; background-color: #fafafa;"">
<h4 style=""margin: 0 0 5px 0; color: #333; font-size: 14px;"">인증 정보가 없는 경우</h4>
<p style=""margin: 0; color: #666; font-size: 13px;"">휴대폰 번호나 대체 이메일을 먼저 등록해야 합니다. IT 관리자에게 문의하세요.</p>
</div>
</div>
<!-- 연락처 -->
<div style=""background-color: #e3f2fd; border: 1px solid #90caf9; border-radius: 6px; padding: 15px; margin-bottom: 20px;"">
<h3 style=""margin: 0 0 10px 0; color: #0078d4; font-size: 16px;"">📧 추가 지원이 필요한 경우</h3>
<p style=""margin: 0 0 10px 0; color: #1565c0; font-size: 14px;"">SSPR 사용에 어려움이 있으시면 IT 헬프데스크로 연락주세요.</p>
<div style=""color: #1565c0; font-size: 13px; line-height: 1.6;"">
📧 <strong>이메일:</strong> helpdesk@company.com<br>
📞 <strong>전화:</strong> 02-1234-5678<br>
🕒 <strong>운영시간:</strong> 평일 09:00 - 18:00
</div>
</div>
<!-- 빠른 링크 -->
<div style=""text-align: center; margin: 20px 0;"">
<div style=""background-color: #0078d4; color: white; padding: 12px 25px; border-radius: 6px; display: inline-block; font-weight: 500;"">
<a style=""text-decoration-line: none;"" href=""https://aka.ms/sspr"" target=""_blank"">
🔒 SSPR 포털 바로가기</a>
</div>
<p style=""font-size: 12px; color: #666; margin: 8px 0 0 0;"">aka.ms/sspr 또는 passwordreset.microsoftonline.com</p>
</div>
</div>"