[HTML/CSS] - 실습2

Lee Jeong Min·2021년 8월 12일

htmlcss 네카라쿠배 패스트캠퍼스

[패스트캠퍼스 네카라쿠배 2기]

목록 보기

27/97

💡HTML&CSS 실습

메인의 로그인 만들기

옛날에는 테이블로 레이아웃 작업을 많이 하였는데, 이러한 경우 테이블은 가로방향으로 먼저 접근하기 때문에 흐름이 약간 이상해지는 경우가 있음. --> 논리적인 마크업이 잘 되지 않았음

논리적인 마크업을 짜기 위해 마크업 단계에서 충분한 생각이 필요함.

로그인부분을 만들때 form안에 fieldset을 사용해주는 것이 좋음. 또한 label을 사용해주는 것이 웹 표준에 맞음!

아이디찾기와 회원가입의 경우에도 a태그 두개가 아닌 ul li를 사용하여 묶어서 설계해주면 웹 접근성이 더 올라감


<section class="login">
  <h2 class="login-heading">로그인</h2>
  <form method="POST" action="https://formspree.io/seulbinim@gmail.com" 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을 명시적, 비명시적으로 하는 방법

label for을 사용

label을 바로 옆에 텍스트를 적은 후 그 안에다가 input을 넣어줌

img 바로 옆에 span이 있으면 alt를 굳이 안써주어도 됨

<label>
<img src="./img.png" alt=""><span>이미지</span>
</label>

.user-email ~ div < useremail뒤에 등장하는 div 요소

.user-email ~ * < useremail뒤에 등장하는 모든 요소

noopenner noreferrer!! 꼭 알아두기

유효성 검사 배너

유효성 검사 배너를 만들 때 section태그를 사용해서 만들 수 있지만 h2를 이용하여 제목을 적고 그 아래에 요소를 적으면 다른 h2를 만나기 전까지 암시적으로 그 요소들은 그 위의 h2에 해당하는 요소라고 생각하여 이런 방법도 있다는 사실 알아두기

<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태그를 block화 시켜서 속성들을 적용시켜줌

웹 관련 용어 배너

<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>