목차
이 도움말에서는 Outlook에서 표 테두리에 조건부 서식을 적용하는 방법을 설명합니다. 색상, 너비 및 스타일을 변경하는 방법을 보여 드리겠습니다. 그런 다음 한 번에 여러 수정을 수행하고 여러 가지 방법으로 Outlook 표에 색상을 지정하는 방법을 알려 드리겠습니다.
먼저 이 블로그를 처음 접하는 분들을 위해 작은 헤드노트를 작성하고 싶습니다. 오늘은 템플릿의 조건부 서식에 대해 이야기하고 Outlook용 공유 이메일 템플릿 추가 기능을 사용하여 올바르게 설정하는 방법을 보여드리겠습니다. 이 도구를 사용하면 미리 저장된 완벽하게 서식이 지정된 템플릿을 이메일에 붙여넣고 몇 번의 클릭만으로 통신 루틴을 줄일 수 있습니다.
내 Outlook 테이블의 조건부 서식 자습서를 이미 읽었다면 셀의 내용과 배경색을 변경하는 방법. 그러나 이것이 Outlook 테이블을 밝게 하기 위해 할 수 있는 전부는 아닙니다. 오늘은 조건부로 표 테두리의 색상을 지정하고 너비와 스타일을 수정하는 방법을 보여드리겠습니다.
게다가 몇 가지 수정 사항을 적용하는 방법을 보여주는 마지막 장에서 작은 보너스가 여러분을 기다리고 있습니다. 동시에 테이블을 7월 4일의 불꽃놀이처럼 다채롭고 밝게 만드세요 ;)
셀 테두리 색상 변경
테두리 페인팅이 어떻게 작동하는지 보여드리기 위해, 지난 주 자습서에서 사용한 것과 동일한 샘플을 사용하겠습니다. 사례는 다음과 같습니다.Microsoft 팀, 이 GitHub 대화에서 그들의 응답을 자유롭게 확인하세요 :)
최종 참고 사항
Outlook의 테이블이 단순한 검은색 테두리가 아닌 텍스트. 개선과 창의성을 위한 여지는 충분합니다 :)
자신만의 몇 가지 페인팅 실험을 하기로 결정했다면 Microsoft Store에서 공유 이메일 템플릿을 설치하고 즐기세요!
있는 경우 남은 질문은 Outlook 표의 조건부 서식에 대한 도움이 필요합니다. 설명 섹션에 몇 단어만 남겨주시면 해결해 드리겠습니다 ;)
템플릿을 클릭하고 할인율을 선택하여 테이블에 채웁니다. 내 선택에 따라 셀의 테두리가 특정 색상으로 칠해집니다.오늘 칠할 테이블은 다음과 같습니다.
| 샘플 헤더 1 | 샘플 헤더 2 | 샘플 헤더 3 |
| ~%WhatToEnter[ {dataset:'할인 데이터세트', 열:' discount', title:'할인 선택'} ] discount |
템플릿의 HTML에서 조건부 서식을 처리하므로 이 테이블의 HTML 코드를 먼저 엽니다.
- 관심 있는 템플릿을 열고 편집 을 누릅니다.
- <1 찾기 템플릿 도구 모음의 HTML 보기 아이콘( ):
- 여러 번 수정될 원본 HTML 보기:
색상과 할인율의 연관성이 궁금하시다면 힌트를 드릴게요 :) 데이터셋! 그것이 무엇인지 전혀 모르십니까? 그런 다음 잠시 시간을 내어 채울 수 있는 Outlook 템플릿 자습서를 먼저 읽어보세요.
다음은 처음에 사용할 원본 데이터 세트이며 몇 장에서 약간 개선할 것입니다.
| 할인 | 색상 코드 |
| 10% | #00B0F0 |
| 15 % | #00B050 |
| 20% | #FFC000 |
| 25% | #4630A0 |
이 테이블에서 필요한 색상 코드를 검색해야 하는 경우 다음 매크로를 사용합니다.
~%WhatToEnter[{dataset:'Dataset with discounts',column:'Color code'}]모든 기본 사항을 다루었으므로 색상 변경을 시작하겠습니다 :)
하나의 테두리 색상 업데이트 cell
테이블에서 단일 셀의 테두리에 색상을 지정하려면 먼저 템플릿의 HTML에서 해당 행을 찾고 해당 구성요소를 자세히 살펴보겠습니다.
- " style= "는 셀의 기본 매개변수 집합을 나타냅니다.
- "너비: 32%; border: 1px solid #aeabab ”은 셀과 테두리의 너비, 색상 및 스타일입니다.
- “~%WhatToEnter[] discount” 는 셀의 내용입니다.
이 코드 줄은 단색 스타일의 1px 회색 테두리가 있는 셀을 볼 수 있음을 의미합니다. 이러한 매개변수를 바꾸면 내 템플릿의 테이블 모양이 손상될 수 있습니다. 즉, 테두리가 보이지 않습니다(붙여넣은 후에는 모든 것이 완벽하게 보이지만).
표준이 있으면 좋겠습니다. 템플릿에 테이블을 추가하고 붙여넣을 때 수정하도록 합니다. 따라서 붙여넣을 때 원래 속성을 대체할 매개변수가 있는 새 속성을 하나 추가합니다.
위의 HTML 줄을 살펴보겠습니다.
- “ style="border : 1px solid #aeabab;" 첫 번째 속성입니다. 그것들은 세포의 원본입니다.특성.
- " data-set-style= "은 붙여넣기 중에 위의 속성을 필요한 속성 집합으로 대체하는 데 도움이 되는 특수 매개변수입니다.
- " 테두리:1px 솔리드; border-color: ”는 잠시 멈출 두 번째 속성의 일부입니다. 보세요, 시작 부분은 원본과 동일하고 테두리 너비와 스타일이 동일합니다. 그러나 색상(변경하려는 매개변수)의 경우 border-color: 로 바꾸고 WhatToEnter 매크로를 붙여 넣습니다. 따라서 드롭다운 선택에 따라 매크로가 색상 코드로 대체되고 테두리가 다시 칠해집니다.
- "~%WhatToEnter[] discount" 는 여전히 셀의 내용입니다. 변경할 필요가 없습니다.
따라서 미래 색상 셀이 포함된 전체 HTML은 다음과 같습니다.
이 템플릿을 붙여넣을 때 , 업데이트된 셀의 테두리가 선택한 색상으로 즉시 색칠됩니다:
전체 행의 테두리 칠하기
이제 샘플 테이블의 전체 행을 살펴보고 어떻게 작동하는지 확인하세요. 논리는 완전히 동일합니다.두 번째 행의 모든 셀을 업데이트해야 한다는 점을 제외하면 위의 단락입니다. 위에서 다룬 동일한 수정 사항이 전체 행에 적용되면 템플릿을 붙여넣을 때 눈 깜짝할 사이에 그려집니다.
두 번째 행 색상이 있는 준비된 HTML입니다.
테두리 너비 변경
이제 테두리 색상뿐만 아니라 너비도 업데이트해 보겠습니다. 붙여넣기할 때 원래 속성을 대체하는 HTML 속성을 한 번 더 살펴보세요:
data-set-style="border: 1px solid; border-color:~%WhatToEnter[{dataset:' 할인이 있는 데이터 세트',column:'색상 코드'}]">~%WhatToEnter[{dataset:'할인이 있는 데이터 세트',column:'할인이 있는 데이터 세트',title:'할인 선택'}] 할인1px 매개변수? 색칠할 테두리의 너비입니다. 예를 들어 2로 수동으로 변경할 수 있으며 붙여 넣으면 표 테두리가 넓어집니다.
하지만 다른 방법으로 하겠습니다. 내 데이터 세트를 업데이트하고 테두리 너비가 있는 새 열을 추가합니다. 이 경우 붙여넣을 현재 비율을 선택하면 색상과 너비가 모두업데이트됨.
| 할인 | 색상 코드 | 테두리 너비 |
| 10% | #00B0F0 | 2 |
| 15% | #00B050 | 2.5 |
| 20% | #FFC000 | 3 |
| 25% | #4630A0 | 3.5 |
이제 각 줄의 두 번째 속성을 수정하고 1px 를 다음 텍스트 조각으로 바꿉니다.
border-width:~%WhatToEnter [{dataset:'Dataset with discounts',column:'Border width'}]그런 다음 두 번째 행의 세 셀 모두에 대해 반복하고 결과에 다음 HTML을 얻습니다.
이 템플릿을 저장하고 붙여 넣으면 이메일에 파란색 테두리가 넓어집니다.
테이블에서 테두리 스타일 수정
이 채널에서 apter 또 다른 매개변수인 스타일에 주의를 기울이고 싶습니다. 이것은 테두리 모양을 처리합니다. 올바르게 적용하는 방법을 보여드리기 전에 데이터 세트로 돌아가 현재 상황에 맞게 수정해야 합니다.
| 할인 | 테두리스타일 |
| 10% | 점선 |
| 15% | 더블 |
| 20% | 점선 |
| 25% | 능선 |
각 할인율을 테두리 스타일과 연결하고 미래를 위해 이 데이터 세트를 저장했습니다. 내 HTML의 스타일을 검색하는 매크로는 다음과 같습니다.
~%WhatToEnter[{dataset:"Dataset with discounts",column:"Border style"}]이제 다음 코드 조각을 얻기 위해 위의 매크로로 솔리드(내가 계속 사용해 온 기본 스타일)를 대체하여 두 번째 행의 속성을 변경합니다.
data-set-style="border: 1px #aeabab; border-style: ~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border style'}]다음은 최종 HTML입니다.
이 HTML을 복사하여 붙여 넣으면 템플릿에 추가하면 기다리지 않아도 됩니다.
조건부 서식을 설정하여 강조 표시, 텍스트 색상 및 테두리 너비를 동시에 변경
우리는 가장 많은 관심사에 도달했습니다 한 번에 여러 수정 사항을 적용하는 방법을 보여 드리겠습니다. 먼저 데이터를 검색할 데이터 세트를 업데이트하겠습니다.셀의 강조 표시, 텍스트 색상 및 테두리 너비를 변경하기로 결정했기 때문에 이러한 모든 매개 변수를 지정해야 합니다. 따라서 내 새 데이터 세트는 다음과 같습니다.
| 할인 | 색상 코드 | 배경 코드 | 테두리 너비 |
| 10% | #00B0F0 | #DEEBF6 | 2 |
| 15 % | #00B050 | #E2EFD9 | 2.5 |
| 20% | #FFC000 | #FFF2CC | 3 |
| 25% | #4630A0 | #FBE5D5 | 3.5 |
따라서 10%를 선택하면 필요한 텍스트가 파란색(# 00B0F0 )으로 칠해지고 선택한 셀의 배경이 밝은 파란색 톤(# DEEBF6 )과 테두리가 두 번 넓어집니다.
하지만 이 데이터 세트를 Outlook 테이블에 연결하여 형식을 지정할 수 있는 방법은 무엇입니까? 2개의 기사에서 이 작업을 위해 준비했습니다 :) 필요한 모든 수정을 처리할 HTML은 다음과 같습니다.
이제 적용된 모든 수정 사항을 살펴보겠습니다.
- 샘플 헤더 1 - 이 부분은 헤더 텍스트를 "색상 코드" 열의 색상으로 칠합니다. 당신이 느끼는 경우에텍스트 페인팅에 대한 기억을 되살려야 하는 것처럼 이전 튜토리얼의 테이블에서 텍스트의 글꼴 색상 변경 장을 참조하세요.
- data-set-style="background-color:~%WhatToEnter[ {dataset:'할인이 있는 데이터세트',column:'배경 코드',제목:'할인 선택'}] - 이 부분은 데이터세트의 배경 코드 열에서 코드를 가져와서 배경색을 업데이트합니다. 이 사례에 대한 자세한 설명이 필요하다고 생각되면 언제든지 셀 강조 표시 자습서를 살펴보십시오.
- data-set-style="border: solid #aeabab; border-width:~%WhatToEnter[{dataset:'Dataset with discounts',column:'Border width'}] – 이 HTML 라인의 테두리 너비는 테두리 너비 에 지정된 너비로 변경됩니다. 이전에 다루었으므로 놓친 부분이 있는지 살펴보십시오.
이러한 속성이 추가된 템플릿을 붙여넣으면 기다리지 않아도 됩니다.
이 주제를 마치기 전에 드리고 싶은 작은 메모가 있습니다. 테이블에서 테두리 색 지정을 테스트하는 동안 Outlook의 온라인 및 데스크톱 버전 모두에서 상당히 모호한 테두리 동작에 직면했습니다. 조금 혼란스러워서 설명을 위해 개발자에게 연락했습니다. 그들은 서로 다른 Outlook 클라이언트가 서로 다른 방식으로 테이블을 렌더링하며 이러한 동작의 원인이 Outlook의 버그라는 사실을 알아냈습니다.
우리 팀은 이 문제를 다음에 보고했습니다.
