기본적인 태그

1. 태그의 형태

   가. 시작 태그와 종료 태그가 모두 있는 형태

         <태그 이름>   쓸 내용 </ 태그 이름 >

   나. 종료 태그가 없는 형태

        <태그 이름   쓸 내용 >

 

2. 자주 사용하는 태그

    가. h: 제목 태그

    나. br, p, div, span: 줄 바꿈(br) , 문단 지정 (p) , 영역 지정 (div) , 범위 지정 (span)

    다. link: 현재 문서와 외부 소스를 연결해주는 태그

    라. img: 이미지를 나타내는 태그

    마. form: 폼(입력 양식)을 만드는 태그

    바. button: 버튼을 만드는 태그

    사. ol, ul, li : 리스트를 나타내는 태그

 

    2. 가 h 태그

         heading의 h, 즉 '제목'이라는 뜻. HTML의 제목을 나타내며 검색 엔진이 h 태그를 기반으로 결과물을 보여주기에 검색 키워드를

         h 태그에 넣으면 좋음!

         ex) <h1> this is heading 1 </h1>

               <h2> this is heading 2</h2>

                h 태그는 h1~h6까지 있음! h1에서 h6으로 갈 수록 글자크기가 작아짐! 줄바꿈 따로 할 필요 없음!

     

     2. 나 br, p, div, span 태그

          <br/>: break(line break) -> 한 문단에서 줄 바꿈  (enter키 라고 생각)

          <p> </p> : paragraph, 문단 나눔-> 줄 바꿈이 두 번 일어남

         <div> </div> : division, 영역 나눔-> 줄 바꿈이 한 번 일어남

         <span> </span> : 줄 바꿈을 하지 않은 채 글꼴, 색상, 여백 조절 -> 줄 바꿈 일어나지 않음

       ex) 

           <p>

               O'er all the hilltops<br/>

               Is quiet now, <br  />

               In all the treetops<br />

               Hearest thou<br  />

           </p>

           <p>

               Hardly a breath; <br />

               The birds are asleep in the trees:<br /> 

               Wait, soon like these<br />

               Thou too shalt rest.

           </p>   

 

            Output: 

               O'er all the hilltops

               Is quiet now,

               In all the treetops

               Hearest thou

 

               Hardly a breath;

               The birds are asleep in the trees:

               Wait, soon like these

               Thou too shalt rest.

 

          ex)

          This is a line of text <div> with some text in a div <div>

          and some text after.

          

            Output:

            This is a line of text 

            with some text in a div

            and some text after

           

            +)  <br/> 과 <div>의 차이가 무엇일까? div는 특정 영역부터 영역까지만 그 사이 enter가 되는 걸까?

            <br>: 단순히 텍스트를 줄 바꿀 때 사용

            <div>: 웹 페이지 레이아웃을 만들거나 CSS와 JavaScript와 함께 사용해 특정 영역에 대해 스타일링 및 기능을 추가 가능

       

          ex) 

           This is a line of text <span> with some text in a

           span</span> and some text after.

        

             Output:

             This is a line of text with some text in a span and some text after.

    

       2. 다 link 태그

           link 태그 : 현재 파일이 다른 파일과 연결되어 있는 관계정보 표현하는 데 사용

                            특히 CSS와 HTML을 연결해주는 기능을 가짐

           기본 구조:

           <link rel = "속성" href = "파일 경로">

     

       2. 라 img 태그

          img 태그: HTML 문서에 이미지 삽입하는 태그. 주요 속성으로 src, alt, width, height 제공

          기본 구조:

             <img src = "경로"   alt = "설명"   width = "폭"   height = "높이">

         ex)

             <img src = "mountain.jpg"

                   alt = "mountain"

                   width = "500"

                   height = "200"

               />

 

         2. 마 form 태그

             form 태그: 사용자 입력 양식 만들 때 사용

             기본 구조:

                <form> form 요소 태그 </form>