웹개발 종합반1-1

로그인 페이지를 만들어 보았다.
아직은 html 태그들에대해서 익숙하지않다.

<div class="wrap">
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디 비밀번호를 입력해 주세요</h5>
    </div>

    <p>ID: <input type="text"></p>
    <p>PW: <input type="text"></p>
    <button>로그인 하기</button>
</div>

이런식으로 나는 코드를 짰고

    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 비밀번호를 입력해주세요</h5>
        </div>
        <div>
            <p>
                ID: <input type="text" />
            </p>
            <p>
                PW: <input type="password" />
            </p>
        </div>
        <button>로그인하기</button>
    </div>

해설지에는 이렇게 나와있었다.
나와의 가장 큰 차이점은 id,pw 부분을 div태그로 묶어줬다는것이다.
구글링을 해보니 p태그와 div태그는 많이 비슷한 태그인데 가장큰 차이점이 태그 앞뒤로 빈줄이 생기지 않는다고 한다.
또한, 용도도 차이가 있다.P태그를 사용한 단락 이전과 단락 이후를 감싸거나 또는 P태그 대신 단락을 감싸서 '이 영역은 그룹핑 된 블록 영역입니다'라고 외치는 것이다. 즉 어떤 영역을 DIV태그로 묶어 블록단위로 정의하는 것이다.