인생 코딩

QTextBrowser, QTextEdit에 스타일 적용하는 방법

1. 컨텐츠 자체에 style 속성 설정하기

QTextBrowser나 QTextEdit에 들어가는 내용을 html로 작성하고, 해당 요소마다 style을 설정해준다.

QString content = "<h2 style='color:red; font-weight:bold; margin-top:25px; margin-bottom:25px;'>제목</h2>"
                  "<p style='font-size:12pt; color:#4e4e4e;'>내용입니다...</p>";
ui->textBrower->setText(content);

QTextBrowser나 QTextEdit에서는, 모든 HTML 요소가 지원되지는 않는다. Qt에서 지원하는 요소와 속성들만 스타일 설정이 가능하다.

* 지원되는 HTML Subset

https://doc.qt.io/qt-5/richtext-html-subset.html

2. CSS Stylesheet 적용하기

CSS style을 정의한 후, textBrowser의 defaultStyleSheet으로 지정해 준다.

QString sheet = "h1 {font-size:24pt; margin-top:25px; margin-bottom:25px;} "
                "h2 {font-size:22pt; margin-top:25px; margin-bottom:25px;} "
                "h3 {font-size:20pt; margin-top:25px; margin-bottom:25px; font-weight:bold; color: #21313e; } "
                "h4 {font-size:18pt; margin-top:25px; margin-bottom:25px;} "
                "h5 {font-size:16pt; margin-top:25px; margin-bottom:25px;} "
                "body {font-size:14pt; color:#4e4e4e;}"
                "ul li {margin-top: 10px; margin-bottom: 10px; color: #4e4e4e;}";
ui->textBrowser->document()->setDefaultStyleSheet(sheet);

* Qt stylesheet 참고

https://doc.qt.io/qt-5/stylesheet.html

3. 컨텐츠 중간에 가로선 넣기

내용 중간에 <hr/> 태그를 넣어주면 가로선이 생긴다.

QString content = "<h2 style='color:red; font-weight:bold; margin-top:25px; margin-bottom:25px;'>제목 1</h2>"
                  "<p style='font-size:12pt; color:#4e4e4e;'>내용입니다...</p>"
                  "<hr/>"
                  "<h2 style='color:red; font-weight:bold; margin-top:25px; margin-bottom:25px;'> 제목 2 </h2>"
                  "<ul><li>내용 1</li> <li>내용 2</li></ul>;
ui->textBrower->setText(content);

4. 하이퍼링크 클릭하면, 외부 브라우저에서 열리게 하기

링크를 클릭하면 브라우저를 실행해서 해당 링크가 열리게 하는 방법

: 내용에 a 태그로 링크를 넣어주고, setOpenExternalLinks(true); 설정을 해준다.

QString content = "<a href='https://www.google.com/'>구글 바로가기</a>";
ui->textBrower->setText(content);
ui->textBrowser->setOpenExternalLinks(true);