20220223_HTML : input 태그 2, <div> 태그

<input> 태그 타입 2

 

아래의 코드 블럭에서는 input 태그의 타입으로 range, date, datetime, datetime-local, month, week, time, color를 지정해주었다. 여기서 가장 많이 쓰이는 것은 date와 time! 

 

<p>만족도 : </p><input type="range" /></p>
<p>날짜 : <input type="date" /></p>
<p>날짜 및 시간 : <input type="datetime" /></p>
<p>날짜 및 시간(현재 지역) : <input type="datetime-local" /></p>
<p>월 단위 날짜 : <input type="month" /></p>
<p>주 단위 날짜 : <input type="week" /></p>
<p>시간 : <input type="time" /></p>
<p>색상 : <input type="color" /></p>

 

만족도 :

날짜 :

날짜 및 시간 :

날짜 및 시간(현재 지역) :

월 단위 날짜 :

주 단위 날짜 :

시간 :

색상 :

 

 

input 태그로 넣어준 텍스트 상자에는 별도의 키워드를 삽입하여 속성을 지정해줄 수도 있다. 태그에 아래와 같은 형식으로 required를 적용하여 필수 입력 필드를 지정해보았다. 해당 필드를 비워놓고 인풋 데이터를 전송할 경우 컴퓨터에서 오류로 인식한다.

 

<li>필수 입력 필드 만들기 : <input type="text" required /></li>

 

필수 입력 필드 만들기 :

 

readonly 속성으로는 읽기 전용 필드를 만들어 준다. 아래의 코드 블럭에서는 value로 텍스트를 넣어주고 readonly 속성을 부여해주었다.

 

<p>글쓴이 : <input type="text" value="홍길동" readonly /></p>

 

글쓴이 :

 

placeholder 속성을 부여하여 힌트를 표시할 수도 있다. 아래의 코드 블럭에서는 텍스트 박스에 placeholder 사용자가 텍스트를 입력할 때 도움이 되도록 입력란에 적당한 힌트 내용을 작성해주었다.

 

<p> id : <input type="text" placeholder="아이디를 입력하세요" /></p>

 

id :

 

<div> 태그

 

<div> 태그는 레이아웃을 나누는데 쓰인다. 보통 웹사이트의 경우 크게 세가지의 섹션의 와이어 프레임으로 나뉘게 되는데, 최상단 메뉴를 header, 컨텐츠가 디스플레이되는 영역을 main/container/contents/body 최하단 사이트 정보가 기입되는 영역을 footer라고 부른다. 

 

네이버 홈페이지의 소스 코드. &lt;div&gt; 태그를 통해 헤더, 컨테이너, 푸터로 나뉘어진 모습을 볼 수가 있다.

 

    <div id="header">
        <ul>
            <li><a href="#">메뉴1</a></li>
            <li><a href="#">메뉴2</a></li>
        </ul>
    </div>
    <div id="container">
        <p>
            본문본문본문본문본문본문본문본무운본무우우우운<br />
            본문본문본문본문본문본문본문본무운본무우우우운<br />
            본문본문본문본문본문본문본문본무운본무우우우운<br />
        </p>
    </div>
    <div id="footer">
        <adress>서울특별시</adress>
    </div>

 

&lt;div&gt;로 레이아웃 잡으면 이렇게 깔끔하게 정리된다!