HTML 기본 정리

1. 언어 사용 시 html태그에 적용된 lang속성과 다른 언어를 사용하게 된다면 작성되는 html태그 요소에 lang속성을 추가하여 사용한다. (브라우저가 인식하기 쉽도록)
└ html lang value로 검색가능

2. <h1>~<h6> : 제목태그(중요도 순으로 작성), <p>문단태그(내용), <em>·<strong>강조태그, <br>줄바꿈태그, <hr>선 태그

3. Anchor태그(링크) : 현 위치에서 다른 위치로 이동할 때 사용한다.
페이지 이동이나 같은 페이지 내에서 다른 세션으로 이동하고 싶을 때도 사용한다.
target : "_blank" 새로운 탭으로 창이 열린다. 기본값 _self
href속성 필수 : href = "주소"
      └ 1. 페이지URL
      └ 2. 상대경로(./pages/main.html)
      └ 3. 페이지 내 이동 (해당 page내의 id혹은 class로 적용가능)
      └ 4. 메일쓰기 (href = "mailto:이메일주소") : 메일쓰기로 연계된다.
      └ 5. 전화걸기 (href = "tel:전화번호") : 전화걸기(모바일에서 활용)

4. img 태그 : 속성 src = "이미지 상대경로 혹은 이미지URL" alt = "대체텍스트";
└ 이미지에 대한 정보를 작성하여 이미지가 로드되지않을시 인식할 수 있게 도움을 주는 텍스트

5. list 태그(목록) : ul, ol태그 ul:순서가 중요하지 않은 리스트, ol:순서가 중요한 리스트
└ 자식요소로 <li>태그만을 사용해야 한다.

6. Description List 태그(정의목록) : 용어를 정의할 때 사용하는 정의 리스트 (ex 사전에서 단어와 그 뜻을 설명할 때)
     Key-Value로 정보를 제공할 때 (ex 이름:굼벵이, 직업:학생)
     사용 시 dt,dd를 중복사용해도 상관없으나 순서에 맞춰서 사용해야한다. dt에 대한 dd가 여러개이거나 여러개의 dt에 대한 dd가 하나이거나 dt가 있는데 다음에 오는 dd가 없으면 안된다.
└ <dl> : 정의목록 사용 선언, 자식태그로는 div, dt, dd만 사용가능
└ <dt> : 제목, 용어를 정의(key), 여러개 사용가능
└ <dd> : 설명(value), 여러개 사용가능
└ <dtn> : 사전적으로 용어를 설명할 때 사용, <dt>태그 안에 사용

7. Quotations 인용태그 : blockquote, q 문단내에서 인용된 문장을 마크업하는 용도
└ blockquote : 인용내용전체, q : 특정 문장
└ <cite> : 해당 태그안에 사용 출처를 밝힐 때 사용, 속성으로도 사용가능하다 가져온 해당 사이트를 적는다.

8. div, span : 웹 브라우저가 인식하는 의미는 없음
                 스타일링을 위해 사용
                 구역을 나눠야할 때 구분해야할때

9. form : <form action="" method=""></form> -> 기본형태
            사용자로부터 input을 받기위한 태그
            action="API주소", method = "GET|POST"

9-1. input -> <input type = "?">
              input에게 공통적용 가능 속성
               └ placeholder = "?" 기본적으로 보여줄 값(사용자가 값을 입력하면 사라진다.)
               └ maxlength = "?" 최대 문자수 제한
               └ minlength = "?" 최소 문자수 제한
               └ required : 무조건 입력하도록 설정
               └ value = "?" input태그에 입력되는 값
               └ disabled : 사용자가 쓰지 못하도록 제한

               input의 type종류 : tel -> 전화번호 (pattern사용가능{정규표현식으로})
                                email -> 이메일만 쓸수있도록 제한
                                password -> value를 보이지 않게 대체텍스트로 보여줌
                                URL -> URL값만 입력가능
                                number -> 숫자만 입력가능 (min, max속성으로 수치상의 제한을 줄 수 있다.)
                                file -> 파일을 첨부하게 할 때
                                                └ 속성 accept ="" ( 파일 타입을 제한한다. )
                                                                 └ .png, .jpg로 제한가능
                                                                          └ 구분은 ,(콤마)로
                                                                          └ audio/* , video/*, image/*
                                                                                    └ 미디어 타입으로도 지정가능 ex) image/gif, image/jpeg 등등

9-2. Label태그 : form양식에 이름을 붙이는 태그
                for="누구"를 꼭 사용해야함 ( input field의 id )

9-3. Radio & CheckBox
            └ <input type = "radio"> -> 여러 항목 중에서 하나만 선택가능
            └ <input type = "checkbox"> -> 여러항목 중에서 여러개 선택가능
            └ label태그로 input의 id를 이용하여 연결 가능
            └ name = "?" 속성을 사용하여 그룹지정가능 (결과값이 같이 도출됨)
            └ value = "?" 속성으로 "꼭"값을 지정해주어야한다. ( 서버에 정보를 전달해야하기 때문에 , 겉으로 보이는 정보는 label태그에 내용이 보이지만 서버에 전송될 때는 value값이 전송되기 때문에 )

9-4. Select & Option : select에 name값을 준다. multiple속성을 넣으면 여러개 선택 가능
                       option에 value를 넣어준다.

9-5. Textarea : 여러줄에 걸쳐서 많은 양의 문자를 받을 때 사용한다.

9-6. button : 눌렀을 때 어떤 작용을 하는 것
                └ type="?" -> button, submit, reset

10. table : 데이터를 담은 표을 만들 때 사용
              └ <thead> 태그로 감싸면 테이블의 헤더라는 것을 명시 할 수 있다.
              └ <tbody> 태그로 감싸면 테이블의 바디라는 것을 명시 할 수 있다.
              └ <ftoot>태그는 총합, 결론 부분에 해당할 때 사용한다.

              └ <td> 태그에 사용하는 속성 -> rowspan = "숫자" : 가로 줄 합치기
                                       colspan = "숫자" : 세로 줄 합치기
              └ <th> 태그에 사용하는 속성 -> scope = "col | row" : 가로의 헤더인지 세로의 헤더인지를 표시한다.

11. 미디어파일 Media Files
                    └ <audio src = "?"></audio>
                        └ 속성 : controls -> 컨트롤러 생성
                             autoplay -> 자동재생됨
                             loop -> 무한반복
                    └ <audio>태그안에 속성으로 src를 사용하지 않고 <source>태그를 사용할 수 있다.
                                         └ 직접 src를 사용할 경우 브라우저에서 지원하지 않는 파일일 경우 사용 불가하지만 <source>사용시 다양한 확장자 지원이 가능해진다 ( 파일에 따라 입력해야하는 속성은 mozilla 검색 )
                    └ <video>태그는 <audio>태그와 사용법이 동일하다.

12. 기타 Etc : <abbr> 태그 -> 약자, 약어 : title속성을 활용하여 설명할 수 있게 하는 것
             <address> 태그 -> 1.(물리적)주소 2.url 3.email 4.전화번호 5.sns
             <pre> 태그 -> html문서에서 작성된 형태 그대로 출력됨
             <code> 태그 -> 코드를 작성할 때 사용

13. img태그 사용 시 alt값을 설명하기 어렵다면 공백으로 둬야한다 (생략x)
     aria-label -> 태그 안의 텍스트를 읽는 것이 아니라 스크린 리더로 읽을 시 읽히게 하는 텍스트
     aria-hidden -> 스크린 리더에는 읽히지 않게 만드는 것

14. sectioning elements = 단원(단원의 주제, 제목)
                              반드시 heading태그를 작성(section, article, nav, aside)
    문서구성요소 순서 -> header, main, footer

15. semantic tag

header : 머리말 영역으로 문서 또는 섹션의 헤더를 나타낸다. 하나의 문서 안에 여러 개 사용가능 (특정 영역(섹션)의 헤더 이거나 문서 전체의 헤더가 될수 있다.)
nav : 내비게이션(navigation) 역할을 하는 태그, 다른 영역, 사이트, 다른 문서 사이를 탐색할 수 있는 링크의 집합체이다. 주로 메뉴를 마크업하는 데 사용한다.
main : 문서의 주요 컨텐츠를 나타낸다. 반복되는 컨텐츠를 포함시키면 안됨. 한 페이지에 한번만 사용 가능하다.
section : 어느 한 구역을 말하는 데, 제목을 갖고 있으면서 문서 전체와 관련이 있는 컨텐츠의 집합이다. (article 아래에도 섹션이 올 수 있다.), 반드시 heading을 가져야 한다. (section=문서에서 독립적인 특정 영역, article=영역 속에서 독립적인 컨텐츠)
article : 문서 본문 중 독립된 컨텐츠이며, 즉 개별 뉴스기사나 게시물이다. 하위에 section태그를 넣을 수 있다. (section = 여러 개 컨텐츠의 묶음, artcle= 그 자체로 독립적 컨텐츠)
aside : 사이트 바라고 불리면서 사이드에 배치되는 경우가 많고, 아래쪽에도 배치 가능하다. 광고 영역등으로 활용 될 수있다. 없어도 상관없다.

저작자표시

티스토리툴바