[HTML] html 주요태그 - 단락<p>, 줄바꿈<br>, 이미지<img>, 표<table>, 입력 양식<form>

html에는 여러가지 태그들이 많이 있지만 그중에서 많이 사용되는 태그들 중

html 주요태그 - 단락<p>, 줄바꿈<br>, 이미지<img>, 표<table>, 입력 양식<form>에 대해서 정리한다.

HTML 주요 태그

단락 - <p></p>

  - 문장의 단락을 구분할때 사용하는 태그

  - 코드상에서 엔터키를 이용해 단락을 구분한다고해도 html은 엔터키를 무시하고 한줄로 출력하게 된다.

  - css를 이용하면 <p> 태그로 단락이 떨어져 구분되는 사이의 크기를 더 늘리거나 줄일수 있다.

( <br>태그를 이용해도 시각적으로는 똑같이 단락을 나눌수 있지만 단락을 나눌때는 <p> 태그를 이용하는게 

나중에 단락별로 제어도 할수 있어서 좋다 )

줄바꿈 - <br>

  - html에서 줄바꿈을 할때 사용하는 태그

  - 단순한 줄바꿈을 할때 이용하는 태그라서 내용이 없는 태그이기 때문에 닫히는 태그가 따로 없이 

   <br> 단독으로 사용된다.

    * <br>태그를 이용해도 <p>태그와 같이 시각적으로 단락을 구분한것처럼 만들수 있지만 

     단락을 구분할때는 <p>태그를 이용해주는게 좋다.

( <br> 태그를 사용하는 횟수만큼의 줄바꿈이 일어나게 되고 html은 엔터키를 무시하기 때문에 

줄바꿈이 필요하다면 <br> 태그를 이용해야 한다... )

이미지 - <img>

  - html2부터 시작된 태그

  - 이미지를 추가 시킬때 사용하는 태그

    ( src 속성을 이용해서 해당 이미지가 위치한 경로와 파일이름을 적어준다 )

  - alt 속성을 이용하면 이미지가 깨지거나 사용할수 없을때 대안으로 사용될 수 있게 해준다.

( <img> 태그를 이용해서 이미지를 가져올수 있고 속성을 이용해서 해당 이미지에 대한 제어가 가능하다... )

( alt 속성을 이용하면 해당 이미지가 깨지거나 사용할 수 없을때는 해당 내용으로 대체가 된다 )

( title 속성을 이용하면 해당 이미지의 제목을 설정할 수 있고 마우스 커서를 이미지에 올리게 되면 

title 속성에 설정된 내용이 나온다 )

표 - <table></table>

  - 웹상에서 표를 표현할때 사용하는 태그

  - <table> 태그 안에 <tr>을 이용해서 테이블의 행을 나누고 그 하위에 <td> 태그를 사용해서 

    해당 컬럼에 대한 데이터를 입력해준다.

    * 해당 table에 선을 이용해서 행과 열을 더 정확하게 구분해주고 싶다면 html에서는 table 태그안에 

      border 속성을 주면 되고 더 고퀄리티를 원한다면 CSS를 이용하면 가능하다.

  - 시작 태그와 닫히는 태그가 있고 그 사이에 <tr>과 <td>태그가 들어가고 테이블의 내용이 들어간다.

  - <table> 태그 안에 내용은 <thead>, <tbody>, <tfoot>을 이용해서 명시적으로 나눠줄 수 있다.

    ( 해당 부분을 꼭 해주지 않아도 웹 브라우저에서 자동으로 처리해주긴 하지만 가급적 해주는게 좋다고 한다.. )

( html에서 공백은 두칸 이상부터 그리고 엔터키를 통한 줄바꿈은 무시가 된다... )

( 위 내용은 <table> 태그를 이용해서 정리된 표이지만 선 설정이 없으니 뭔가 허전한 감이 있다...

선에 대한 설정을 html에서 하려면 border 속성을 이용해주면 된다 )

( boder 속성에 값을 주어서 선에 대한 굵기를 제어할 수 있고 

해당 선이 마음에 안든다면 CSS를 이용해서 스타일을 바꿀 수 있다 )

( <table> 태그안에 데이터를 표현할때 제목칸은 <td>대신에 <th>를 사용해서 표현하면 조금더 강조되서 표시가 된다.. )

( html에서 테이블에 대한 구조를 좀더 명확하게 명시해주기 위해서 

<thead>, <tbody>, <tfoot>을 이용해서 나눠줄 수 있고

해당 내용을 해주지 않는다해도 웹 브라우저에서 자동으로 처리를 해주긴 한다...

하지만 코드의 가독성을 위해서도 구조를 명확하게 표시해주는 편이 좋다.. )

입력 양식 - <form></form>

  - 사용자가 입력한 정보를 서버로 전송할때 사용하는 태그

  - <form> 태그안에 <input> 태그에 type 속성을 이용해서 사용자로부터 정보를 입력 받을 폼을 만들거나 

    전송하는 버튼을 만든다.

  - action 속성을 이용해서 전송 버튼을 눌렀을때 해당 폼에 정보를 전송할 위치를 적어주고 

   method 속성을 이용해서 전송 방식을 선택하게 된다.

  ( method 속성을 따로 지정하지 않는다면 GET 방식으로 전송하게 되고 method 속성에는 GET과 POST를 사용할 수 있다 )

  - name 속성을 이용하면 서버쪽으로 정보를 전달할때 어떤폼에 대한 전송인지를 알 수 있게 해준다.

( 폼에 기본적인 개념은 사용자에게 입력을 받아서 해당 입력을 서버로 전송하는 역할이다... )

( 전송 버튼을 누르면 action 속성에 설정된 페이지로 이동하면서 정보를 전송하게 된다 )

( 서버로 전송을 해주려면 각 컨트롤 폼에 대한 name 속성을 통해 이름을 지정해줘야 어떤 입력값이

어떤 폼에서 입력된 값인지를 서버가 알 수 있다 )

( 위에 서버로 전송 되는 내용을 보면  해당 데이터가 전송되는 형태를 알 수 있고 '&' 기호를 구분자로 이용한다.. )

1). 텍스트 입력 - <input> 태그에서 type 속성을 이용해서 text, password를 이용하거나 <textarea> 태그를 이용해서 

                      사용자로부터 텍스트 입력을 받을수 있다.

( 텍스트를 이용해 사용자들에게 입력을 받을 수 있고 

<input> 태그에서 type 속성을 설정하거나 <textarea> 태그를 이용하면 된다 )

2). 선택 - 여러개 혹은 단일선택을 사용자에게 입력 받아서 그 값을 전송 시킬 수 있다. 

                ( <select> or <select multiple>, <input> 태그 type을 checkbox, radio )

( <select> 태그를 이용해서 만들게 되면 dropdown 형식의 선택창을 만들수 있고 

mutiple 속성을 이용해서 ctrl+클릭을 이용해 다중 선택이 가능하도록 할 수 있지만

사용자의 편의성을 위해 보통 다중 선택으로는 checkbox를 더 많이 이용한다 )

( <option>마다 value 속성으로 값을 이용해서 서버로 전송할때 해당 값이 전송되도록 한다 )

( radio 버튼은 해당 그룹 버튼중에 하나만 선택이 가능한 버튼이고

checkbox 버튼은 해당 그룹에서 여러개의 버튼이 다중으로 선택이 가능한 버튼이다... )

( radio 버튼과 checkbox 버튼 또한 value 속성을 통해서 해당 버튼에 대한 값을 지정할 수 있다 )

3). 버튼 - <input>태그에서 type 속성이 submit, button, reset인 버튼이 있고 각 버튼마다 쓰이는곳이 있다.

( submit은 폼에 대한 내용을 서버로 전송할때 사용하는 버튼이고 

button은 보통 자바스크립트와 같은 언어와 같이 사용이 된다...

그리고 reset 버튼 같은 경우에는 해당 폼에 대한 정보를 초기화 시키는 기능을 가지고 있다.. )

( 위와 같이 button에 onclick 속성을 이용해서 자바스크립트의 alert() 함수를 이용해 

버튼을 클릭했을때 'hello world'라는 문구의 경고창이 나타나도록 해봤다... )

4). 데이터 전송 - <input> 태그에서 type 속성을 hidden으로 지정해서 UI에서는 보이지 않게 서버로 

                      데이터를 전송할 수 있다.

( UI에 보이지는 않지만 해당 데이터를 서버로 전송하고 싶을때 <input> 태그의 hidden 타입을 사용하게 된다.. )

( 위에 데이터가 서버로 전송된 내용을 보면 hide에 대한 값이 전송이 된걸 볼 수 있다 )

5). 컨트롤의 제목 - <label> 태그를 이용해서 해당 컨트롤과 연결된 제목으로 지정해줄 수 있다.

( <label> 태그를 이용해서 해당 컨트롤 폼에 대한 제목이라는걸 나타내 

html에 문서 표현 기능을 조금더 제대로 이용할 수 있다.. )

( <label> 태그로 감싸주거나 for 속성과 id 속성을 이용해주면 해당 컨트롤 폼에 대한 라벨이라는 의미를

좀더 명확하게 부여해서 나타낼 수 있다 )

6). method - 폼에 있는 데이터 전송 방식을 결정하는 속성으로 GET 방식과 POST 방식이 있다.

( <form> 태그에서 method 속성을 따로 이용하지 않는다면 기본적으로 GET 방식의 데이터 전송방식을 사용하게 된다 )

( GET 방식 같은 경우에는 위에 보이는 것처럼 URL 주소창에 데이터가 그대로 노출되는 방식이다.. )

( POST 방식을 이용하려면 무조건 method="POST"와 같이 속성에 값을 지정해줘야 한다.. )

( POST 방식은 헤더를 이용해서 데이터를 전송하기 때문에 사용자에게 노출이 될 일이 없어서

GET 방식보다는 보안성이 조금 더 좋다고 볼 수 있다.. 

하지만 그렇다고해서 볼 수 있는 방법이 없는건 아니다... )

7). 파일 업로드 - <input> 태그에서 type 속성을 file로 지정하면 파일을 업로드할 수 있는 기능이 생긴다.