ํผ ํ
๋ง ์์ฑ
ํผ์ ๋จธ๋ฆฌ๊ธ, ๋ฐ๋ฅ๊ธ, ์คํ์ผ ๋ฑ์ ์ค์ ์ ์ํด ํผ ํ
๋ง๋ฅผ ์์ฑํฉ๋๋ค.
ํ
๋ง CSS ๊ธฐ๋ณธ๊ฐ
:root ์ ์๋ ์์์ฝ๋๋ฅผ ๋ณ๊ฒฝํ์ฌ ์ฝ๊ฒ Style์ ๋ณ๊ฒฝ ํ ์ ์์ต๋๋ค.
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
body, td {
font-family: "Pretendard", Arial, Helvetica, sans-serif;
}
:root{
/* ์น์
๋ฐฐ๊ฒฝ์ */
--custom-brand-background-color:#231f20;
/* ์น์
์ผ์ชฝ ํ
๋๋ฆฌ์ */
--custom-brand-border-color:#231f20;
/* ์น์
๋ด์ฉ ๊ธ์ ์ */
--custom-brand-h3-color:#fff;
/* ์น์
์ ๋ชฉ ๊ธ์ ์ */
--custom-brand-h3-title-color:#EF4023;
/* ์ ์ถ ๋ฒํผ ๋ฐฐ๊ฒฝ ์ */
--custom-brand-button-background-color:#231f20;
/* ์ ์ถ ๋ฒํผ ๊ธ์ ์ */
--custom-brand-button-txt-color:#fff;
}
/* ํ
ํ๋ฆฟ type ๋ถ๋ฅ */
.subject-wrap h3 {
font-size: 1.25rem;
font-weight: 500;
color: var(--custom-brand-h3-color);
background-color: var(--custom-brand-background-color);
border-left: 4px solid var(--custom-brand-border-color);
}
.subject-wrap h3 strong {
display: inline-block;
color: var(--custom-brand-h3-title-color);
padding: 0.5rem 1rem;
margin-right: 1rem;
}
.submit-wrap button {
font-size: 1.125rem !important;
font-weight: 600 !important;
color: var(--custom-brand-button-txt-color) !important;
width: 100% !important;
height: 4.375rem !important;
background: var(--custom-brand-button-background-color) !important;
border: 0 !important;
border-radius: 0.5rem !important;
transition: 0.5s !important;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .3) !important;
}