[7/23] 1차 스터디 6일차

개인 프로젝트 메뉴설계도,  스토리보드 작성

 

 메뉴설계도 v.1.0 

 

 스토리보드 v.1.0 

 

추후 첨부 예정..

 

 

 

HTML, CSS 레이아웃 작성

 

 현재 폴더 구조 

=====================

Mattarae (ROOT)

└  📁 css

    └  sanitize.css

    └  style.css

└  📁 font

    └  font.css

└  📁 img

└  📁 js

    └  script.js

└  index.html

=====================

 

 

작업 진행 현황

 

1. header

    -  로고 완료

    -  메뉴 및 검색아이콘 작업 필요

// index.html

<header id="header" class="mobile-width">
  <div class="header-inner">
    <h1 class="header-logo FredokaOne">
      <a href="#">Mattarae</a>
    </h1>
  </div>
</header>

 

2. 메인페이지 feed

    -  'feed-box' 레이아웃 구성 완료 / css 작업 진행 중

    - 팔로우TR과 인기TR 탭 구현 예정

<main id="main">
  <div class="container mobile-width">
    <div class="feed-switch-btns">
      <a class="feed-btn follower active" href="#"><span class="emoji">🌊</span>팔로우 TR</a>
      <a class="feed-btn recommend" href="#"><span class="emoji">🔥</span>인기 TR</a>
    </div>
    <div class="tarae-feed folloer-feed">
      <h2>NEW 팔로우 TR</h2>
      <article class="tarae-box">
        <div class="tr-info">
          <div class="user-nick">
            <div class="nick-thumb"><img src="img/tr_nick_thumb.PNG" alt=""></div>
            <span class="nick-name">덕덕뮤덕</span>
          </div>
          <div class="created-date">3시간 전</div>
        </div>
        <div class="tr-content">
          <h3>연뮤덕을 위한 맛집타래</h3>
          <p>연극뮤지컬닥구들을 위해 공연장 근방 맛집들을 모아둡니다. 계속 추가될 예정 ^0^</p>
          <div class="tr-thumb"><img src="img/tr_thumb_01.jpg" alt=""></div>
        </div>
        <div class="tr-foot-info">
          <div class="tags">
            <span>TAG</span>
            <span>연뮤덕</span>
            <span>공연장근처맛집</span>
            <span>샤롯데시어터</span>
            <span>대학로</span>
            <span>혜화</span>
          </div>
          <span>포크 34</span>
          <span>공유하기</span>
        </div>
      </article>
    </div>
    
    <div class="tarae-feed recommend-feed">
      <h2>NEW 인기 TR</h2>
        <article class="tarae-box">
        ...
        </article>
    </div>
  </div>
</main>