HTML기초 - a태그, tr,td,th 태그

드디어 HTML에 돌입했다. 학원 스케쥴상 1~2주정도의 짧은 기간동안만 하고

바로 JSP로 들어간다고 한다.

학원 강사님께서 짧은 시간이라 빠르게 흡수하고 넘어가지 못한다면 JSP와 Spring으로 갔을때 

상당히 고생할 것 이라고 말씀하셔 연습만 반복하고 있다.

 

그럼 최근 연습으로 인해 정리하지 못했던 HTML의 기초부터 정리해보도록 하겠다.

 

가징 기초적이면서 중요한 내용은 표를 만드는 방법이다.

 

 

 

type	예시	설명
text		기본값, 문자열 형식을 입력받는다
number		숫자, 정수 및 실수. 최소/최대값과 증감값의 단위를 지정할 수 있다
range		숫자, 0 ~ 100 사이 정수를 처리한다
radio	빨강 초록 파랑	정해진 값 중에서 하나를 고르게 한다
checkbox	빨강 초록 파랑	정해진 값 중에서 여러항목을 고르게 한다
date		연월일 단위의 날짜를 선택하게 한다
time		오전/오후 시:분 형식으로 입력받는다
datetime-local		date + time 의 형식
color		색상을 선택하게 한다
password		문자열을 마스킹하여 입력받는다
email		이메일 주소 형식의 문자열을 입력받는다
search		검색어 입력 후 우측에 x버튼으로 글자 삭제 가능
select	초등학생 중학생 고등학생 대학생	radio와 유사하게 여러 값 중 하나를 입력받는다
textarea	미리 입력된 값	여러줄의 문자열을 입력받기 위해서 사용한다
file		사용자가 파일을 첨부할 수 있도록 한다

 <table border="1" cellpadding="10" cellspacing="0">
        <thead>
            <tr>
                <th>type</th>
                <th>예시</th>
                <th>설명</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>text</td>
                <td>
                    <input type="text" name="t1" placeholder="안내 메시지"><br>
                    <input type="text" name="t2" value="미리 입력된 값">
                </td>
                <td>기본값, 문자열 형식을 입력받는다</td>
            </tr>
            <tr>
                <td>number</td>
                <td>
                    <input type="number" name="t3" min="0" max="100" step="5"><br>
                    <input type="number" name="t4" value="1234" step="0.1">
                </td>
                <td>숫자, 정수 및 실수. 최소/최대값과 증감값의 단위를 지정할 수 있다</td>
            </tr>
            <tr>
                <td>range</td>
                <td>
                    <input type="range" name="t5" min="0" max="100">
                    <span class="rangeValue"></span>
                    <br>
                    <input type="range" name="t6" value="100">
                    <span class="rangeValue"></span>
                </td>
                <script>
                    const rangeList = document.querySelectorAll('input[type="range"]')
                    rangeList.forEach(r => {
                        const span = r.nextElementSibling
                        span.innerText = r.value
                        r.onchange = (event) => {
                            span.innerText = event.target.value
                        }
                    })
                </script>
                <td>숫자, 0 ~ 100 사이 정수를 처리한다</td>
            </tr>
            <tr>
                <td>radio</td>
                <td>
                    <input type="radio" name="t7" value="red">빨강<br>
                    <input type="radio" name="t7" value="green">초록<br>
                    <label><input type="radio" name="t7" value="blue">파랑</label>
                </td>
                <td>정해진 값 중에서 하나를 고르게 한다</td>
            </tr>
            <tr>
                <td>checkbox</td>
                <td>
                    <input type="checkbox" name="t8" value="red">빨강<br>
                    <input type="checkbox" name="t8" value="green">초록<br>
                    <label><input type="checkbox" name="t8" value="blue">파랑</label>
                </td>
                <td>정해진 값 중에서 여러항목을 고르게 한다</td>
            </tr>
            <tr>
                <td>date</td>
                <td>
                    <input type="date" name="t9" value="2023-04-19"><br>
                </td>
                <td>연월일 단위의 날짜를 선택하게 한다</td>
            </tr>
            <tr>
                <td>time</td>
                <td>
                    <input type="time" name="t10" value=""><br>
                </td>
                <td>오전/오후 시:분 형식으로 입력받는다</td>
            </tr>
            <tr>
                <td>datetime-local</td>
                <td>
                    <input type="datetime-local" name="t11" value=""><br>
                </td>
                <td>date + time 의 형식</td>
            </tr>
            <tr>
                <td>color</td>
                <td>
                    <input type="color" name="t12"><br>
                </td>
                <td>색상을 선택하게 한다</td>
            </tr>
            <tr>
                <td>password</td>
                <td>
                    <input type="password" name="t12" value="itbank"><br>
                </td>
                <td>문자열을 마스킹하여 입력받는다</td>
            </tr>
            <tr>
                <td>email</td>
                <td>
                    <form>
                    <input type="email" name="t13" placeholder="메일 주소 입력">
                    <button>확인</button>
                    </form>
                </td>
                <td>이메일 주소 형식의 문자열을 입력받는다</td>
            </tr>
            <tr>
                <td>search</td>
                <td>
                    <input type="search" name="t13" placeholder="검색어 입력"><br>
                </td>
                <td>검색어 입력 후 우측에 x버튼으로 글자 삭제 가능</td>
            </tr>
            <tr>
                <td>select</td>
                <td>
                    <select name="t14">
                        <option value="e">초등학생</option>
                        <option value="m">중학생</option>
                        <option value="h">고등학생</option>
                        <option value="u">대학생</option>
                    </select>
                </td>
                <td>radio와 유사하게 여러 값 중 하나를 입력받는다</td>
            </tr>
            <tr>
                <td>textarea</td>
                <td>
                    <textarea name="t15">미리 입력된 값</textarea>
                </td>
                <td>여러줄의 문자열을 입력받기 위해서 사용한다</td>
            </tr>
            <tr>
                <td>file</td>
                <td>
                    <input type="file" name="t16">
                </td>
                <td>사용자가 파일을 첨부할 수 있도록 한다</td>
            </tr>
        </tbody>

    </table>

오늘은 코드내용이 많아 전체코드을 올려보도록 하겠다.

일단 표를 만들기 위해서는 1줄의 행을 만들고 열을 만들고 시작해야 할것이다.

그것을 <tr>로 행을 만들고 <th>로 기준이 되는 열을 만든다.

다음줄부터는 <tr>로 행을 만들고 <td>로 옆줄에 이어간다.

이런식으로 이어나가면 간단한 표를 만들수 있다.

 

위 코드에 있는 간단한 태그를 보면 <input>으로 쓰면 입력창을 만들 수 있고 <input type = " ">으로 

타입을 지정해 주면 text,number등 다양한 입력방식을 선택할 수 있다.

이 중 text라는 태그에서 로그인 입력창을 보면 연하게 "아이디를 입력하세요" 같이 적혀있는 글자가

있을 것이다. 그것을 만들기 위해서  placeholder이라는 태그를 같이 쓰면 만들수 있다.

 

다음은 range인데 이건 쓸 일이 얼마나 있을 지 모르겠지만 볼륨등 범위를 지정해서

사용할 수 있다.

 

radio는 하나만 선택할 수 있지만

checkbox는 복수 선택이 가능하다는 특징이 있다.

 

date와time은 간단해서 생략하겠다.

이렇게 다양한 input 태그가 있으니 용도에 맞게 사용하면 된다.

 

a태그이다. a태그는 링크를 달수 있는 태그이다.

예를들어 글자나 버튼을 만들고 그 객체에 a href를 달고 링크를 걸어주면 그 파일링크를 열수 있다.

<a href="https://search.naver.com/search.naver?query=노틸러스&where=image">
            <img src="노틸러스_닻_견인.gif">
        </a>

 

 

HTML에 들어와서 설명하는 것이 상당히 어렵다는 것을 느낀다.

그냥 태그를 나열해서 정리할지 하나하나 설명을 할지 생각을 해봐야 할 것 같다.

HTML을 처음 접했을때 상당히 어려운 점이 많았다. 오늘까지만 해도 홈페이지 메뉴하나 만드는데도

모양이 안만들어져서 끙끙거렸지만 감을 잡고나니 상당히 흥미로운 코드라는것을 깨달았다.

 

다음주부터 JSP도 바로 시작하니 태그도 상기시킬김에 블로그에 정리하고 계속 연습을 이어가야 할 것 같다.

목감기와 몸살때문에 몸은 힘들지만 정신차리고 꾸준히 해보도록 하겠다.

 

그럼 오늘을 여기서 마치겠다.