| HTML |
|---|
<style>
:root {
--accent: #464FEB;
--max-print-width: 540px;
--text-title: #242424;
--text-sub: #424242;
--font: "Segoe Sans", "Segoe UI", "Segoe UI Web (West European)", -apple-system, "system-ui", Roboto, "Helvetica Neue", sans-serif;
--overflow-wrap: break-word;
--icon-background: #F5F5F5;
--icon-size: 24px;
--icon-font-size: 20px;
--number-icon-size: 16px;
--number-icon-font-size: 12px;
--number-icon-color: #ffffff;
--divider-color: #f0f0f0;
--timeline-ln: linear-gradient(to right, transparent 0%, #e0e0e0 15%, #e0e0e0 85%, transparent 100%) no-repeat 6px 12px / 1px calc(100% - 48px);
--timeline-date-color:#616161;
--divider-padding: 4px;
--row-gap: 32px;
--max-width: 1100px;
--side-pad: 20px;
--line-thickness: 1px;
--text-gap: 10px;
--dot-size: 12px;
--dot-border: 0;
--dot-color: #000000;
--dot-bg: #ffffff;
--spine-color: #e0e0e0;
--connector-color: #e0e0e0;
--spine-gap: 60px;
--h4-gap: 25px;
--card-pad: 12px;
--date-line: 1rem;
--date-gap: 6px;
--h4-line: 24px;
--background-color: #f5f5f5;
--border: 1px solid #E0E0E0;
--border-radius: 16px;
--tldr-container-title: #707070;
}
@media (prefers-color-scheme: dark) {
:root {
--accent: #7385FF;
--timeline-ln: linear-gradient(to right, transparent 0%,#525252 15%, #525252 85%, transparent 100%) no-repeat 6px 12px / 1px calc(100% - 48px);
--timeline-date-color:#707070;
--bg-hover: #2a2a2a;
--text-title: #ffffff;
--text-sub: #d6d6d6;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
--hover-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
--icon-background: #3d3d3d;
--divider-color: #3d3d3d;
--dot-color: #ffffff;
--dot-bg: #292929;
--spine-color: #525252;
--connector-color: #525252;
--background-color: #141414;
--border: 1px solid #E0E0E0;
--tldr-container-title: #999999;
}
}
@media (prefers-contrast: more),
(forced-colors: active) {
:root {
--accent: ActiveText;
--timeline-ln: Canvas;
--bg-hover: Canvas;
--text-title: CanvasText;
--text-sub: CanvasText;
--shadow: 0 2px 10px Canvas;
--hover-shadow: 0 4px 14px Canvas;
}
} .tldr-container {
display: flex;
flex-direction:column;
font-family: var(--font);
gap: 12px;
padding: clamp(12px, 4vw, 20px) 0;
border-radius: var(--border-radius);
align-items: stretch;
box-sizing: border-box;
width: calc(100vw - 17px);
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
overflow-wrap: anywhere;
word-break: break-word;
overflow-x: auto;
}
.tldr-container h2 {
color: var(--tldr-container-title);
font-weight: 600;
font-style: normal;
font-size: clamp(18px, 3vw, 20px);
line-height: 28px;
border-bottom: var(--border);
margin: 0;
}
.tldr-card {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
gap: 4px;
border-radius: 24px;
min-width: 0;
}
.tldr-card h3 {
flex: 1 1 auto;
min-width: 0;
font-size: 16px;
font-weight: 600;
line-height: 22px;
margin: 0;
font-style: normal;
color: var(--text-title);
overflow-wrap: anywhere;
word-break: break-word;
}
.tldr-card p {
font-size: 16px;
font-weight: 400;
color: var(--text-sub);
line-height: 20px;
margin: 0;
overflow-wrap: var(--overflow-wrap);
flex: 0 0 100%;
width: 100%;
gap: 10px;
padding: 0;
word-break: break-word;
hyphens: auto;
min-width: 0;
}
.tldr-card p b,
.tldr-card p strong {
font-weight: normal;
}
@media (max-width: 480px) {
.tldr-card {
gap: 8px;
}
}
</style>
<div class="tldr-container"><h2>핵심 요약</h2>
<div class="tldr-card">
<h3>패러다임 전환</h3>
<p><b>생성형 AI</b>의 등장으로 <b>소프트웨어 개발 방법론</b>이 근본적으로 변하였습니다.</p>
</div>
<div class="tldr-card">
<h3>무엇을 vs 어떻게</h3>
<p>전통적인 개발이 <b>“어떻게”</b>에 집중했다면, 새로운 AI 시대 개발은 <b>“무엇을”</b>에 초점을 둡니다.</p>
</div>
<div class="tldr-card">
<h3>속도와 효율</h3>
<p>생성형 AI는 <b>개발 속도를 3~5배 향상</b>시키지만, <b>보안·품질 리스크</b> 관리가 필수입니다.</p>
</div>
<div class="tldr-card">
<h3>AI 기반 개발 주류화</h3>
<p><b>2026년</b> 현재, 개발자 <b>84%</b>가 AI 코딩 도구를 사용하며 업계 표준이 되었습니다.</p>
</div>
</div> |
...