[HTML] Chapter 2. HTML 기초 - 태그

⚠️ 파일 생성시 유의사항 : WebContent 폴더 안의 Web-INF 공간은 클라이언트는 접근할 수 없게 이루어져 있으며, 서버쪽에서는 접근이 가능함. 비유하자면, 자바에서 private와 유사함. 따라서, 파일을 생성할 때, WEB-INF와 같이 WebContent 내부 다른 폴더에 생성하지 않고, WebContent 바로 아래에 생성할 것. 파일을 WEB-INF에 생성하면 404 Error 가 발생 ( 400번대 에러 - 클라이언트측 에러 / 500번대 에러 - 서버측 에러)

• HTML의 태그, 엘리먼트들은 대소문자를 구분하지 않지만 소문자 사용이 바람직함
• html 에서는 java 와 달리 { } 대신 들여쓰기로 영역을 구분함
• 자바처럼 컴파일되고 실행되는 형태가 아니므로 중간에 띄어쓰기를 없애는 것이 리소스 관리 차원에서 좋음

1. 제목 태그

<h1></h1> ~ <h6></h6>

• h1 ~ h6 는 제목을 표현할 때 사용 (숫자가 늘어갈수록 더 작은 개념의 제목을 표현. 여섯단계 이외의 단계는 존재하지 않음)
• 더 작은 제목이라 함은 보여지는 크기도 포함하고 있지만 실무적으로 웹 표준을 근거로 사용할 때에는 의미를 담아 사용해야 함

2. 영역 / 문단 태그

<br> or <br/>        <!-- 개행(단독) -->
<p></p>                <!-- 문단 구성 -->
<div></div>            <!-- 영역 -->
<span></span>        <!-- 문장의 일부 단어나 문장을 특별한 형태로 처리(css style 적용 등)할 때 사용 -->

3. 목록 태그

· 순서 있는 목록

<ol>
    <li>순서</li>
    <li>있는</li>
    <li>목록</li>
</ol>

 

· 순서 없는 목록

<ul>
    <li>순서</li>
    <li>없는</li>
    <li>목록</li>
</ul>

4. 데이터 입력 관련 태그

• <form></form>
• 웹 페이지에서의 입력 양식을 의미하며, 데이터 전송 및 페이지 요청하는 용도로 사용

① <input> 태그 예시

<div>
    <form>
        회원아이디
        <input type="text" name="name" size="20" maxlength="10" placeholder="아이디">
        <!-- 열글자를 넘어서게 데이터 입력 불가 -->
        패스워드
        <input type="password" name="pwd" size="10" maxlength="8" placeholder="8~12 글자">
        <!-- 패스워드에 입력한 글자는 블라인드 처리되어 나온다. -->

        <input type="button" value="결과"> <input type="reset" value="취소">
        <!-- 리셋은 별도로 스크립트 처리를 하지 않더라도 취소 버튼을 누르면 form 안에 있는 내용을 지울 수 있음. 처음 요청받은 상태로 되돌리는 기능 -->
    </form>
</div>

 

② <textarea> 태그 예시

<div>
    <form>
        <!-- 많은 내용을 기재할 수 있는 엘리먼트. 태그 사이의 공백 문자 인식 엔터키 입력을 통한 개행처리 --> 
        <textarea rows="10" cole="50">
        텍
        스
        트
        </textarea>
    </form>
</div>
<!-- 입력컨트롤의 대부분은 input 키워드와 관련있지만 textarea는 input이 필요없고 크기를 지정할 수 있음 -->
<!-- textarea에는 value속성이 존재하지 않는다. -->

 

③ <form action="" method=""> / submit 방법 (<input> 태그 / <button></button> 태그)

<div>  
    <form action="http://localhost:3306/WebApp01/Test022.html">
        *이름
        <input type="text" name="name" size="15" maxlength="10">
        *이메일
        <input type="text" name="email" size="15" maxlength="20">
        *하고싶은 말
        <textarea rows="10" cols="50" name="field"></textarea>

        <!-- ① -->
        <input type="submit" value="전송하기" name="submitBtn">
        <!-- ② -->
        <button>전송하기</button>
        <button type="submit">전송하기</button>
    </form>
</div>

5. 수평선, 공백, 글꼴크기, 색상(사용X)

⚠️ 스타일을 html에서 제어하는 것은 바람직하지 않음

<div>
    <!-- size : 수평선의 두께 조절 -->
    <hr size="20" color="red">

    <!-- 음영선이 없는 수평선 -->
    <hr size="2" noshade="noshade">

    <!-- 수평선의 수평 길이 설정 -->
    <hr size="5" width="400">

    <!-- 수평선의 정렬 -->
    <hr size="5" width="50%" align="left">
    <hr size="7" width="50%" align="right">
    <hr size="9" width="50%" align="center">
    <hr size="9" width="50%">
    <!-- 사이즈를 숫자값으로 주면 그 길이값으로 고정되지만, %로 주면 브라우저 창의 크기에 따라 변화함. align을 지정하지 않으면 디폴트값은 center -->
</div>

<div>
    공백                                  공백
    <!-- 위 공백은 의미 없음 -->

    공백 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 공백<br>
    <!-- &nbsp; 가 공백 하나이며 공백을 여러개 만들고 싶으면 이어야 함 -->
</div>

<div>
    <font size="1">텍스트</font>
    <font size="2">텍스트</font>
    <font size="3">텍스트</font>
    <font size="4">텍스트</font>
    <font size="5">텍스트</font>
    <font size="6">텍스트</font>
    <font size="7">텍스트</font>
    <!-- 숫자가 커지면 커질수록 사이즈가 커지며, 최대로 지원하는 사이즈는 7 -->

    <font size="4" color="green">텍스트</font><br>
    <font size="4" color="#00ff00">텍스트</font><br>
    <font size="4" color="red" face="궁서체">텍스트</font>
</div>

6. 기타 글꼴 꾸미는 태그(사용X)

<div>
    <b>글자를 굵게(진하게) 설정</b>

    <i>이텔릭체로 설정</i>

    <u>밑줄 긋기</u>

    <tt>타이프체로 설정</tt>

    <small>현재 글자 크기보다 한 단계 줄이기</small>

    <big>현재 글자 크기보다 한 단계 키우기</big>

    <strong>글자 강조</strong>

    <s>취소선</s>

    <em>강조하기, 글자 비스듬히 출력</em>

    아래 첨자 테스트<sub>아래첨자</sub>

    위 첨자 테스트<sup>위첨자</sup>
</div>

7. pre 태그, xmp 태그

• <pre></pre> : pre 태그 안에 들어있는 내용은 띄어쓰기나 개행이 모두 적용됨
• <xmp></xmp> : xmp 태그는 문서상 띄어쓰기, 개행에 더해서 태그 자체도 다 보여줌

8. 이미지 태그

<div>
    <img src="images/img_02.gif">
    <img src="images/img_02.gif" width="100">
    <img src="images/img_02.gif" height="50">
    <!-- 넓이 또는 속성만 지정할 때 종횡비가 깨지지 않는 상태에서 이미지의 전체적인 크기가 변경됨 -->

    <img src="images/img_02.gif" width="200" height="100">
    <!-- 비율이 깨짐 -->

    <img alt="" src="images/img_02.gif" width="100" border="10"
    vspace="200" hspace="100" align="top">위 아래 정렬 실습
    <!-- vspace : 이미지 상하에 픽셀만큼 여백 -->
    <!-- hspace : 이미지 좌우에 픽셀만큼 여백 -->
    <!-- align : 정렬 -->
</div>

9. 하이퍼링크 태그

• 절대경로 : 루트부터 시작하는 경로(하드디스크부터)
• 상대경로 : 현재 해당되는 파일의 위치를 기준으로 하는 경로

<a href="http://localhost:3306/WebApp01/Test011_1.html">절대경로 지정 방식</a>

<a href="./Test011_1.html">상대경로 지정 방식1</a>
<a href="Test011_1.html">상대경로 지정 방식2</a>

<a id="top">책갈피 위치</a>
<a href="#top">클릭시 책갈피 위치로 이동</a>

10. 표 (테이블) 생성 태그

① 활용 예시

<!-- th : 컬럼명, td : 컬럼에 속하는 요소들 -->
<!-- rowspan : 위 아래(행) 병합 -->
<!-- colspan : 좌우(컬럼) 병합 -->

<!-- CSS 를 통해 관리해야 할 속성들 -->
<!-- <table border="10" background="images/img_03.jpg" cellpadding="20" cellspacing="30"> -->
<table border="1">
    <tr>
        <th colspan="2">강남구</th>
        <th colspan="4">노원구</th>
    </tr>
    <tr>
        <td>역삼동</td>
        <td>논현동</td>
        <td>상계동</td>
        <td>중계동</td>
        <td>하계동</td>
        <td>월계동</td>
    </tr>
</table>

 

② 활용 예시

<table border="1">
    <tr>
        <th rowspan="2">노원구</th>
        <td>상계동</td>
    </tr>
    <tr>
        <td>역삼동</td>
    </tr>
    <tr>
        <th rowspan="2">강남구</th>
        <td>역삼동</td>
    </tr>
    <tr>
        <td>논현동</td>
    </tr>
</table>

 

① 결과 화면

 

② 결과 화면

11. 움직이는 태그

<div>
    <marquee>기본적인 방향 왼쪽으로 이동</marquee>
    <marquee behavior="alternate">좌우 왕복 이동</marquee>
    <marquee direction="right">오른쪽으로 이동</marquee>
    <marquee direction="up">위쪽으로 이동</marquee>
</div>

<div>
    <h2>속도 조절 : scrollamount</h2>
    <marquee behavior="alternate" scrollamount="100">
        <img alt="" src="images/img_04.gif">
    </marquee>
</div>

<div>
    <h2>속도 조절 : scrolldelay</h2>
    <manequee behavior="alternate" scrolldelay="100">
        <img alt="" src="images/img_04.gif">
    </manequee>
</div>

<div>
    <h2>위아래로 움직이며 옆으로 이동</h2>
    <marquee>
        <marquee direction="down" behavior="alternate" height="100">
            가나다라
        </marquee>
    </marquee>
</div>

12. meta 태그

<!-- 시각적으로 보여지거나 하는 것은 아님. 문서에 대한 정보를 기술하는 태그 -->

<meta name="keywords" content="html,연습,웹,예제,태그,속성">
<!-- 문서의 핵심 키워드가 있다면 찾아보기 편리함 → meta태그 사용 -->
<meta name="discription" content="html 연습 페이지입니다.">
<meta name="author" content="nyeoo">
<meta name="generator" content="eclipse">

<meta http-equiv="refresh" content="5; url=http://www.naver.com">
<!-- 5;의 뜻은 5초의 간격을 두고 리프레쉬하라는 의미. 실행하면 5초 후 이동함 -->

13. 체크박스 태그

<div>
    <form>
        <p>질문 1) 오늘 점심으로 먹은 메뉴는?</p>

        <label><input type="checkbox" name="foodCheck1" value="code1">밥</label>
        <!-- 라벨이라는 태그로 감싸면 텍스트를 클릭해도 체크박스가 선택 -->
        <input type="checkbox" name="foodCheck1" value="code2" id="label2">미역국
        <input type="checkbox" name="foodCheck1">달걀말이
        <input type="checkbox" name="foodCheck1">장조림
        <input type="checkbox" name="foodCheck1">김
        <input type="checkbox" name="foodCheck1">김치
        <input type="checkbox" name="foodCheck1">멸치볶음

        <!-- 하나의 항목이 답이 여러개이므로 모두 같은 name 속성을 가져야함
        체크박스에 체크하는것과 연관을 지어주기 위해서는 value 속성이 필요. value 속성값은 코드화 시켜주는 것이 일반적-->

        <p>질문 2) 오늘 저녁으로 먹을 메뉴는?</p>

        <input type="checkbox" name="foodcheck2">밥
        <input type="checkbox" name="foodcheck2"><label for="label2">미역국</label>
        <!-- 질문 1의 미역국 id와 연결해주면, 질문 2의 미역국 텍스트를 클릭했을 때 질문 1의 미역국의 체크박스가 선택됨-->
        <input type="checkbox" name="foodcheck2">달걀말이
        <input type="checkbox" name="foodcheck2">장조림
        <input type="checkbox" name="foodcheck2">김
        <input type="checkbox" name="foodcheck2">김치
        <input type="checkbox" name="foodcheck2">멸치볶음
    </form>
</div>

14. 라디오 태그

<div>
    <form>
        <p>질문) 당신의 성별은?</p>

        <label>
        <input type="radio" name="gender" value="female" checked="checked">여자
        </label>

        <input type="radio" name="gender" value="male" id="m">
        <label for="m">남자</label>
        <!-- 라디오 컨트롤은 보통 하나만 선택하는 방식으로 구현함. 즉 동일한 name 속성을 보유해야 함-->
        <!-- checked 속성을 넣으면 디폴트로 선택됨. 다른 항목을 클릭해야 해제 가능-->
    </form>
</div>

15. 셀렉트 태그 (드롭다운 리스트)

<div>
    <form>
        <p>당신이 가장 좋아하는 종목은?</p>
        <select name="selectSport" size="3" multiple>
        <!-- size 속성 : 드롭다운 메뉴에서 한 번에 보일 옵션 개수 지정. 지정하지 않을 시 기본값은 1, multiple 속성이 명시되어 있다면 4 -->
        <!-- multiple 속성으로 다중 선택이 가능 (ctrl + 클릭) -->
        <!-- 선택하세요 옵션을 넣어서 사람들이 default 값을 선택하는 것을 방지가능. -->
            <option>-- 선택하세요 --</option>
            <option value="val1">야구</option>
            <option value="val2">축구</option>
            <option value="val3">배구</option>
            <option value="val4">농구</option>
        </select>

        <p>당신의 직책은?</p>>
        <select name="selectJikwi">
            <option value="1">회장</option>
            <option value="2">사장</option>
            <option value="3">부장</option>
            <option value="4">과장</option>
            <option value="5">대리</option>
            <option value="6" selected="selected">사원</option>
            <!-- 회사에서 사원 수가 가장 많다면 selected 속성으로 default 값을 사원으로 설정 가능 -->
            <option value="7">인턴</option>
        </select>
    <form>
<div>