연말까지 매일 웹 사이트를 만드는 대학생들~ 27일째 아날로그 반과 아날로그 요소~

입문

안녕하세요.요즘 주말에 온천 @70days_js!
오늘은 시뮬레이션반과 시뮬레이션 요소로 사이트를 만들었습니다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 27일째다.(2019/11/14)
잘 부탁드립니다.

사이트 URL

https://sin2cos21.github.io/day27.html

한 일

나는 오늘 시뮬레이션반과 시뮬레이션 요소를 사용했다.
우선 시뮬레이션 클래스, 시뮬레이션 요소가 무엇인지 대체적으로 이런 포착 방법이다.↓

위조 원소가 특정 상태(ex:hover,visited)

위조원소 원소 원소의 특정 문자나 행(ex:before,first-letter)

위조류는 원소가 어떤 상태에 있는지 지정할 수 있다.호버에 걸리면 그때 콘셉트 같은 거.
위조 원소는 원소의 내용이나 상대적으로 원소를 지정하고 싶을 때 유용하다.first-letter는 요소의 첫 번째 글자를 지정할 수 있습니다.before라면 특정 요소의 앞부분을 지정할 수 있기 때문에 상대적이다.
그럼 gif로 이 지식에 기반한 것을 만들어 보세요!↓

빨간색 부분은 호버 (위조 클래스) 와before (위조 요소) 와after (위조 요소) 로 라벨을 표시합니다.표시된 디스플레이는 콘텐츠에 직접 쓰기만 합니다.

    <div class="diplay-tag">
        <h1>擬似クラスと擬似要素</h1>
        <h2>ごほん・・・</h2>
    </div>

.diplay-tag {
    background-color: rgba(200, 0, 0, .5);
    width: 50%;
    margin: 50px auto 0 auto;
}
.diplay-tag:hover h1::before {
    content:"<h1>";
}
.diplay-tag:hover h1::after {
    content:"</h1>";
}
.diplay-tag:hover h2::before {
    content:"<h2>";
}
.diplay-tag:hover h2::after {
    content:"</h2>";
}

다음은 파란색 부분입니다. 이것은 글에서 강조하고자 하는 부분을span으로 둘러싸고hover(아날로그 클래스)에 걸리면first-line(아날로그 요소 지정, 블록 안의 첫 줄)으로 font-size를 변경합니다.

    <div class="dl-field">
        <dl>
            <dt>擬似クラスとは</dt>
            <dd>要素が特定の<span>状態</span>にあること</dd><br>
            <dt>擬似要素とは</dt>
            <dd>要素内の特定の<span>文字</span>や<span>行</span>のこと</dd>
        </dl>
    </div>

.dl-field {
    background-color: rgba(0, 0, 200, .5);
    width: 50%;
    margin: 50px auto 50px auto;
}
span {
    display: inline-block;
}
.dl-field:hover span::first-line {
    font-size: 3.5em;
}
dt {
    display: inline-block;
}
dd {
    display: inline-block;
}
.dl-field:hover dd::before {
    content: "・・・";
}

여기서 좀 번거로운 것은first-line (위조 요소) 은 블록 요소에만 사용되기 때문에span을 내부에서 블록 (또는 내부 블록) 으로 만들어야 한다는 것이다.
span {
display: inline-block;
}
마지막으로 녹색 부분입니다. 이것은 호버라면 전체 화면을 칠흑같이 변하게 하고'끝'이라는 글자를 표시합니다. 주로position:fixed입니다.또는:after(시뮬레이션 요소)를 사용하여 실현한다.

    <div class="display-image">
        hoverせよ・・・
    </div>

.display-image {
    background-color: rgba(0, 200, 0, .5);
    width: 50%;
    text-align: center;
    margin: auto;
}
.display-image:hover {
    background-color: rgba(0, 0, 0, 1);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.display-image:hover::after {
    content: "終了";
    color: white;
    position: fixed;
    font-size: 5em;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

호버에 걸리면fixed가 되고width와height가 전체 화면으로 확장되기 때문에 칠흑같이 보입니다.
또한 끝난 문자는 시뮬레이션 클래스와 시뮬레이션 요소를 조합하여 이루어진다.
.display-image:hover::after {...}
이것은 호버 (아날로그 클래스) 에 의해after (아날로그 요소) 를 설정하는 스타일입니다. 그러나 호버가 될 때만 문자를 표시할 수 있습니다.전체 화면이fixed이고 깜깜하기 때문에 문자를 표시하기 위해position을fixed로 설정하고z-index를 높이로 설정합니다.중앙은 지난번과 지난번에 사용한 방법으로 진행했다고 밝혔다.

감상

이전에 css는 각양각색의 작법이 있어서 사람들에게 매우 어려운 인상을 주었지만 최근에 나는 자유롭게 쓰면 좋겠다고 생각한다.물론 표준이 되는 작법과 방법도 있지만 적어도 학습 단계에서는 이런 지식을 먼저 놓고 기초적인 동작만 이해하고 여러 가지 일을 하는 것이 좋다.단지 css만이 할 수 있는 일이 의외로 많다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

:first-letter 위조원소-스타일시트 참조http://www.htmq.com/selector/first-letter.shtml

배웠어.정말 감사합니다.