Project) HTML Twitter Mark-up Challenge - (1)

Header / Nav / Main

 

 

 

REFERECE

https://developer.mozilla.org/ko/

 

 

LECTURE

https://edu.goorm.io/learn/lecture/20583

 

 

 

 

 

---

 

Sectioning Element의 사용법

section article nav aside

<규칙> 
Section = 단원 이므로 주제, 즉 제목이 필요
반드시 heading태그 필요 (h1등)


___




- 구획 나누기 (논리적으로 관련된 집합체)
- 최소한의 기능 / 의미를 갖는 단위로 쪼개기

 

 

 

 

 

HTML practice에서 진행했던 것 처럼,

최소한의 기능을 하는 단위로 나누기 전에 먼저

 

한 페이지를 만드는 것 이므로,

 

논리적인 단위로 먼져 나눠주자.

 

 

<내가 생각한 단위>

1. feed = 글을 작성하는 부분

2. navigator = 좌측 네비게이터 부분

3. time line = 하단 타임라인 (글 / 사진 등)

4. trending = world wide trends

5. follow = 추천 팔로우

6. footer (우측 하단)

 

 

 

 

 

 

---

 

1.  Header

 

트위터 로고가 있는 header 부분

 

트위터 로고 부분을 클릭하면 링크로 이동하고,

제목(heading)을 의미하므로 

HTML prac 에서 진행했던 Logo in Header과 같이 해주면 된다.

 

https://mywebproject.tistory.com/82

HTML 훈련 - (4) Logo in Header

참고>

<div class="header">
        <h1>
            <a href="./index.html">
                <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg" alt="Goorm Edu"/>
            </a>
        </h1>
    
    
        <a href="https://edu.goorm.io/qna">Q&amp;A</a>
</div>

h1 > a > img 와 같이 마크업 해줬었다.

 

** 주의 : 이미지에 링크 거는 법은 반드시 a>img 순으로. (img>a로 하면 안됨)

 

 

 

<header>
       <h1>
            <a href="">
                <img src="" alt="Twitter">
            </a>        
       </h1>
</header>

 

 

---

2. nav 부분 (global navigation)

 

 

 

 

<nav>
  
  <h1>Global Navigation</h1>
  <ul>
    <li>
      <a href="#">
        <span class="sr-only">Current Page</span>
        <!-- Icon -->
        Home
      </a>
    </li>
    <li>
      <a href="#">
        <!-- Icon -->
        Explore
      </a>
    </li>
    <li>
      <a href="#">
        <strong aria-label="5 unread Notifications">5</strong>
        <!-- Icon -->
        Notification
      </a>
    </li>
    <li>
      <a href="#">
        <!-- Icon -->
        Messages
      </a>
    </li>
    <li>
      <a href="#">
        <!-- Icon -->
        Bookmarks
      </a>
    </li>
    <li>
      <a href="#">
        <!-- Icon -->
        Lists
      </a>
    </li>
    <li>
      <a href="#">
        <!-- Icon -->
        Profile
      </a>
    </li>
    <li>
      <button>
        <!-- Icon -->
        More
      </button>
      <!-- DROPDOWN MENU -->
      <a href="#">
        <!-- User-Image -->
      </a>
      <h3>kimbug</h3>
      <span>@kimbugx</span>

      <ul>
        <li>
          <!-- Icon -->
          <a href="#"> Topics </a>
        </li>
        <li>
          <!-- Icon -->
          <a href="#"> Moments </a>
        </li>
        <li>
          <!-- Icon -->
          <a href="#"> Twitter Ads </a>
        </li>
        <li>
          <!-- Icon -->
          <a href="#"> Analytics </a>
        </li>
      </ul>

      <ul>
        <li>
          <!-- Icon -->
          <a href="#"> Settings and privacy </a>
        </li>
        <li>
          <!-- Icon -->
          <a href="#"> Help Center </a>
        </li>
        <li>
          <!-- Icon -->
          <a href="#"> Display </a>
        </li>
        <li>
          <!-- Icon -->
          <button type="button">Log out</button>
        </li>
      </ul>
    </li>
    
    <li>
      <button type="button">Tweet</button>
    </li>
  </ul>
</nav>

 

드롭다운 메뉴 부분은

https://mywebproject.tistory.com/107

HTML 훈련 - (9)GitHub Dropdown Menu

이전에 했던 GitHub 드롭다운 예제를 참고하였다.

 

 

 

 

---

 

 

3. main

 

하나의 html 문서에서는 main을 하나만 쓸 수 있음!

 

 

 

cf. header 같은 경우에는 다양한 섹션 요소 (nav 등) 안에서도 쓸 수 있음.

 

 

 

 

section
article
nav
aside
과 같은 섹션 요소 안에
main을 쓸 수 없음!

즉, section>main은 안됨.
section+main은 됨. (병렬 구조)

<이상적인 구조>
header + main + footer (3단병렬구조)

- 다른 것은 바뀔 수 있어도
main은 단 한번만 사용해야함.

- main은 섹션 요소가 아니므로 
반드시 heading태그를 쓰지 않아도 됨

 

<main>
    <header>
        <h1>Home</h1>
        <button type="button" aria-label="Timeline Options">
            <!-- Icon -->
        </button>

        <div>
            <h2>Home shows you top Tweets first</h2>
            <button type="button">
                <!-- Icon -->
                <strong>
                    See latest Tweets Instead
                </strong>
                <span>you'll be switched back Home after you've been away for a while.</span>
            </button>
            <a href="#">
                <!-- Icon -->
                View content preferences
            </a>
        </div>

    </header>
</main>

 

---

4. tweet-form

- <section>을 이용하자.

- section은 sectioning element 이므로 헤딩태그 필수임.

 

- 뭔가 시각적으로 나타나지 않았어도, 나중에 안보이게 해도 되므로

헤딩태그는 반드시 꼭 써줘야한다.

 

<section>
    <h1>What's happening?</h1>
</section>

 

 

 

 

 

1. <form>

method="POST"로

 

<form action="#" method="POST">

</form>

 

2. <img>

눌렀을때 아무 변화가 없으므로, 유저의 프로필 이미지로써 이미지태그로 마크업 해줌.

src와 alt(대체텍스트) 사용

 

 

 

3. <textarea>

텍스트 양이 많기 때문에 input type="text"보단

textarea 태그 사용.

 

속성 **

 

placeholder

maxlength = "280"

 

- js하다와서 헷갈리는데.. 여기는 속성="속성값"이므로

숫자형이라해서 ""없이 쓰거나 하지말자..

 

 

 

4 input type="file"

 

속성 **

multiple : 여러 파일 선택 가능.

- 속성값 없이 사용함. (required와 같이)

 

accept : 허용 범위

 

 

 

 

 

<section>
    <h1>What's happening?</h1>

    <form action="#" method="POST">
        <img src="#" alt="@kimbug">
        <textarea placeholder="What's happening?"
        maxlength="280"></textarea>
        <button type="button" aria-label="Upload files">
            <!-- Icon -->
        </button>
        <input type="file" multiple accept="image/*, video/*">
        <button type="button" aria-label="Search GIFs">
            <!-- Icon -->
        </button>
        <button type="button" aria-label="Create a poll">
            <!-- Icon -->
        </button>
        <button type="button" aria-label="Choose emoji">
            <!-- Icon -->
        </button>
        <strong aria-label="0 out of 200 characters">
        </strong>
        <button type="button" aria-label="Add another Tweet">
            <!-- Icon -->
        </button>
        <button type="submit">Tweet</button>
    </form>
</section>