[クイックキャンパスNekaraku杯第2期]-24日目勉強

24055 ワード
クイックキャンパス htmlcss ニカラグアカップ テキストリンク
💡HTML&CSS練習
プライマリ・ログインの作成
以前はテーブルのレイアウトがよく使われていましたが、この場合、テーブルはまず横方向にアクセスするので、ストリームがおかしくなる可能性があります-->論理寸法が無効です
寸法フェーズでは、論理寸法を作成するのに十分なアイデアが必要です.
ログインセクションを作成する場合は、form内でfieldsetを使用することが望ましい.また、labelを使用するとWeb規格に合致します!
2つのaラベルではなくulliを使用したパケット設計により、Webアクセス性を向上

<section class="login">
  <h2 class="login-heading">로그인</h2>
  <form method="POST" action="https://formspree.io/[email protected]" class="login-form" id="loginForm">
    <fieldset>
      <legend>회원 로그인 폼</legend>
      <div class="user-email">
        <label for="userEmail">아이디</label>
        <input type="email" name="userEmail" id="userEmail" required placeholder="아이디">
      </div>
      <div class="user-password">
        <label for="userPassword">비밀번호</label>
        <input type="password" name="userPassword" id="userPassword" required placeholder="8자리 이상">
      </div>
    </fieldset>
  </form>
  <button class="button-login" type="submit" form="loginForm">로그인</button>
  <ul class="sign">
    <li class="signup"><a href="#">회원가입</a></li>
    <li class="find"><a href="#">아이디/비밀번호 찾기</a></li>
  </ul>
</section>
タグ:
css省略
明示的および非明示的なタグ.
label forの使用
テキストをlabelに隣接し、inputを挿入します.
imgの隣にspanがあればaltを使わなければならないとは限らない.
<label>
<img src="./img.png" alt=""><span>이미지</span>
</label>
.user-email~div.user-email~*noopenner noreferrer!! 必ず知っておく
検証バナー
検証バナーを作成するときにsectionラベルを使用して作成できますが、h 2を使用してタイトルを書き、下に要素を書くと、他のh 2に遭遇する前に、これらの要素は上のh 2に対応する要素と暗黙的に考えられるので、このような方法があることを知っておく必要があります.
<h2 class="a11y-hidden">유효성 검사 배너</h2>
<ul class="validation-list">
  <li>
    <a href="https://validator.w3.org/" target="_blank" title="마크업 유효성 검사 사이트로 이동" noopener noreferrer>W3C Markup Validation</a>
  </li>
  <li>
    <a href="https://jigsaw.w3.org/css-validator/" target="_blank" title="CSS 유효성 검사 사이트로 이동" noopener noreferrer>CSS Validation Service</a>
  </li>
</ul>
css
/* 유효성 검사 배너 */
.validation-list {
    list-style-type: none;
    margin: 25px 0 0 0;
    padding-left: 0;
}

.validation-list a {
    padding: 10px 10px 10px 45px;
    /* a태그를 블록화 시켜서 다음의 속성을 적용 */
    display: block;
    background: url(./images/validation_icon.png) no-repeat 20px 50%, linear-gradient(to bottom, #ccc, #eee);
    margin-top: 10px;
    border: 1px solid #aaa;
    border-radius: 20px;
}

.validation-list a:hover, .validation-list:focus {
    color: #f00;
}
heightを固定する場合は、line-heightを与え、字を中央に置く
これらのプロパティを適用するためにaタグをブロック化する
Web用語バナー
<section class="term">
  <h2 class="term-heading">웹 관련 용어</h2>
  <dl class="term-list">
    <dt class="term-list-subject"><a href="#">웹 표준 이란?</a></dt>
    <dd class="term-list-thumbnail">
      <img src="./assets/web_standards.gif" alt="W3C 로고">
    </dd>
    <dd class="term-list-brief">W3C 단체에서 규정한 웹 기술 사양에 대한 규칙을 말하며 표준 규격은...</dd>
  </dl>
</section>
dtとddを使用してhtmlを作成します.以下に示します.
seoの観点ではimg(thumbnail)のaltが望ましい
📚学習するキーワード
昨日できなかったことまで積み重ねる.
  • 境界利益
  • 非表示
    • にアクセス可能
  • 漸進的改良
  • white space
  • noopener, noreferrer
  • HTML5.2変更点

    • 今日は実習時間なので、自分がどのように表記するか考える時間があるので、考えてから直接実施し、その後講師と一緒にコードを見て確認して、いい感じです.
    『Redis開発と運営』ノート
    2021 NAVER漫画開発チャレンジ1回コードテスト2回