프론트엔드 HTML 시멘트 웹 태그, table, datelist, form, iframe

 

 

시멘틱 웹 태그

전 세계에 만들어진 웹 사이트가 증가함에 따라
검색 엔진이 사용자가 요구하는 정확하고 가치 있는 정보를 탐색하기 위해 
요구하는 사항이 증가
따라서 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록
태그에 해당 태그의 역할을 통해 이름을 지어주는 것

 

 

시멘틱 웹 태그의 장점

1. 웹 접근성 
: 웹 사이트를 사용하는 어느 누구라도 불편함 없이 평등하게 이용할 수 있도록
접근성 자체를 높이는 행위

2. 검색 엔진 최적화 (SEO)
: 검색 엔진이 해당 웹 사이트의 정보를 더 쉽게 알 수 있도록
태그에 해당 태그의 역할을 통해 이름을 지어주는 것

3. 가독성
        ex.  

 

        <!-- header start -->
        <div>
        ...
        </div>
        <!-- header end -->
        
        <!-- container start -->
        <div>
        ...
        </div>
       <!-- container end -->

 

        <!-- footer start -->
        <div>
        ...
        </div>

        <!-- footer end -->

       -------------------------------------------------

        <!-- 시멘틱 웹 태그 사용 -->
        <header>
        ...
        </header>
        
        <main>
        ...
        </main>

        <footer>
        ...
        </footer>

 

시멘틱 웹 태그의 종류 

 

1. header
제목, 로고, 검색창, 사용자 정보, 메뉴(nav), ...

2. main
해당 웹사이트의 주된 컨텐츠를 담을 때 사용

3. footer
일반적으로 웹 페이지 최하단에 위치 
ex. 회사정보, 저작권정보 등

4. section
한 문서의 구역을 나타낸다
적합한 뜻을 갖지 않을 때 사용하는 태그

5. nav
다른 페이지로의 링크 (메뉴, 목차, 색인)등에 사용

6. article
웹 페이지에서 반복 및 재사용될 수 있는 구간
ex. 상품 목록, 게시판의 글, 매거진이나 뉴스 등

7. aside
주된 컨텐츠와 간접적으로 연결되는 부분
ex. 사이드바, 사이드 메뉴

 

 

---

 

 

기타 HTML 종류

 

table

 

: 여러 종류의 데이터를 구분하여 보기 쉽게 정리해주는 일종의 표
  

    ex.
        <table>
            <caption></caption> -- 표이름 (optional)

            <thead> -- 제목행 (optional)
                  *<tr></tr> --가로, 행
                  *<ht></th> -- 중앙정렬, 굵게 (제목열)
                   <td></td> -- 칸, 열 (일반열)
            </thead>
            <tbody> --- 본문 (optional)
            </tbody>
            <tfoot> -- 주석, 참조, 색인, 계 (optional)
            </tfoot>
        </table>

        <table>
            <tr>
                <th></th>            
            </tr>
            <tr>
            </tr>
            <tr>
            </tr>            
        </table>

 

 

datelist

 

: 검색이 가능한(미리보기가 가능한) input(사용자 태그)

    ex.
    <input type="text" list="datalist 태그의 id 속성값"/>

    <datalist id="속성값">
        <option></option>
        <option></option>
    </datalist>

 

 

form

: 사용자의 입력을 웹 브라우저에서부터 백엔드에 데이터를 요청할 때 사용
그러나 반드시 사용해야 하는 것은 아니다

key point
1 action
2 method
3 submit(onSubmit)

form은 제출 버튼이 눌러지거나 onSubmit 이벤트가 발생했을 때
action에 form안에 작성된 사용자 입력(input) 데이터를 전송

action은 form submit되었을 때 데이터가 향하는 주소, 경로로
method는 데이터 전송 패턴

JSP와 같은 웹 서블릿이 아니라면
action과 method는 현재 거의 사용하지 않는 속성
        
그럼에도 form태그가 사랑받고 있는 가장 큰 이유는
submit 이벤트가 되었을 때 form안의 input 요소의 값을 가져올 수 있고
enter가 눌러졌을 때 submit을 자동으로 실행하기 때문에
현재도 enter를 사용해야 하는 경우 form 태그를 애용

 

   ex.

   <form action="#" method ="GET"> <!-- action을 빈 공간으로 두고 싶을 때 #을 넣는다 -->

    <!-- 백엔드 서버가 없기 때문에 백엔드 확인 불가 -->

    <p>이메일 : <input type="text" name="user_email" required /></p>

     <!-- 127.0.0.1:5500?name명=input의 값 -->

     <!-- 127.0.0.1:5500?user_email=email -->

     <p>비밀번호 : <input type ="password" name="user_password" required /></p>

     <!-- button 요소의 기본 type 속성값은 submit

      따라서 form 안에 있는 button 요소는 모두 submit(제출)

      그러나 혹, 내가 제출을 원하지 않는 버튼이 있다면 -->

       <button>로그인</button>

       <!-- 엔터를 치면 로그인 효과랑 같은 기능

       최근 form태그의 action과 method는 거의 사용하지 않음 -->

       <button type="button">제출안함</button>

       <button type="reset">초기화</button>

        </form>

    * method    
     GET
        주소에 데이터를 실어 전달하는 방식
      POST
          http request message의 body안에 데이터를 실어 전달하는 방식

                ex. 
                    백엔드서버 주소
                    www.song.com

                    이메일
                    비밀번호

                    1 GET (조회) ; 상대적으로 덜 중요한 정보
                    www.song.com/api/user/signup?user_email=korpg0000@gmail.com&user_password=1234  
                    www.musinsa.com/cloth?color=red

                    2 POST (저장, 수정, 삭제) ; 보안적으로 중요한 정보
                    www.song.com/api/user/signup
                    head (보안, 데이터종류, config)
                    body (데이터 본문)

                    수정과 삭제는 put, patch, delete 등을 사용한다

 

 

iframe

 

: 외부의 링크 사이트를 현재 웹 사이트 내에서 보여주기 위한 태그
    ex. youtube

 

    <!-- 새 창으로 이동 -->

    <a href="https://www.naver.com" target="_blank">네이버로 이동</a>

    <!-- 외부 링크로 이동 -->

    <iframe src="http://www.koreaitacademy.com" width="500" height="800"></iframe>

    <iframe width="560" height="315" src="http://www.youtube.com/JpzM8Ac4OMM" title="youtube video player">

        <!-- YouTube > 공유 > 퍼가기 > iframe 복사 붙여넣기 -->

    <marquee>흘러가는 텍스트</marquee>