교과서 단원명
1
기적의 작용과 반발
학습 목표
- 기적작용이 발생할 조건을 알아본다.
- 기적작용의 여러 요소를 이해한다.
- 기적작용의 반발을 이해한다.
[[div class="chapter"]]
[[div class="top"]]
[[div class="number"]]
1
[[/div]]
[[div class="title"]]
기적의 작용과 반발
[[/div]]
[[/div]]
[[div class="intro"]]
[[div class="intro-title"]]
학습 목표
[[/div]]
[[div class="intro-content"]]
* 기적작용이 발생할 조건을 알아본다.
* 기적작용의 여러 요소를 이해한다.
* 기적작용의 반발을 이해한다.
[[/div]]
[[/div]]
[[/div]]
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600&display=swap'); .chapter { display: flex; flex-direction: column; } .chapter .top, .chapter .intro { display: flex; flex-direction: row; } .chapter > div > div > p { margin-block-start: 0; margin-block-end: 0; } .chapter .number, .chapter .title { font-family: 'Noto Serif KR', serif; } .chapter .number { position: relative; } .chapter .number p { position: absolute; top: -.6em; left: -.2em; color: #212850; font-size: 10rem; -webkit-text-stroke: 4px white; text-shadow: .05em 0 .5rem rgba(0, 0, 0, .5); } .chapter .title { display: flex; align-items: center; flex-grow: 1; } .chapter .title p { position: relative; width: 100%; margin-right: 12px; border-bottom: 4px solid #212850; border-image: linear-gradient(to right, transparent 20px, #212850 50%); border-image-slice: 1; border-image-width: 0 0 5px 0; color: #333f50; font-size: 3rem; } .chapter .title p::after { position: absolute; right: -12px; bottom: -12px; width: 20px; height: 20px; background: #212850; border-radius: 50%; content: ""; } .chapter .title p, .chapter .intro { padding-left: 3.5rem; } .chapter .intro .intro-title { display: flex; align-items: center; font-size: 1.2rem; font-weight: bold; } @media (min-width: 768px) and (max-width: 1039px) { .chapter .title p { font-size: 5vw; } } @media (max-width: 767px) { .chapter .number p { left: -.3em; font-size: calc(10vw + 5rem); } .chapter .title p { font-size: calc(3vw + 1rem); } .chapter .intro { flex-direction: column; } .chapter .intro .intro-title { margin-top: 1em; } .chapter .intro .intro-content ul { margin-top: .25em } } @media (max-width: 580px) { .chapter .title p, .chapter .intro { padding-left: 2.5rem; } .chapter .intro .intro-content ul { padding-inline-start: 20px; } }
페이지 내역: 38, 마지막 수정: 28 Jul 2021 02:21