연말까지 매일 웹 사이트를 만드는 대학생~ 22일째 학습 액자~
5751 단어 CSS
입문
안녕하세요.요즘 주말에 온천 @70days_js!
웹 사이트 제작에서 돈을 벌기 위해 연말까지 매일 웹 사이트를 만들고 있다.
오늘은 와이어프레임이라는 개념을 배워서 2열 레이아웃의 사이트를 만들어 보았다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 22일째다.(2019/11/9)
잘 부탁드립니다.
사이트 URL
인터넷의 보도를 참고하여 테두리를 배웠다.
구성을 염두에 두고 실타래를 손으로 쓴 뒤 제작을 시작했다.
구성 ↓
필기 와이어프레임↓
사실 그 뒤에도 어플리케이션 등으로 숫자의 테두리를 만든 것 같지만 이번이 처음이라 그 작업은 건너뛰었다.
만든 물건↓
사용하는 기술은 특별히 새로운 것이 없다.헤더와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>
감상
실타래의 존재를 알기 때문에 앞으로 갈고 닦아서 좋은 콘텐츠를 만들 수 있도록 하겠습니다.확실히 최초 제작 구상과 안 만들기 때문에 쉽게 할 수 있는 부분이 다르다.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.
참고 자료
Reference
이 문제에 관하여(연말까지 매일 웹 사이트를 만드는 대학생~ 22일째 학습 액자~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/70days_js/items/12cd31f780b42d4dc666텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
