[HTML] 태그 요약

---

 <!-- TODO : 컴퓨팅 자주쓰는 코딩 용어 -->

    <!-- :(콜론), ;(세미콜론), &(엔퍼센트) -->

    <!-- HTML : Markup 언어 : <여는태그>글자</닫는태그>로 작성하는 언어 -->

    <!-- HTML 주요 요소들 :  -->

    <!-- 태그(요소, element), 속성(attribute), 값(value) -->

    <!-- 태그 : h1, p, table 등.... -->

    <!-- 속성 : src, width, height 등 ... -->

    <!-- 값 : src="값", width="값" 등... -->

    <!-- 단축키 : 인텔리제이-->

    <!-- 줄복사 : ctrl + d -->

    <!-- 줄삭제 : ctrl + y -->

    <!-- 윈도우 단축키 -->

    <!-- 복사 : ctrl + c -->

    <!-- 잘라내기 : ctrl + x -->

    <!-- 붙여넣기 : ctrl + v -->

    <!-- 실행취소 : ctrl + z -->

    <!-- html(구조), CSS(디자인), js(동작) -->

    <!-- 3가지 파일로 각각 분리 코딩(권고) -->

    <!-- 플러그인 : Auto rename tag -->

    <!-- TODO : 1) 제목 태그 : h1 ~ h6 -->

    <h1>안녕하세요</h1>

    <h2>안녕하세요</h2>

    <h3>안녕하세요</h3>

    <h4>안녕하세요</h4>

    <h5>안녕하세요</h5>

    <h6>안녕하세요</h6>

    <!-- TODO : 2) 폰트 태그 -->

    <!-- 굵은 글씨 -->

    <b>안녕하세요</b>

    <!-- 이텍릭체 글씨 -->

    <i>안녕하세요</i>

    <!-- TODO : 3) 단락 태그(*) -->

    <p>안녕하세요..</p>

    <!-- TODO : 4) 링크(앙커*) 태그 : 페이지 이동 -->

    <a href="http://naver.com">네이버</a>

    <!-- TODO : 5) 줄바꿈(*) 태그 -->

    안녕하세요<br/>

    안녕하세요<br/>

    <!-- TODO : 6) 특수 태그 -->

    <!-- < : &lt (less than) -->

    <!-- > : &gt (greater than) -->

    <!-- 공백 : &nbsp; -->

   

    <!-- TODO : 7) 이미지 태그(*) -->

    <img src="./image/bird.jpg" alt="새" width="300">

    <!-- TODO : 8) 목록 태그(*), ul(unordered list), ol(ordered list) -->

    <ul>

        <li>사과</li>

        <li>바나나</li>

        <li>오렌지</li>

    </ul>

    <!-- TODO : 9) 테이블 태그(*) -->

    <table>

        <!-- 제목 :  thead 생략 가능-->

        <thead>

            <!-- tr : 1행 -->

            <tr>

                <!-- th : 1열 -->

                <th>요일</th>

            </tr>

        </thead>

         <!-- 본문 :  tbody 생략 가능-->

         <tbody>

            <!-- tr : 1행 -->

            <tr>

                <!-- th : 1열 -->

                <td>요일</td>

            </tr>

        </tbody>

    </table>

   

---

<!-- TODO : form 태그(부모태그, 생략가능) > input(자식태그) -->

    <!-- TODO : 1) 라벨 + 입력양식 -->

    <!-- for="변수명" == id="변수명" -->

    <!-- label 클릭하면 input 양식에 포커스 생김 -->

    <label for="name">이름</label>

    <input type="text"id="name"/>

    <br/>

    <!-- TODO : 2) 패스워드 -->

    <input type="password" />

    <br/>

    <!-- TODO : 3) 파일 대화상자 -->

    <input type="file" />

    <br/>

   

    <!-- TODO : 4) 체크박스 -->

    <input type="checkbox" /> 좋음

    <br/>

    <input type="checkbox" /> 나쁨

    <br/>

   

    <!-- TODO : 5) 라디오박스 -->

    <!-- 주의점 : 2개 name="변수명" 일치시켜야 함 -->

    <input type="radio" name="gender"/> 남

    <br/>

    <input type="radio" name="gender"/> 여

    <br/>

   

    <!-- TODO : 5) Select 박스 -->

    <!-- 속성 selected - 화면에 먼저 보일 문자 -->

    <!-- 사용법 : <option>항목</option> -->

    <select>

        <option>김밥</option>

        <option selected>떡볶이</option>

        <option>순대</option>

        <option>어묵</option>

    </select>

    <!-- TODO : 6) textarea : 긴 글쓰기 -->

    <!-- cols="가로" rows="세로" -->

    <textarea cols="30" rows="10"></textarea>