4.HTML 훈련

7 minute read

광고배너

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ad Banner</title>
  </head>
  <body>
    <div>
      <h1>
        Unlimited downloads. <br />
        Our best content. <br />
        No attribution.
      </h1>

      <p>
        As low as $9/mo <br />
        Buy subscription or credit packs
      </p>

      <a href="#" target="_blank">Join pro</a>
    </div>
  </body>
</html>

2. Google Search Result Item

구글 화면창

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Google Search Result Item</title>
  </head>
  <body>
    <div>
      <h1>
        <a href="https://www.w3schools.com › html › html5_semantic_elements"
          >HTML5 Semantic Elements - W3Schools</a
        >
      </h1>
      <a href="https://www.w3schools.com/html/html5_semantic_elements.asp"
        >https://www.w3schools.com › html › html5_semantic_elements</a
      >

      <p>
        Oct 27, 2019 - Examples of non-<strong>semantic elements</strong>:
        &lt;div&gt; and &lt;span&gt; - Tells nothing about its content. ...
        HTML5 <strong>semantic elements</strong> are supported in all modern
        browsers. ... So, on the Internet, you will find HTML pages with
        &lt;section&gt; elements containing ...
      </p>
    </div>
  </body>
</html>

그래서 사용되는것이 html escape code

문법적으로 반드시 지켜야할 사항

p테그 안에 내용중 테그가 되어있는데, 우리의 목적은 그것을 테그로 사용하는것이 아닌 내용으로 사용하기 위함이며

,브라우저에서도 그것을 테그로 오해할수 있기 때문에 사용되는것이 html escape code

HTML ESCAPE CODE

3. Feature Box

팀 이미지

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Feature Box</title>
  </head>
  <body>
    <div>
      <img
        src="https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676"
        alt="폴더이미지"
      />
      <h1>Free unlimited private repositories</h1>
      <p>
        Free for small teams under 5 and priced to scale with Standard
        ($3/user/mo) or Premium ($6/user/mo) plans.
      </p>
    </div>
  </body>
</html>

문법적으로 반드시 지켜야할 사항

img 테그안에는 반드시 alt 와 src가 들어가야한다. alt의 값이 없다한들 쓰지 않으면 안돼고 ““으로 둬야한다

꿀 Tip~

이미지 테그를 사용할때, 이미지가 크게 정보로서 가치가 없을시에는 이미지테그를 사용하는것이 아니라 CSS로 처리를 해줘도 된다. (개발자 마음)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Feature Box</title>
  </head>
  <body>
    <div class="feature-box no-image">
      <h1>Free unlimited private repositories</h1>
      <p>
        Free for small teams under 5 and priced to scale with Standard
        ($3/user/mo) or Premium ($6/user/mo) plans.
      </p>
    </div>
  </body>
</html>

.feature-box.no-image {
  padding-top: 196px;
  background-image: url("https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676");
  background-repeat: no-repeat;
  background-position: center 40px;
  background-size: auto 140px;
}

4. Logo In Header

로고 이미지

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpoint" content="width=device-width , initial-scale=1.0" />
    <title>로고 이미지</title>
  </head>
  <body>
    <h1>
      <a href="./index.html">
        <img
          src="https://statics.goorm.io/logo/edu/goorm_edu.svg"
          alt="Goorm Edu"
        />
      </a>
    </h1>
    <a href="https://statics.goorm.io/logo/edu/goorm_edu.svg">Q&amp;A</a>
  </body>
</html>

Breadcrumb & Pagination

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpoint" content="width=device-width,initial-scope=1.0" />
    <title>rohjs/bugless-101</title>
    <link href="./yosup.css" />
  </head>
  <body>
    <div>
      <a href="#">rohjs</a>
      <a href="#">bugless-101</a>
    </div>

    <div>
      <a href="#" aria-label="Go to previous page">Previous</a>
      <ol>
        <li><a href="#" aria-label="Go to page 1">1</a></li>
        <li><a href="#" aria-label="Go to page 2">2</a></li>
        <li><a href="#" aria-label="Go to page 3">3</a></li>
        <li><a href="#" aria-label="Go to page 4">4</a></li>
        <li><a href="#" aria-label="Go to page 5">5</a></li>
        <li><button type="button" disabled>...</button></li>
        <li><a href="#" aria-label="Go to page 7">7</a></li>
        <li><a href="#" aria-label="Go to page 8">8</a></li>
        <li><a href="#" aria-label="Go to page 9">9</a></li>
      </ol>
      <a href="#" aria-label="Go to Next page">Next</a>
    </div>
  </body>
</html>

꿀 Tip~

aria-lable 속성 : 눈이 보이지 않은분들은 스크린 리더를 사용하는데, 그분들이 좀더 명확환 설명을 주기 위해서 사용한다

ex)

<a href="#" aria-label="Go to previous page">Previous</a> --> 스크린 리더로
읽었을때 Previous라고 읽지만 , aria-label을 사용하면 "Go to previous page"라고
좀더 명확하게 한다.

6. Product Card

Product Card

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpoint" content="width=width-device , initial-scope=1.0" />
    <title>Product Card</title>
    <link href="./yosup.css" />
  </head>
  <body>
    <div>
      <div>
        <img
          src="https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png"
          alt=""
        />

        <h1>혼자가 혼자에게</h1>
        <strong aria-label="오늘의 책 선정">오늘의 책</strong>
      </div>

      <strong aria-label="저자 이병률"> 이병률 </strong>

      <strong aria-label="평점 9.4">
        <span aria-hidden="true">
          <i>별표시이미지</i>
          <i>별표시이미지</i>
          <i>별표시이미지</i>
          <i>별표시이미지</i>
        </span>
        9.4</strong
      >
    </div>
  </body>
</html>

꿀 Tip~

aria-hidden 속성
- aria-hidden=”true” (굳이 스크린 리더로 읽을 필요가 없을때 사용, 중요하지 않은것들을 읽을 필요 없을때 사용)
- aria-hidden=”false” (굳이 스크린 리더로 읽어야 할때 사용)
 -  별표시이미지 별표시이미지 별표시이미지 별표시이미지 9.4
눈에 보이지 않은 분들은 별 표시가 스크린보드로 읽어도 별로 도움이 되지 않기 떄문에 aria-hidden을 사용하여 읽지 않게함

7. Instagram User Profile

인스타그램 유저 프로필파일

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
    <link href="styles.css" />

    <title>Document</title>
  </head>
  <body>
    <header class="user-profile">
      <div class="user-profile-data">
        <h1>_kimbug</h1>
        <dl>
          <div>
            <dt>Posts</dt>
            <dd>112</dd>
          </div>
          <div>
            <dt>Followers</dt>
            <dd>274</dd>
          </div>
          <div>
            <dt>Following</dt>
            <dd>238</dd>
          </div>
        </dl>
        <h2>우현</h2>
        <p>
          김버그 #frontend #구독 #디지털노마드
          🇰🇷🇯🇵🇳🇿🇨🇦🇨🇳🇩🇪🇮🇹🇨🇿🇦🇹🇵🇾🇧🇷🇺🇸🇬🇧🇮🇳🇹🇭🇹🇼🇻🇳🇲🇾🇸🇬🚩
        </p>
        <a href="https://youtube.com/c/kimbug" target="_blank"
          >youtube.com/c/kimbug</a
        >
      </div>
      <div class="user-profile-photo">
        <img
          src="https://instagram.fkul10-1.fna.fbcdn.net/vp/59a2c1304ba02593c35328e5990dd980/5E6731EA/t51.2885-19/s320x320/67069331_474838409740202_7787675159699128320_n.jpg?_nc_ht=instagram.fkul10-1.fna.fbcdn.net"
          alt=""
        />
      </div>
    </header>
  </body>
</html>

꿀 Tip~

우리가 예제를 보고 이미지를 내용 앞에 마크업 할수 있다. 허나 코드를 볼때 이미지를 맨 마지막으로 뒀는데, 그 이유는 screen reader로 읽었을때 이미지를 먼저 말해주는것보다 내용이 먼저 소개되는게 더 좋을것이라는 판단하에 이미지 코드를 후방에 둔것이다.
그리고 HTML은 브라우저에게 내가 이 목적을 위해 테그를 쓴다는것을 알려주기 위한것이지 위치 , 화면 꾸미기는 다 CSS가 하는것이다. HTML로 위치를 잡는다는 생각을 버리도록 하자
dl 이 어느상황에서 쓰였는지 다시한번 코드를 확인해보자 , Key - value 즉 A는 B다. (post는 112명이다.)

8. Receipt

Mc receipt image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewpont" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>
        Bill Sharing request
        <span>from kimbug</span>
      </h1>
    </div>

    <div>
      <div>
        <span aria-label="receipt number">24.06.20xx</span>
        <!-- 원래는 img를 사용하려 했으나 브라우저에게 알려줄때 중요하지않고 꾸미기 용도로 사용 됬으므로, CSS 처리를 해줘도 된다. -->
      </div>

      <div>
        <h2>McDonald's</h2>

        <strong><img src="#" alt="바코드 이미지" /></strong>
        <!-- 바코드 이미지 자체가 너무 중요한 부분이므로 strong으로 감쌈 -->
      </div>

      <div>
        <dl>
          <div>
            <dt>coke Light- 0.3<span aria-label="litter">L</span></dt>
            <!-- L는 screen reader 가 리터로 읽지 않기 때문에 aria-label로 재 명시 해줘야한다.  -->
            <dd>&dollar;1.50</dd>
          </div>
          <div>
            <dt>Heineken Beer - 0.5<span aria-label="litter">L</span></dt>
            <dd>&dollar;3.25</dd>
          </div>
          <div>
            <dt>Chicken McNuggets</dt>
            <dd>&dollar;21.00</dd>
          </div>
        </dl>

        <dl>
          <div>
            <dt>in total</dt>
            <dd><strong>&dollar;25.75</strong></dd>
          </div>
        </dl>
      </div>
    </div>
  </body>
</html>

꿀 Tip~

우리가 보이는것은 in total 내용이 적힌 div테그가 먼저지만, HTML은 보이는게 중요한게 아니라 브라우저에게 알려주는것이 첫째요, 보고 듣는사람이 둘째이다. 따라서 total이 화면상에는 먼저 나왔지만 , 알려줄때는 맨 마지막에 알려주는게 좋으므로 나중으로 코딩했다.

Dropdown Menu Img

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button type="button" aria-label="Open user menu">
      <img
        src="https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png"
        alt="my profile"
      />
    </button>

    <div>
      <h3>
        <a href="#">Signed in as <strong>rohjs</strong></a>
      </h3>
      <ul>
        <li><a href="#">Your profile</a></li>
        <li><a href="#">Your repositories</a></li>
        <li><a href="#">Your projects</a></li>
        <li><a href="#">Your stars</a></li>
        <li><a href="#">Your gists</a></li>
      </ul>
      <ul>
        <li><a href="#">Feature preview</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Sign out</a></li>
      </ul>
    </div>
  </body>
</html>

10. Input Group

Input Group IMG

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <h1>Manage Subscriptions</h1>
      <p>
        Manage Subscriptions You can follow the discussion on &#64;kimbug
        without to leave a comment. Cool, huh? Just enter your email address in
        the form here below and you are all set
      </p>

      <form method="GET" action="#">
        <input type="email" placeholder="Your Email" />
        <button type="submit">Subscribe<button>
      </form>
    </div>
  </body>
</html>

11. Feed

Feed IMG

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <div>
        <a href="#">
          <img
            src="https://user-images.githubusercontent.com/19285811/69063907-43da4800-0a58-11ea-8efb-4b57dca4e3fe.png"
            alt="my profile"
          />
        </a>

        <h2><a href="#">Kimbug</a></h2>
        <span aria-label="Posted thirty minutes ago">30 min</span>

        <button type="button">Follow</button>
      </div>
      <div>
        <blockquote>
          <p>
            The most beautiful experience we can have is the mysterious. It is
            the fundamental emotion that stands at the cradle of true art and
            true science.
          </p>
          — <cite>Albert Einstein</cite>
        </blockquote>
      </div>
      <div>
        <dl>
          <div>
            <dt><button type="button">Likes</button></dt>
            <dd>10</dd>
          </div>
          <div>
            <dt><button type="button">Comments</button></dt>
            <dd>0</dd>
          </div>
        </dl>
      </div>
      <div>
        <form action="#" method="POST">
          <textarea placeholder="Write a comment" rows="3" cols="10"></textarea>
          <button type="submit">Submit</button>
        </form>
      </div>
    </div>
  </body>
</html>

12. Gmail InBox

Gmail Inbox IMG

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table class="inbox">
      <thead>
        <tr>
          <th>Actions</th>
          <th>Sender</th>
          <th>Title</th>
          <th>Timestamp</th>
        </tr>
      </thead>
      <tbody>
        <tr class="unread">
          <td>
            <div class="inbox-actions">
              <div class="inbox-checkbox">
                <input type="checkbox" id="inbox-1" />
                <label for="inbox-1" class="sr-only">Select</label>
              </div>
              <button type="button" class="inbox-star">
                <span class="sr-only">Add to favorites</span>
              </button>
            </div>
          </td>
          <td>Goorm Edu</td>
          <td>
            <a href="#">
              <strong class="sr-only">Unread</strong>
              <strong> Rate your course: FRONTEND 101 WITH KIMBUG </strong>
              <span>
                - Woohyeon. How’s everything going? We want to hear your opinion
                on...
              </span>
            </a>
          </td>
          <td>3:34 PM</td>
        </tr>
        <tr class="read">
          <td>
            <div class="inbox-actions">
              <div class="inbox-checkbox">
                <input type="checkbox" id="inbox-1" />
                <label for="inbox-1" class="sr-only">Select</label>
              </div>
              <button type="button" class="inbox-star">
                <span class="sr-only">Add to favorites</span>
              </button>
            </div>
          </td>
          <td>Goorm Edu</td>
          <td>
            <a href="#">
              <strong class="sr-only">Read</strong>
              <span>Rate your course: FRONTEND 101 WITH KIMBUG</span>
              <span>
                - Woohyeon. How’s everything going? We want to hear your opinion
                on...
              </span>
            </a>
          </td>
          <td>3:34 PM</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

꿀 Tip~

윗 코드에서 class=”sr-only” 라는 것을 주었는데, 그 역할은 CSS에서 screen-reader만 읽을수 있도록 만들고 싶을때 class=”sr-only”라는 class를 주고 CSS로 작업하기도 한다. 그 이유는 checkbox나 그림으로 이루어진 click 버튼은 눈이 보이는 사람은 단번에 저것이 무엇인지 이해할수 있지만, 그렇지 않은사람들을 저것이 무엇인지를 알수 없기 때문이다. 마찬가지로 메일을 읽었는지 안읽었는지 역시 눈이보이지 않는 사람들은 알수 없기에, sr-only를 해주었다.
여기서 드는생각? 음… aria-label을 써도 되지 않을까?? 라는 생각이 드는데..

13. Music Player

Music Player IMG

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul class="music-player">
      <li class="music-play-item">
        <img
          src="https://m.media-amazon.com/images/I/814Rp76DidL._SS500_.jpg"
          alt="러브 엑스 마키나"
          lang="ko"
          class="music-album-cover"
        />
        <div class="music-info">
          <div class="music-info-detail">
            <h1 lang="ko">러브 엑스 마키나 Love Ex Machina</h1>
            <strong lang="ko"> MLSL (밀레니엄 살롱) </strong>
          </div>
          <span class="music-playtime">
            <span class="sr-only">Duration</span>
            04:09
          </span>
        </div>
        <audio src="./assets/music-1.mp3" class="music-audio"></audio>
      </li>
      <li class="music-play-item">
        <img
          src="http://image.genie.co.kr/Y/IMAGE/IMG_ARTIST/080/660/591/80660591_1560403300605_1_600x600.JPG"
          alt="올라가"
          class="music-album-cover"
        />
        <div class="music-info">
          <div class="music-info-detail">
            <h1 lang="ko">올라가</h1>
            <strong lang="ko"> 권선홍 </strong>
          </div>
          <span class="music-playtime">
            <span class="sr-only">Duration</span>
            03:33
          </span>
        </div>
        <audio src="./assets/music-2.mp3" class="music-audio"></audio>
      </li>
    </ul>
  </body>
</html>

꿀 Tip~

전체적은 html lang은 영어로 되어있다. 하지만 img의 alt값은 한국어이기 때문에 따로 lang=”ko”를 표시해주어서 브라우저가 이해하도록 해준다. 나머지도 마찬가지

14. Video Player

Video Player

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <video>
        <source src="foo.opus" type="video/wav" />
        <source src="foo.ogg" type="video/ogg" />
        <source src="foo.mp3" type="video/mpeg" />
      </video>
      <h1>주짓수 4주차 롤링 영상</h1>
      <strong>30초 만에 압살 실화인가</strong>
    </div>
  </body>
</html>

Share on

Twitter Facebook LinkedIn

정요섭

4.HTML 훈련

1. Ad Banner

2. Google Search Result Item

문법적으로 반드시 지켜야할 사항

3. Feature Box

문법적으로 반드시 지켜야할 사항

꿀 Tip~

4. Logo In Header

꿀 Tip~

6. Product Card

꿀 Tip~

7. Instagram User Profile

꿀 Tip~

8. Receipt

꿀 Tip~

10. Input Group

11. Feed

12. Gmail InBox

꿀 Tip~

13. Music Player

꿀 Tip~

14. Video Player

Share on

Leave a comment

You may also enjoy

외부IP, 내부IP 그리고 포트넘버

클래스형 컴포넌트 vs 함수형 컴포넌트

React Hook의 최적화

일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)

정요섭

1. Ad Banner

2. Google Search Result Item

문법적으로 반드시 지켜야할 사항

3. Feature Box

문법적으로 반드시 지켜야할 사항

꿀 Tip~

4. Logo In Header

5. BreadCrumb & Pagination

꿀 Tip~

6. Product Card

꿀 Tip~

7. Instagram User Profile

꿀 Tip~

8. Receipt

꿀 Tip~

9. Github Dropdown Menu

10. Input Group

11. Feed

12. Gmail InBox

꿀 Tip~

13. Music Player

꿀 Tip~

14. Video Player

Share on

Leave a comment

You may also enjoy

외부IP, 내부IP 그리고 포트넘버

클래스형 컴포넌트 vs 함수형 컴포넌트

React Hook의 최적화

일반 웹의 동작방식 vs React의 동작방식 vs Next의 동작방식(중요)