HTML 기본 태그 정리 (1)

HTML 태그 정리 (1)

---

<a>

    <a href="https://www.naver.com" target="_blank" title="네이버입니다.">네이버</a>

href - 링크 참조, target="_blank" - 새페이지를 통해 이동
title - 마우스를 갖다 대면 설명이 나옴.

<br/>

    1
    <br/>
    2
    <br/>
    3

줄바꿈 태크
비슷한 문법으로 <pre></pre>가 있음 (html 코드 내의 공백까지 가져오는 단점이 있다.)

<input>

    <input type="text" value="Text Box" title="This is TextBox"/>
    <br/><br/>
    <input type="file" title="This is File"/>
    <br/><br/>
    <input type="password" title="This is Password"/>

type 값에 따라 나오는 상태가 다름
text - textbox
file - 파일을 선택해서 업로드 할 수 있음
password - 비밀번호를 누르는 박스

<textarea>

    <textarea title="This is Text Area" style="width:400px;height:200px">1234</textarea>

엔터키가 먹힌다
style을 통해 크기를 조절할 수 있다.

<input type="check">

    <input type="checkbox" name="ch"/>
    <input type="checkbox" name="ch"/>
    <input type="checkbox" name="ch"/>

체크박스로 개별적으로 선택 가능 (라디오버튼과의 차이점)

<input type="radio">

    <input type="radio" name="ra"/> 
    <input type="radio" name="ra"/> 
    <input type="radio" name="ra"/>

name을 같은 name으로 지정해놓으면
같은 그룹으로 속해 하나만 선택하도록 설정이 된다.

<select>

    <select>
        <option value="html">HTML</option>
        <option value="javascript">JAVASCRIPT</option>
    </select>

하나만 선택할 수 있도록 만들어짐

<ul>

    <ul style="list-style-type:circle;">
        <li>JAVASCRIPT</li>
        <ul>
            <li style="color:red;background-color:gray">JQUERY</li>
            <li>ANGULARJS</li>
        </ul>
        <li>HTML</li>
        <li>StyleSheet</li>
    </ul>

하나의 목록 태그 (정렬이 안됨)
type에 따라 나오는 모양이 다름 (disk, square, circle)
ul은 리스트 하단에 목록을 더 만들 수 있음

<ol>

    <ol type="A">
        <li>JAVASCRIPT</li>
        <li>HTML</li>
        <li>StyleSheet</li>
    </ol>

정렬이 되어 순서가 있음
type에 따라 순서로 나오는 표기가 다름
"A" - ABC, "a" - abc, "i" - i ii iii, 1 - 123