연말까지 매일 웹 사이트를 만드는 대학생~ 22일째 학습 액자~

5751 단어 CSS

입문


안녕하세요.요즘 주말에 온천 @70days_js!
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
오늘은 와이어프레임이라는 개념을 배워서 2열 레이아웃의 사이트를 만들어 보았다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 22일째다.(2019/11/9)
잘 부탁드립니다.

사이트 URL

  • https://sin2cos21.github.io/day22.html
  • ###했던 일
    인터넷의 보도를 참고하여 테두리를 배웠다.
    구성을 염두에 두고 실타래를 손으로 쓴 뒤 제작을 시작했다.
    구성 ↓

    필기 와이어프레임↓

    사실 그 뒤에도 어플리케이션 등으로 숫자의 테두리를 만든 것 같지만 이번이 처음이라 그 작업은 건너뛰었다.
    만든 물건↓

    사용하는 기술은 특별히 새로운 것이 없다.헤더와main(그중에 사이드바가 있음)과footer로 나누어 썼습니다.
    
    <body>
        <header>
            <div id="logo_wrapper">
                <span>東京散歩 ~毎日ワクワクお散歩日和〜</span>
            </div>
            <nav>
                <div id="nav_topic_wrapper">
                    <div>TOP</div>
                    <div>TOPIC 1</div>
                    <div>TOPIC 2</div>
                    <div>TOPIC 3</div>
                </div>
            </nav>
        </header>
        <div id="main_contents_wrapper">
            <main>
                <div id="article">
                    <div>
                        <img src="pic.png" alt="記事1のサムネイル">
                        <div>
                            <h2>記事1のタイトル</h2>
                            <span>記事1の内容</span>
                        </div>
    
                    </div>
                    <div>
                        <img src="pic.png" alt="記事2のサムネイル">
                        <div>
                            <h2>記事2のタイトル</h2>
                            <span>記事2の内容</span>
                        </div>
                    </div>
            </main>
            <aside id="sidebar">
                <h3>運営者name</h3>
                <img src="pic.png" alt="プロフィール画像">
                <span>fugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafuga
                </span>
            </aside>
        </div>
        <footer>Copyright © 2019 @js70days, All rights reserved.</footer>
    </body>
    

    감상


    실타래의 존재를 알기 때문에 앞으로 갈고 닦아서 좋은 콘텐츠를 만들 수 있도록 하겠습니다.확실히 최초 제작 구상과 안 만들기 때문에 쉽게 할 수 있는 부분이 다르다.
    끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

    참고 자료

  • 홈페이지를 만드는 초보자에게 와이어프레임 만드는 법을 잘 모르는 사람http://websae.net/wireframe-20150303/
  • 신호항탑의 대칭세계를 바라보다(무료 사진소재는 자유소재의 백분https://pakutaso.com/20191104309post-23997.html
  • 와이어프레임에 대한 참고 가치가 있습니다.정말 감사합니다.

    좋은 웹페이지 즐겨찾기