로그인창 구현

1. 시맨틱 마크업

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<section>
  <h2>
    로그인
  </h2>
  <form>
    <legend>회원 로그인 폼</legend>
    <fieldset>
      <div>
        <label></label>
        <input></input>
      <div>
       <div>
        <label></label>
        <input></input>
      <div>
      <button></button>
    </fieldset>
  </form>
  <ul>
    <li><a></a></li>
  </ul>
  <ul>
    <li><a></a></li>
  </ul>
<section>      

웹사이트 구조 파악

-웹사이트 구조는 크게 3단과 4단이 있는데, 그 중 어떤 것으로 할지 결정
-구조 상 필요한 단이 있다면 추가해서 총 몇단으로 구성할 지 결정
-box model을 그려보고 각 단을 어떤 태그를 사용할지 결정
-html을 어떤 순서로 마크업 할 것인지 넘버링
-정한 순서대로 마크업
가장 중요한 단계

position

Position이란?

요소의 위치 지정 방법의 기준을 지정한다. 기준이 선택한 요소 “나”인가, “나”의 부모 요소인가, 브라우저를 기준으로 하는가, 스크롤 영역을기준으로 하는가를 설정한다.
position은 위치 지정 방법을 5가지 가지고 있다. = 속성값이 5개이다.
속성값들을 차례로 살펴보자

상대 길이

em, ex, ch, rem, vw, vh, vmin, vmax, %

1. em
   em의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미한다. 여기서 기준이 되는 값이란 현재 요소의 font-size 값을 말한다.