[HTML/CSS] 1. 태그 종류

Mar 06, 2025

Contents

<div>

: "division"의 약자로, 웹 페이지를 여러 섹션으로 분할하는 데 사용


<div>빈박스 : block (inset 영역 포함) </div>

<span>

: 텍스트의 일부분에 스타일을 적용하거나, JavaScript로 특정 텍스트를 제어하는 데 사용


<span>랩핑박스 : inline (inset 영역 포함 X) </span>

<h>

: 태그는 제목을 정의 하는데 사용


  <h1>#</h1>
  <h2>##</h2>
  <h3>###</h3>
  <h4>####</h4>
  <h5>#####</h5>
  <h6>######</h6>

<img>

: 이미지 객체를 삽입하고 싶을 때 사용


<img src="/ch01/Screenshot_1.png" width="400" height="400">
<img src="/ch01/Screenshot_1.png" width="100" height="100"> -

<img> 응용


 <h1>사진 갤러리</h1>
    <hr>
    <div>
        <img src="/ch01/Screenshot_1.png" height="300" width="300">
    </div>
    <div>
        <img src="/ch01/Screenshot_1.png" height="300" width="300">
    </div>

<hr> 구분선

<ul>

: 순서가 필요하지 않은 목록을 만들 때 사용

<ol>

: 순서가 필요한 목록을 만들 때 사용

<li>

: 각 항목을 불릿을 이용해 표시함 (불릿 : 각 항목 앞에 붙는 원이나 사격형 등을 지칭함)


<ul>
        <li>div</li>
        <li>span</li>
        <li>h1</li>
        <li>img</li>
        <li>hr</li>
    </ul>
    <hr>
    <ul>
        <li>항목 1</li>
        <li>
            항목 2
            <ul>
                <li>하위 항목 2-1</li>
                <li>하위 항목 2-2</li>
            </ul>
        </li>
        <li>항목 3</li>
    </ul>

<a>

: 링크를 만드는 태그

<input>

: 웹 페이지 이용자로부터 입력을 받기 위해 사용하는 태그


<h1>input과 a태그를 배우자</h1>
    <hr>
    <ol>
        <li>a태그 배우고</li>
        <li>input 태그 배우기</li>
    </ol>
    <hr>
    <div>
        <a href = "https://gyul.inblog.ai/%EC%9E%90%EB%B0%94-java-53-jdbc-45913">JDBC가 궁금하다면?</a>
    </div>
    <hr>
    <input type = "text">
    <input type = "date">
    <input type = "email">
    <input type = "password">
    <input type = "checkbox">
    <input type = "radio">
    <input type = "tel">

text : 한 줄 텍스트를 입력하는 영역 (이름, 입력, 검색박스)

라디오 버튼 : 여러 선택지 중에서 하나만 선택하게 만들고 싶을 때

체크 박스 : 라디오버튼이지만 다른 점은 여러개의 항목 선택 가능

submit : 입력 양식에 입력한 내용을 전송하는 요소