교과서 단원명

Included page "ryrhktj" does not exist (create it now)

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;
    }
}
Site-2021K | Contact | License | Made with ❤️ in Seoul