본문 바로가기
FRONT-END/HTML

[HTML]0915 수업 3일차(button,textarea,header,footer 등)

by codechu 2025. 9. 15.

button button 태그는 사용자와 주로 클릭과 관려된 상호작용을 위한 태그이다.( <>input 태그랑 다른 점 자식을 가질 수 없음) 버튼태그 안에는 이미지를 넣을 수있음 버튼 이미지 근데 인풋태그는 이미지 삽입 불가.

  • 스스로 닫는 태그 x
  • 속성
    • disabled : 비활성화 할 것인가에 대한 속성. 속성 값을 가지지 않음.
    • type : 해당 버튼 태그의 종류를 지정한다.
      • button : 별다른 특성이 없는 일반 버튼.
      • reset : 속해있는 양식 태그가 가지고 있는 입력 태그들의 값을 초기화하는 버튼
      • submit : 속해있는 양식 태그를 제출하기 위한 버튼
<input type ="button" value="인풋버튼">
<button type="button" >버튼 버튼</button>

 

 

textarea textarea태그는 개행이 가능한 문자열을 입력 받기 위해 사용한다.(게시글, 댓글에 이용 왜냐면 여러 줄 작성이 가능하기 때문)

  • 스스로 닫는 태그 x
  • 태그의 값을 지정하기 위해서는 별도로 value 속성을 이용하지 않고 태그의 내부 내용을 지정한다.
  • 속성
    • autofocus : 페이지가 로드되었을 때 해당 입력 태그에 자동으로 포커스를 줄 것인가에 대한 속성. 속성 값을 가지지 않음.
    • cols : 초기에 설정될 열의 개수( 가로 방향으로의 글자개수)를 지정한다. 자연수여야하며 기본값은 20
    • rows : 초기에 설정될 행의 개수(세로 방향으로의 줄 수)를 지정한다. 자연수여야 하며 기본값은 2
    • disabled : 비활성화 할 것인가에 대한 속성. 속성 값을 가지지 않음.
    • maxlength : 문자열의 최대 길이 (값이 비어있을 때 검사하지 않음)
    • minlength : 문자열의 최소 길이 ( 값이 비어있을 때 검사하지 않음)
    • placeholder : 값이 비어있을 때 보여줄 텍스트
    • readonly : 읽기 전용으로 지정하기 위해 사용한다. 속성 값을 가지지 않음.
    • required : 필수 필드이며 값이 비어있을 수 없음을 의미한다. 속성 값을 가지지 않음.
    • spellcheck : 브라우저에 내장되어 있는 철자 확인가능을 사용할 것인가에 대한 설정
      • default : 기본값으로, 브라우저에 설정에 따름.
      • true : 사용
      • false : 미사용

 

 

Q : 라벨 사용법에 대한 질문 - 만약 게시글 작성폼을 만든다고 하면 게시판 제목과 제목을 입력하는 인풋태그를 2개 사용할 텐데 이 두개를 연결 시키기 위한 것이 라벨임 그러니까 라벨 안에 스팬태그와 인풋태그를 같이 넣어야 함.

   <label>
        <span>제목</span>
        <br>
        <input type="text" name="title" required placeholder="제목을 입력해 주세요" autofocus minlength="1" max="100">
    </label>
    <br>
    <label>
         <span>내용</span>
         <br>
         <textarea name ="content" required placeholder="내용을 입력해 주세요" minlength="1" maxlength="10000"></textarea>
     </label>

 

 

실습 코드 

<form>
    <h1>게시판</h1>
    <br>
    <label>
     <select name = "boardId">
        <option>자유게시판</option>
        <option>Q&A</option>
        <option>신고/건의 게시판</option>
     </select>
    </label>
    <br>
    <label>
        <span>제목</span>
        <br>
        <input type="text" name="title" required placeholder="제목을 입력해 주세요" autofocus minlength="1" max="100">
    </label>
    <br>
    <label>
         <span>내용</span>
         <br>
         <textarea name ="content" required placeholder="내용을 입력해 주세요" minlength="1" maxlength="10000"></textarea>
    </label>
    <br>

    <label>
         <span>첨부파일</span>
         <input type="file" name = "attachment" value = "파일 선택">
    </label>
    <br>
     <a href="#">이전으로 돌아가기</a>
        <button type="reset">초기화</button>
        <button type="submit">작성하기</button>


</form>

 

 

article article 태그는 html 문서로부터 분리되어도 그 자체의 의미를 잃지 않고 제 기능을 할 수 있는 내용을 담기 위해 사용하는 플로어 컨텐츠 태그이다

  • 스스로 닫는 태그  x
  • 주로 게시글이나 댓글, 상품 정보, 기사, 논문 , 학술 자료 등을 담기 위해 사용한다.
  • 쇼핑 웹사이트 리뷰 글 전까지 상품에 대한 정보, 원산지 등을 다 때려넣어서 만듬 

aside aside태그는 문서의 주된 내용은 아니지만, 이와 간접적으로 관련이 있는 내용을 담기 위해 사용하는 플로우 컨텐츠이다. 

  • 스스로 닫는 태그 x

div div 태그는 단순히 구획을 나누기 위해 사용하는 플로우 컨텐츠이다.(block)

  • 스스로 닫는 태그 x

footer footer 태그는 문서의 하단부 내용을 담기 위해 사용하는 플로우 컨텐츠 태그이다.

  • 스스로 닫는 태그 x
  • 위치적으로 반드시 하단일 필요는 없으며,. 주로 저작권, 사업자 정보, 이용 약관, 사이트 맵 등을 담기 위해 사용한다.
  • 필수 태그는 아니지만 존재하는 것이 권장되고, 하나의 html문서 안에 여러개가 존재하여서는 안 된다.

header header태그는 문서의 상단부 내용을 담기 위해 사용하는 플로우 컨텐츠이다.

  • 스스로 닫는 태그 x
  •  위치적으로 반드시 상단일 필요는 없으며, 주로 사이트의 로고,메인메뉴,검색 양식 등을 담기 위해 사용한다.
  • 필수 태그는 아니지만 존재하는 것이 권장되고, 하나의 html문서 안에 여러 개가 존재해서는 안 된다.

main main 태그는 문서에서 주가되는 내용을 담기 위해 사용하는 플로우 컨텐츠이다.

  • 스스로 닫는 태그 x
  • 필수 태그는 아니지만 존재하는 것이 권장되고, 하나의 html문서 안에 여러 개가 존재해서는 안 된다.

 

nav nav 태그는 서로 관련있는 링크 혹은 기능 등 사용자가 상호작용할 수 있는 요소들을 모아놓기 위해 사용하는 플로우 컨텐츠 태그이다. (네이버 메인 화면에 메일 카페 블로그 스토어 뉴스 등 연관된 아이콘 줄지어 있는거 

nav

 ul

  ls 태그 대로 넣는게 정석임
  • 스스로 닫는 태그 x

section section태그는 html 문서로부터 분리되면 그 자체의 의미를 상실하고 제 기능을 할 수 없는 내용을 담기 위해 사용하는 플로우 컨텐츠 태그이다.

  • 스스로 닫는 태그 x
  • 주로 기능별, 내용별 구획을 구분하기 위해 사용한다.

span span태그는 단순히 구획을 나누기 위해 사용하는 구문( inline )컨텐츠이다. div랑 친구이지만 다른점은 div는 글자 크기 상관없으 한 줄을 다 먹지만 span은 글자 크기만큼만 공간을 먹음) 

  • 스스로 닫는 태그 x 

 

 

실습 내용

<body>
<form>
<h1>자유게시판</h1>
    <table border="1">
       <tr>
           <th>번호</th>
           <th>제목</th>
           <th>작성자</th>
           <th>조회수</th>
           <th>추천</th>
           <th>일시</th>
       </tr>
       <tr>
            <th>175</th>
            <td>
                <a href = "#">물이 끓기 전에  스프를 먼저 넣는 절차에 관하여</a>
                <span>[2]</span>
            </td>
            <td>교수</td>
            <td>106</td>
            <td>1</td>
            <td>2025-09-15 13:03:15</td>
       </tr>
       <tr>
            <th>174</th>
            <td>
                <a href="#">신라면 vs 진라면</a>
                <span>[1.568]</span>
            </td>
            <td>진매</td>
            <td>18,966</td>
            <td>158</td>
            <td>2025-09-14 18:33:47</td>
       </tr>
       <tr>
            <th>171</th>
            <td>
                <a href="#">쿠팡 진순 할인함 ㅇㅇ</a>
                <span>[1]</span>
            </td>
            <td>ㅇㅇ</td>
            <td>17</td>
            <td>0</td>
            <td>2025-09-14 13:58:01</td>
       </tr>
    </table>
    <br>
    <label>
      <span>검색기준</span>
       <select name = "by" required>
         <option>제목 + 내용</option>
         <option>제목</option>
         <option>작성자</option>
       </select>
    </label>
    <label>
      <span>검색어</span>
      <input type ="text" name = "keyword" maxlength="50" placeholder="검색어를 입력해 주세요." type ="seach">
    </label>
 <button type ="submit">검색</button>
</form>
</body>
</html>

'FRONT-END > HTML' 카테고리의 다른 글

[HTML]0912 수업 2일차(table,form,label.input,select - option,optgroup)  (0) 2025.09.12
[HTML]0911 수업 1일차  (0) 2025.09.12

관련글

티스토리툴바