연말까지 매일 웹 사이트를 꾸준히 만드는 대학생들~ 19일째 Ap●le 공식 사이트의 콘텐츠 섹션을 따라 만들어보세요~

입문

안녕하세요.
연말까지 매일 웹 사이트를 만드는 사람입니다.
예전에는 Ap●le의 공식 사이트의 내용 부분을 모방해봤다.
미묘한 완성이다.
똑같이 재현하기는 힘들잖아.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 19일째다.(2019/11/6)
잘 부탁드립니다.

한 일

오늘은 요소의 배치를 생각한 곳에 두자!따라서 다른 사이트의 복제 완료를 목표로 한다.전혀 복제하지 않는 점을 양해해 주십시오.우선 gif(본 사이트와 자신이 만든 물건을 바꾸면서 비교해 보세요. 처음에 본 것은 완벽한 복사가 아니라 본 사이트일 뿐)↓

구성이 간단합니다.

<div class="content_page">
        <h2 id="content_page_title">Ephene 50000 Pro</h2>
        <h3 id="content_page_description">カメラも、ディスプレイも、性能も、Pro。</h3>
        <div>
            <a class="icon_bector" href="/">さらに詳しく</a><a class="icon_bector" href="/">購入</a>
        </div>
    </div>

class='content_pag'에서 배경 이미지를 지정합니다.
배경 크기: 커버를 통해 전체 이미지를 맞춥니다.↓

.content_page {
...
background-image: url("iphone.jpg");
 background-size: cover;
}

그리고 화면 크기가 시간으로 바뀌면 미디어 조회를 통해 크기를 조정합니다.↓

@media screen and (max-width: 735px) and (min-width: 0px){
    .content_page {
        height: 350px;
    }
    #content_page_title {
        font-size: 30px;
    }
    .icon_bector {
        font-size: 11px;
    }
    #content_page_description {
        font-size: 14px;
    }
}

단지 이 그림이 몸에 약간 맞는 느낌 때문에 반드시 그림 사이즈에 얽매여야 합니까?의문
이미지는 웹 사이트에서 중요한 역할을 하기 때문에 자신이 생각하는 엄마가 조종하고 싶다.따라서 조사가 판명되면 이미지를 다시 보고합니다.
그 다음에 말씀드리는 김에 모의반도 오늘 공부했으니까 먼저 싣겠습니다.

.icon_bector::after{
    padding-left: .3em;
    content: ">";
    font-size: .4em;
}
.icon_bector:hover {
text-decoration: underline;
}

after 네.icon_벡터 클래스의 요소를 지정한 후에 무엇을 표시하고 싶을 때 사용합니다.
cnotent 속성에 표시할 내용을 지정합니다.
: 호버는 커서가 클래스에 멈추면 클래스에 스타일을 배치할 수 있는 편리한 기능입니다.
이런 것들을 이용해서 자바스크립트가 스타일을 바꾸기 위해 대량으로 사용되는 것을 방지하고 싶습니다.

감상

해보니까 아는 게 많네요.나는 내가 더 잘할 수 있다고 생각했지만, 오늘의 내용만 2시간 반 정도 걸렸다.자신 없어요.연말이 되면 웹 제작 일을 잘 할 거예요!
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

PAKUTASHO ( https://www.pakutaso.com/20190606175post-21617.html )

나는 너의 초상화를 빌렸다.정말 감사합니다.