연말까지 매일 지속적으로 웹 사이트를 제작하는 대학생~ 24일째 싱글 컬럼 레이아웃에서 웹 사이트를 제작합니다~

입문

안녕하세요.요즘 주말에 온천 @70days_js!
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
요 며칠 동안 저는 2column layout, 3column layout을 해 왔습니다. 그래서 오늘 저는 Single column layout 사이트를 만들어 보았습니다.
뭘 참고할까 말까 망설였지만 일단 자기가 한 거니까 아무것도 안 보고 했어요.응답이 지원되지 않습니다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 24일째다.(2019/11/11)
잘 부탁드립니다.

사이트 URL

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

한 일

나는 Single Column Layout으로 웹 사이트를 만들었다.
먼저 구상을 세워야 한다.↓

다음은 손으로 그림그림을 그린다.↓

마지막으로 실제 인코딩이 완료되었습니다.↓(gif, 무겁지 않을 수 있습니다. 사이트 URL로 GO!)

오늘도 별다른 하이라이트는 없었지만 이번에는 먼저 그림으로 눌렀다.

<main class="wf-sawarabimincho">
        <div id="message">
            <h2>君は準備できているか？</h2>
        </div>

        <div id="photo1" class="photo">
            <div class="photo_message">
                <h3>山にきた。さぁ、始まるぞ。</h3>
            </div>
            <div class="photo_image">
                <img src="day24_image/photo1.jpg" alt="山に来た画像">
            </div>
        </div>
　　　　...

이런 느낌main은 메시지부터 시작해서 사진1의div로 그림을 만든다.
css도 간단해요.

#message {
    padding: 300px 0;
}
#message > h2 {
    text-align: center;
    width: 100%;
    font-size: 2em;
    font-weight: 1000;
}

.photo {
    color: rgba(0, 0, 0, .8);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 100px 0;
}

#photo1 {
    background-color: rgba(255, 255, 255, 1);
}

.wf-sawarabimincho { 
    font-family: "Sawarabi Mincho"; }

.photo_message {
    width: 70%;
    font-size: 1.5em;
}

.photo_image {
    width: 100%;
    text-align: center;
}

.photo_image > img {
    width: 50vw;
}

글꼴 전체가 구글 녀석들이야.그리고 이것을 5장 설정하면 완성됩니다.

감상

나는 디자인 방법이 매우 어렵다고 생각한다.뭐랄까, 설계력을 단련해야 해.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

동물 다람쥐 나무-Pixabay의 무료 사진https://pixabay.com/ja/photos/%E5%8B%95%E7%89%A9-%E3%83%AA%E3%82%B9-%E3%83%84%E3%83%AA%E3%83%BC-%E8%87%AA%E7%84%B6-4605518/

케딜라크 1960-Pixabay의 무료 사진https://pixabay.com/ja/photos/%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E3%82%AD%E3%83%A3%E3%83%87%E3%83%A9%E3%83%83%E3%82%AF-1960-4610085/

캠핑 텐트 자연-Pixabay의 무료 사진https://pixabay.com/ja/photos/%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E3%83%86%E3%83%B3%E3%83%88-%E8%87%AA%E7%84%B6-%E5%A5%B3%E3%81%AE%E5%AD%90-691424/

텐트야영야-Pixabay의 무료사진https://pixabay.com/ja/photos/%E3%83%86%E3%83%B3%E3%83%88-%E3%82%AD%E3%83%A3%E3%83%B3%E3%83%97-%E5%A4%9C-%E3%82%B9%E3%82%BF%E3%83%BC-548022/

시 박암-Pixabay 무료 사진https://pixabay.com/ja/photos/%E5%B8%82-%E6%B3%8A-%E6%9A%97%E3%81%84-%E3%82%A2%E3%83%BC%E3%82%AD%E3%83%86%E3%82%AF%E3%83%81%E3%83%A3-89197/

오늘 사진을 많이 빌렸어요.정말 감사합니다.