[HTML] 태그관련모음

태그

2021/01/28

열

열 1

열 2

1. HTML 관련 명령어 (글자)

•

글자관련태그(h1~h5) 숫자가 작을수록 글자가 큼

<h1>글자태그</h1>
<h2>글자태그</h2>
<h3>글자태그</h3>
<h4>글자태그</h4>
<h5>글자태그</h5>
HTML
복사

•

1 줄바꾸는 태그<br> 2 줄을 바꾸면서 수평선을 넣는태그<hr>

<br>줄바꾸는 태그
<hr>줄을 바꾸면서 수평선을 넣는태그
HTML
복사

•

분단을 나누는 태그

<p>분단 영역을 나누는 태그로는 p태그와 pre태그가 있다.
   p태그는 분단영역을 나누는 태그이지만 한 개의 공백만              표시하고 
	 바꿈 입력을 별도의 태그로 지정해 주어야한다.
  pre태그는 여러 칸 띄우기를 혹은 줄 바꿈 등을 포함하여 입력한 내용 
	그대로 표현하는 태그이다
    </p>
   <pre>분단 영역을 나누는 태그로는 p태그와 pre태그가 있다.
    p태그는 분단영역을 나누는 태그이지만 한 개의 공백만              표시하고 
		바꿈 입력을 별도의 태그로 지정해 주어야한다.
   pre태그는 여러 칸 띄우기를 혹은 줄 바꿈 등을 포함하여 입력한 내용 
	그대로 표현하는 태그이다
   </pre>
HTML
복사

•

기타 글자관련 태그

  <strong>글자를 굵게 표시하는 태그</strong>
   
   <b> 글자를 굵게 표시하는 태그</b>
   
   <em> 글자를 기울이는 태그</em>
   
   <i>글자를 기울이는 태그</i>
   
   <blockquote>인용문을 나타내는 태그</blockquote>
   <q>인용문을 나타내는 태그</q>
   
   <mark>글자에 형광펜 효과를 나타내는 태그</mark>
  
   <u>글자에 밑줄을 긋는 태그</u>
  
   <s>글자에 취소선을 넣는 태그</s>
   
   <small>글자를 작게 표시하는 태그</small>
 
   기본글자에 <sub>아래첨자</sub>를 나타내는 태그와 
					    <sup>윗첨자</sup>를 나태는 태그이다.

	  <abbr> = 마우스커서로 가리킬시 title에 쓴 내용이 보여짐
   <abbr title="Internet of Things">IoT</abbr> 란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술이다
   
<code> = 코드를 입력할 수 있다.
<pre><code>function add(num1,num2){
     var sum = num1+ num2;
     console.long(sum);   
    } </code></pre>
  
<kbd> = 글자모양을 다르게해준다
    <p>취소하려면 <kbd>Ctrl</kbd> + <kbd>x</kbd>를 입력하세요.</p>
HTML
복사

2. 순서 있는/없는 목록

•

<ul></ul>순서없는 목록 나타내는 명령어

•

<ol></ol> 순서있는  목록 나타내는 명령어

ol같은 경우는 순서타입이나 순서시작번호를 사용자가 지정할수 있다.
1.사용자 지정 타입 -> <ol 옆에 정의해준다>
<ol type='a' start ='d'> //소문자로 설정했으며 시작번호는 d로 설정함
</ol>

2. 역순으로 나타낼수 있다 -> reversed를 설정해주면된다.
<ol reversed>
</ol>
HTML
복사

•

<li></li> 리스트 나타내는 명령어

3. 설명관련태그

•

<dt>설명제목</dt>

•

<dd>설명내용</dd>

4. 표 관련 태그

<--
        표를 만드는 태그에는 <table><tr><th><td>가 있다.
        <table> : 기본적인 표를 생성해주는 태그이다.
        <tr> : 표의 행을 나타내는 태그이다.
        <th> : 표의 제목 셀을 나타내는 태그이다.
        <td> : 표의 일반 셀을 나타내는 태그이다.
    -->



    <h1> 기본적인 표 만들기 </h1>
    <table border="1">
        <caption><b>웹 브라우저의 종류</b></caption>
        <tr>
            <th>브라우저명</th>
            <th>제조사</th>
            <th>홈페이지</th>
        </tr>
        <tr>
            <td>익스플로러</td>
            <td>MS</td>
            <td>https://www.microsoft.com</td>
        </tr>
        <tr>
            <td>크롬</td>
            <td>구글</td>
            <td>https://www.google.com</td>
        </tr>
        <tr>
            <td>사파리</td>
            <td>애플</td>
            <td>https://www.apple.com</td>
        </tr>
        <tr>
            <td>파이어폭스</td>
            <td>Mozilla</td>
            <td>https://www.mozilla.org</td>
        </tr>
    </table>
    <figure>
        <figcaption>figure를 이용해서 테이블의 설명 혹은 img의 설명에 주로 사용한다.</figcaption>
        <figcaption>설명 내용을 여러줄로 표기할 수 있다.</figcaption>
    </figure>
HTML
복사

4-1 표 관련 태그중에 colspan / rowspan

<td> 태그의 속성을 이용하여 행과 열을 합치기 할 수 있다.

colspan : 열을 합치기한다.

rowspan : 행을 합치기한다.

2개열과 2개행을 합치고 넓이 130픽셀 높이 150픽셀로 해준다는 의미!

예제 코드를 보면서 이해해보자

<h3>회원정보</h3>
    <table border= "1">  //테이블의 윤곽선을 주기위해 border를 선언해주면 조금더 보기좋아진다.
            <tr>
                <td colspan ="2" rowspan="2" width = "130px" height= "150px">사진</td>
                <td width ="80px">이름</td>
                <td width="200px"></td>
            </tr>
            <tr> 
                 <td>연락처</td>
                 <td></td>
            </tr>
            <tr>
                <td width="70px",height = "50px">주소</td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td height ="100px">자기소개 </td>
                <td colspan ="3"></td>
            </tr>
    </table>
HTML
복사

5. 영역관련 태그들

<div> : 줄 바꿈이 적용되어 이미 존재하는 태그의 다음줄에 영역이 설정됨(블럭요소)

2. <span> : 줄 바꿈이 적용되지 않아 옆으로 영역이 붙음 (인라인 요소) 그 생성된 크기만큼만

설정이 되어 width, height설정이 안됨

3. <p> : 문단 영역을 지정하는 태그 (블럭요소)

4. <pre> : 입력한 대로 문단 영역을 지정하는 태그 (블럭요소)

6. img/video/audio 관련 태그들

img = 이미지를 삽입하기 위해서는 <img> 태그를 사용한다.

- 불러오는 명령어는 src에 파일이있다며 <img src ="폴더이름"/"폴더이름"/"사진이름".PNG>

- alt 라는명령어는 화면낭독기이다.

2. video 태그를 삽입하기위해서 <video>태그를 사용

3. audio 태그를 삽입하기위해서 <audio>태그를 사용

4. video와 audio 불러오는 방식은 img 불러오는 방식과 동일하다.

7. 하이퍼링크 관련 태그

7-1 하이퍼링크 기능을 쓰는 이유와 방법은..?

•

    링크 기능은 웹 문서가 다른 문서와 구분되는 가장 핵심적인 기능이다.
    클릭을 통해 연결된 곳으로 사용을 편리하게 해주는 기능이다.
    텍스트를 클릭해 링크를 이동하는 방법, 이미지를클릭해 링크를 이동하는 방법 등이 있으며
    페이지 내에서 링크를 통한 이동도 가능하다.

7-2 하이퍼링크 관련 코드는..?

•

a 태그를 이용한다.

<a href="1_글자관련태그.html">글자 관련 태그들</a>
HTML
복사

•

img 태그를 이용해서 링크를 걸 수있다.

 <!--img 태그를 이용해서 링크를 걸 수 있다-->
    <a href="http://www.w3schools.com" target ="_blank">
         <img src ="htmlbackup\sample/image/flower5.PNG" width= "150px" heigth ="150px">
        </a>
HTML
복사

•

한 페이지 내에서 점프하는 앵커만들수 도있다. #을 이용해서 한다.

•

#을 삽입한 코드명부분을 누르면 거기로 이동한다.

      <h3 id= "menu"> 한 페이지 내에서 점프하는 앵커 만들기</h3>
      <ul>
          <li><a href = "#content1">본문내용1</a></li>
          <li><a href = "#content2">본문내용2</a></li>
          <li><a href = "#content3">본문내용3</a></li>
      </ul>
      <h4 id="content1">본문내용1</h4>
      <p>기쁘며, 길지 바로 불어 이것이야말로 위하여 있는가? 
        <a href = "#menu">메뉴로 돌아가기</a></p>

        <h4 id="content2">본문내용2</h4>
        <p>기쁘며, 길지 바로 불어 이것이야말로 위하여 있는가있는가? 부패를 그들의 타고 </p>  
        <a href = "#menu">메뉴로 돌아가기</a>

          <h4 id="content3">본문내용3</h4>
          <p>기쁘며, 길지 바로 불어 이것이야말로 위하여 있는가있는 </p>
          <a href = "#menu">메뉴로 돌아가기</a>
HTML
복사

8. 폼 관련 태그

8-1 폼 관련 태그란...

•

form 관련 태그는 html에서 사용자가 입력할 수 있는 양식을 제공하는 태그이다

•

form 태그내에 input 태그들을 통해 사용자가 입력한 정보를 서버로 넘기는 역할을 한다.

* action 속성 : 폼의 입력된 값을 전송받을 서버의 클래스명을 입력한다.

* method 속성 : HTTP 프로토콜에 정의된 서버로 요청하는 방식을 지정한다.(get(url노출)/post(url안노출))</p>

1)코드예시

<form method = "get">
        <label>검색할 내용 : </label>
        <input type = "text" size="20" name="search">
        <input type="submit">
    </form>
HTML
복사

•

sumbit 버튼을 눌럿을 때 action에 지정한 경로로 method에 지정한 방식으로 input 태그들의 값을 서버로 전달한다.

8-2 폼 과 관련된 코드( 코드를 다 살펴봐야한다.)

        <fieldset>
            <legend>필드셋의 제목을 작성하는 부분이다.</legend>
            <label>입력1 : </label><input type="text"><br>
            <label>입력2 : </label><input type="text"><br>
            <label>입력3 : </label><input type="text"><br>
        </fieldset>
    </form>
    <fieldset>
        <legend>필드셋으로 묶은 영역별로 구분이된다.</legend>
        <label>입력1 : </label><input type="text"><br>
        <label>입력2 : </label><input type="text"><br>
        <label>입력3 : </label><input type="text"><br>
    </fieldset>

        <h2> text와 관련된 input태그</h2>
        <form>
        <h3> type="text"</h3>
        <p>- 한 줄 짜리 텍스트를 입력할 수 있는 텍스트 상자이다.</p>
        <label>아이디 : </label>
        <input type ="text" name = "userId" size ="20" placeholder="아이디를 입력하세요"
            maxlength="15" value="greedy" autofocus>


        <br>

        <h3>type = "password"</h3>
        <p>- 비밀번호를 입력할 수 있는 텍스트 상자이다.</p>
        <label>비밀번호 : </label>
        <input type="password" name="userPwd" size="20" placeholder="비밀번호를 입력하세요"
            maxlength="15" value="greedy" autofocus>    
        
        <br>
        <h3>type="search",type="url",type="email",type="tel"</h3>
        <p>-겉모습은 텍스트필드와 비슷하지만 각각의 정보에 맞게 분화된 기능을 제공하는
            텍스트 상자이다.
        </p>
        <label>검색 : </label>
        <input type ="search" name="searchText" placeholder="검색할 내용 입력">
        <br>
        <label>홈페이지 : </label>
        <input type ="url" name="homepage" value="https://">
        <br>
        <label>이메일 : </label>
        <input type ="email" name="email" placeholder="이메일을 입력하세요">
        <br>   
        <label>전화번호 : </label>
        <input type="tel" name="tel" placeholder="전화번호를 입력하세요">
        <br>
        <input type="submit" value="전송"> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="reset" value="취소">   
    </form>

    <h2>숫자와 관련된 input태그</h2>
    <form>
        <h3>type ="number"</h3>
        <p>- 입력창에 숫자를 입력하는 것이 기본이지만,
            브라우저에 따라 스핀박스가 표시되기도 한다.
        </p>
        <label>수량 : </label>
        <input type="number" name="amount" min="0" max="100" value="0" step="5">

        <h3>type = "range"</h3>
        <p>- 슬라이드 바를 통해 숫자를 지정할 수 있다.</p>
        <label>점수: </label>
        <input type = "range" name="range" min="0" max="100" value="50" step="10">


        <br><br>
        <input type="submit" value= "전송" >
    </form>

    <h2>날짜와 시간 관련되 input 태그</h2>
    <form>
        <h3>type="date", type="month", type="time", type="datetime-local"</h3>
        <label> date : </label>
        <input type="data">
        <br>
        <label> month:</label>
        <input type ="month">
        <br>
        <label>time:</label>
        <input type ="time">
        <br>
        <label>datetime-local</label>
        <input type = "datetime-local">
        <br>

        <input type="submit" value="전송">
    </form>

    <h2>라디오 버튼과 체크박스</h2>
    <form> //label for=""를 하면 이름눌러도 체크가된다.
        <h3>type="radio"</h3>
        <label>성별 : </label>
        <input type="radio" id="male" name="gender" value="M" checked><label for="male">남자</label>
        <input type="radio" id="female" name="gender" value="F"><label for="female"></label>여자</laber>
        

        <br>
        <h3>type="checkbox"</h3>
        <label>취미 : </label>
        <input type="checkbox" id="baseball" name="hobby" value="baseball" checked>
        <label for="baseball">야구</label>&nbsp;
        <input type="checkbox" id="basketball" name="hobby" value="basletball">
        <label for="basketball">농구</label>&nbsp;
        <input type="checkbox" id="football" name="hobby" value="football">
        <label for="football">축구</label>&nbsp;


        <br>
        <input type="submit" value="전송">
    </form>

    <h2>그 밖에 input 태그</h2>
    <form>
        <h3>type="color</h3>
        <label>색상 선택: </label>
        <input type="color" name="color">
        <br>

        <h3>type="file</h3>
        <label>파일선택:</label>
        <input type="file" name="uploadfile">
        <br>

        <h3>type="hidden"</h3>
        <label>안보임 : </label>
        <input type ="hidden" name="hiddenvalue" value="1">

        <br>
     

        <br>
        <input type="submit" value="전송">
        <-- button 태그를 이용해서도 버튼을 만들 수 있다.-->
        <button type="submit">전송</button>

        <input type="button" value="버튼"> <--submit안함-->
        <button>버튼</button> <--submit시켜버림-->
    </form>

    <--select 태그와 option태그
    : 사용자가 내용을 입력하는것이 아니고 여러 옵션 중에서 선택하게 하고 싶을때 사용하는 
  드롬다운 목록이다.-->
    <h3>select태그와 option태그</h3>    
    <form>
        <h4>기본 select태그와 option 태그</h4>
        <label>국적 : </label>
        <select name="national">
            <option value="ko">한국</option>
            <option value="ch">중국</option>
            <option value="jp">일본</option>
            <option value="etc">기타</option>
        </select>
        
        <h3>select 태그의 속성</h3>
        <p>size : listbox의 크기를 지정한다.(한번에 보여지는목록갯수)<br>
        multiple : 다중 선택가능</p>
        <select size="2"multiple>
            <option value="ko">한국</option>
            <option value="ch">중국</option>
            <option value="jp">일본</option>
            <option value="etc">기타</option>
        </select>

        <br>
        <input type="submit" value="전송">
        </form>


        <h2>textarea 태그</h2>
        <p>input type="text"와 유사하지만 여러줄을 입력할 수 있다.</p>
        <form>
            <textarea cols="30" rows="5" style="resize: none;">내용입니다</textarea>
        </form>


</body>
</html>
HTML
복사