HTML - Markup

in Dev on HTML, Ad, Banner, Feature, Box, Entity, Code, Login, Header, Breadcrumb, Pagination, Dropdown, Menu


markup

마크업 언어는 “마크(Mark)”로 둘러싸인 언어. “태크(Tag)”로 둘러싸였다고도 표현합니다. HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용.

Ad banner

<link rel="stylesheet" href="./kimbug-css/style1.css">
<div class="modal">

  <a href="주소" target="_blank">
  클릭!
  </a>
</div>

구글 검색 결과

<link rel = "stylesheet" href="./kimbug-css/style1.css">

<div class = "google_search">
  <p>
  <h3><a href="https://www.w3schools.com/html/html5_semantic_elements.asp">HTML5 Semantic Elements - W3Schools</a></h3>
  </p>

  <p><a href="https://www.w3schools.com/html/html5_semantic_elements.asp">https://www.w3schools.com › html › html5_semantic_elements</a></p>
  <p>
  Oct 27, 2019 - Examples of non-<strong>semantic elements</strong>: &lt;div&gt; and &lt;span&gt; -
  </p>
</div>

HTML Escape : HTML은 특수문자(<, >, “, & 등)를 마주하면 문자로 여기지 않는다. 예를 들면, < 문자를 문자로 여기지 않고 태그의 시작으로 여긴다.

HTML 태그 ~ 안의 내용물로 특수문자를 나타내려면 HTML 엔티티 코드(Entity Code) 로 변환시켜야한다. 이런 행위를 HTML Escape라고 한다.

Feature Box

<link rel="stylesheet" href="./kimbug-css/style3.css">

<div class = "feature-box">
  <img src="https://wac-cdn.atlassian.com/dam/jcr:bc1f15f9-3b2e-4c30-9313-0ebd6175f18c/File%20Cabinet@2x.png?cdnVersion=676" alt=""/>

  <p>
  <h3> 제목 </h3>Ó
  </p>
  내용
  </p>
<div>

<img> 태그의 attribute alt=”“ 태그는 설명이 없어도 반드시 적어야 한다.

login in header

!<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./kimbug-css/style4.css">
  </head>
  <body>
    <div class="header">
      <h1>
        <a href="https://creamereos.github.io">
          <img src="https://statics.goorm.io/logo/edu/goorm_edu.svg"
          alt="Logo">
        </a>
      </h1>
      <a href="https://edu.goorm.io/qna"> Q &amp; A </a>
    </div>
  </body>
</html>

<link rel="stylesheet" href="./kimbug-css/style5.css">

<div class="breadcrumb">
  <a href="https://github.com/creamereos">CREAMer github</a>

  <a href="https://github.com/creamereos/creamereos.github.io">CREAMer blog</a>
</div>

Pagination

<a href = "#" aria-label="Go to previous page">
Previous
</a>

<div class="pagenation">
  <ol>
    <li class="current-page"><a href="#" aria-label="Currnet page. Go to page1">1</a></li>
    <li><a href="#" aria-label="Go to page2">2</a></li>
    <li><a href="#" aria-label="Go to page3">3</a></li>
    <li><a href="#" aria-label="Go to page4">4</a></li>
    <button type='button' disabled>
    ...
    </button>
    <li><a href="#" aria-label="Go to page5">5</a></li>
    <li><a href="#" aria-label="Go to page6">6</a></li>
    <li><a href="#" aria-label="Go to page7">7</a></li>
    <li><a href="#" aria-label="Go to page8">8</a></li>
  <a href = "#"/>
  Next
  </a>
<div>

aria-label=”“ :(attribute) 화면 판독기 사용자에게 전달하는 데 사용됩니다. 일반적으로 검색 입력 필드에는 시각적 레이블이 없습니다.(앞을 볼 수 없는 사람들을 위해 소리로 설명)

product card

<!doctype html>
<html>
  <head>
  <title> product card </title>
    <link rel="stylesheet" href="./kimbug-css/style6.css">
    <script src="https://kit.fontawesome.com/60c06704a9.js" crossorigin="anonymous"></script>
  </head>

  <body>
    <div class="product-card-image">
      <img src = "https://user-images.githubusercontent.com/19285811/69318246-becd7980-0c77-11ea-8324-6c43e2de8cf2.png" alt="자켓이 걸려있는 의자">
    </div>

    <div class="product-card-title">
      <h1> 혼자가 혼자에게 </h1>
      <strong aria-label="오늘의 책"> 오늘의 책 </strong>
    </div>

    <strong aria-label="작가 이병률" class="product-card-author">이병률</strong>

    <strong aria-label="평점 9.4" class="product-card-review">
      <span aria-hidden="true">
        <i class="far fa-star"></i>
        <i class="far fa-star"></i>
        <i class="far fa-star"></i>
        <i class="far fa-star"></i>
        <i class="fas fa-star-half-alt"></i>
      <span>
    9.4
    </strong>
  </div>
  </body>
</html>

aria-hidden=”true” : 중요하지 않은 정보 히든 처리 (보이지 않는 사람을 위한)

instargram user profile

<link rel="stylesheet" href="./kimbug-css/style7.css">

<div class="user-profile">
  <div class="user-profile-data">
    <h1>CREAMer</h1>

    <dl>
      <div>
          <dt>posts</dt>
          <dd>777</dd>
      </div>
      <div>
          <dt>followers</dt>
          <dd>77.7K</dd>
      </div>
      <div>
        <dl>
          <dt>following</dt>
          <dd>7</dd>
        </dl>
      </div>
    </dl>

    <h2>태리</h2>
    <p> 🇰🇷🇯🇵🇳🇿🇨🇦🇨🇳🇩🇪🇮🇹🇨🇿🇦🇹🇵🇾🇧🇷🇺🇸🇬🇧🇮🇳🇹🇭🇹🇼🇻🇳🇲🇾🇸🇬🚩
    </p>
    <a href="https://creamereos.github.io/">
    깃허브 블로그
    </a>
    <div class="user=profile-photo"

    <div class="user-profile-photo">
      <img src="https://i.imgur.com/Hl05v0L.jpg" alt="CREAMer profile">
    </div>
  </div>
</div>

  • dl(Description List) : key : value 값 리스트에 사용

  • dt(Description Term) : Key

  • dd(Description data) : Value

Receipt

<link rel="stylesheet" href="./kimbug-css/style8.css">

<h1> Bill sharing resquest
  <span>from terry</span>
</h1>

<div class='receipt'>
  <h2>
    MC.Donald
  </h2>
  <strong class ="barcode">
    <img src="./kimbug-img/barcode.svg" alt="바코드">
  </strong>
  <span aria-label="영수증 발행">
    24.06.20xx
  </span>

  <div>
    <dl>
        <dt>Big Mac</span></dt>
        <dd>&dollar; 4.0</dd>
    </dl>
  </div>
  <div>
    <dl>
        <dt>Coke Light - 0.3<span aria-label="litter">L</span></dt>
        <dd>&dollar; 1.5</dd>
    </dl>
  </div>
  <div>
    <dl>
      <dt>in total</dt>
        <strong>
          <dd>&dollar;5.5</dd>
        </strong>
    </dl>
  </div>
</div>

<link rel="stylesheet" href="./kimbug-css/style9.css">

<div class=dropdown>
  <button type="button" aria-label="Open user menu" class="dropdown-button">
    <img src="https://i.imgur.com/Hl05v0L.jpg" alt="CREAMer profile">

  <div class="dropdown-menu">
    <h3>
        <a href="#">
        Signed in as <storng>CREAMerEOS</strong>
      </a>
    </h3>
  <div>

  <div class="dropdown-menu">
    <ul>
      <li><a href="#">Your profile</a></li>
      <li><a href="#">Your repositories</li>
      <li><a href="#">Your projects</li>
      <li><a href="#">Your stars</li>
      <li><a href="#">Your gists</li>
    </ul>
  </div>

  <div>
    <ul>
      <li><a href="#">Your profile</a></li>
      <li><a href="#">Your repositories</li>
      <li><a href="#">Your projects</li>
      <li><a href="#">Your stars</li>
      <li><a href="#">Your gists</li>
    </ul>
  </div>
</div>

<script src="./kimbug-js/app1.js"></script>

<script> 태그는 바디 맨 마지막에 작성

input group

<link rel="stylesheet" href="./kimbug-css/style10.css">

<div class = "subscription">
  <h1>
  Manage Subscriptions
  </h1>

  <p>
  You can follow the discussion on without to leave a comment. Cool, huh?<br>
  Just enter your email address in the form here below and you are all set
  <p>

  <form action="" method="GET" class="input-group">
    <input type="email" placeholder="  Your Email">

    <button type="submit">
      Subscribe</button>
  </form>
</div>

method=”GET/POST” GET : 서버로부터 정보를 조회 POST : 리소스를 생성/변경하기 위해 설계

Feed

<link rel="stylesheet" href="./kimbug-css/style11.css">
</head>

<body>
  <div class="feed">
    <div class="feed-user-profile">
      <a href="#">
        <img src="https://i.imgur.com/Hl05v0L.jpg" alt="CREAMer">
      </a>
      <div>
        <a href="#">
        <h1>CREAMer</h1>
        </a>

        <span aria-label="Posted 30 minutes ago">30 min</span>
      </div>

      <button type="button">Follow</button>
    </div>
    <div class="feed-content">
      <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. — Albert Einstein
      </p>
    </div>

    <div class="feed-footer">
      <button type=button>777 likes</button>

      <button type=button>77 coments</button>
    </div>

      <form action="" method="POST" class="feed-comment">
        <textarea placeholder="Write a commnet"> </textarea>

        <button type="submit">Submit</button>
      </form>
  </div>
  <script src="./kimbug-js/app2.js"></script>
</body>


        <span aria-label="Posted 30 minutes ago">30 min</span>
      </div>

      <button type="button">Follow</button>
    </div>
    <div class="feed-content">
      <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. — Albert Einstein
      </p>
    </div>

    <div class="feed-footer">
      <button type=button>777 likes</button>

      <button type=button>77 coments</button>
    </div>

      <form action="" method="POST" class="feed-comment">
        <textarea placeholder="Write a commnet"> </textarea>

        <button type="submit">Submit</button>
      </form>
  </div>
  <script src="./kimbug-js/app2.js"></script>
</body>

Gmail box

<table>
  <thead class="sr-only">
    <th scope="col">
      Actions
    </th>
    <th scope="col">
      Sender
    </th>
    <th scope="col">
      Title
    </th>
    <th scope="col">
      Timestamp
    </th>
  </thead>

  <tbody>
    <tr class="unread">
      <td>
        <div class="inbox-action">
          <div class="inbox-checkbox">
            <input type="checkbox" id="infobox-1"/>
            <label for=infobox-1   <span class = "sr-only">Select this Email<label>
           </div>
          <button type="button" class="inbox-star">
            <span class = "sr-only" >Add to favorites</span>
          </button>
        </div>
      </td>

      <td>
        Satoshi Nakamoto
      </td>
      <td>
        <a href="#">
          <strong class="sr-only">Unread:</strong>
          <strong>
            Satoshi Nakamoto
          </strong>
          <span>
           is the name used by the presumed..
          </span>
        </a>
      </td>
      <td>
        3:34 PM
      </td>
    </tr>

    <tr class="read">
      <td>
      <div class="inbox-action">
        <div class="inbox-checkbox">
          <input type="checkbox" id="infobox-1"/>
          <label for=infobox-1   <span class = "sr-only">Select this Email<label>
        </div>
        <button type="button" class="inbox-star">
          <span class = "sr-only" >Add to favorites</span>
        </button>
      </div>
      </td>

      <td>
        Dan Lalimar
      </td>
      <td>
        <a href="#">
          <strong class="sr-only">read:</strong>
          <strong>
            Dan Lalimar
          </strong>
          <span>
            is a software programmer and cryptocurrency entrepreneur....
          </span>
        </a>
      </td>
      <td>
        2:17 PM
      </td>
    </tr>
  </tbody>

</table>

<script href="./kimbug-js/app.js"><script>

Music Player

<head>
<link rel="stylesheet" href="./kimbug-css/style13.css">
</head>

<body>
  <ol 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>
        <span lang="ko">러브 엑스 마키나</span>
        Love Ex Machina
      </h1>
      <strong>
        MLSL (밀레니엄 살롱)
      </strong>
    </div>
    <span>
      <span class="sr-only">Duration</span>
      04:09
    </span>
  </div>
  <audio src="./kimbug-img/music-1.mp3" class="music-audio"></audio>
  </li>
  <li class="music-play-item">
    <img
      <img src="https://i.imgur.com/Hl05v0L.jpg" alt="CREAMer profile"
      alt="러브 엑스 마키나"
      lang="ko"
      class="music-album-cover"/>
<div class="music-info">
  <div class="music-info-detail">
    <h1>
      <span lang="ko">Cash Rules Everything Around Me</span>
    </h1>
    <strong>
      CREAM
    </strong>
  </div>
  <span>
    <span class="sr-only">Duration</span>
    07:77
  </span>
</div>
<audio src="./kimbug-img/music-1.mp3" class="music-audio"></audio>
</li>
</ol>

<script src="./kimbug-js/app4.js"></script>
</body>

Video Player

<head>
<link rel="stylesheet" href="./kimbug-css/style14.css">
</head>

<body>
  <div class="video-container">
    <div class="video-player">
      <video controls>
        <source src="비디오.mov" type="video/mp4"/>
        <source src="비디오.mp4" type="video/mp4"/>
      </video>
    </div>
  </div>

<script src="./kimbug-js/app4.js"></script>
</body>



© 2020.11. by creamer

Powered by CREAMer