HTML 기초

📚 HTML 이란 무엇인가?

• Hyper Text Markup Language
• 웹브라우저를 구성하는 가장 기초가 되는 마크업 언어

📒 Sementic HTML

• HTML을 마크업할 때 단순 나열이 아닌 정보와 의미에 맞춰 태그를 사용하는 것
• 코드 수정 시 편리, 검색 엔진 최적화에 good~!

📒 태그 구성 요소

<p attr = "value">

• p : 태그 (문단)
• attr : 속성 / 태그 안에 내용을 좀더 상세히 설명하는 속성 값

📒 태그 종류

1. <h1> ~ <h6> : 제목

2. <p> : 문단

3. <strong> , <em>: 강조 (진하게, 기울기)

4. <a> : anchor tag, 링크 이동

• 필수 속성 : href (hyper reference)

//주소값 표기 방법
<a href="url">
<a href="./파일명">
<a href="#id">
<a href="mailto:메일주소"> //메일 바로 보내기
<a href="tell:전화번호"> //전화 바로 걸기 (모바일)
  
//자주 쓰는 속성
<a href="url" target="_blank"> //새창으로 열기

5. img : 이미지

• 필수 속성 : src, alt

<img src="이미지주소" alt="대체텍스트">

//대체텍스트는 이미지를 볼 수 없는 상황일 때 대체로 보여지는 텍스트 (이미지설명)

6. ol : 순서가 있는 리스트 부모 태그

7. ul : 순서가 없는 리스트 부모 태그

   li : ol, ul의 유일한 직계 자식 태그 (다른 태그는 직계로 올 수 없음)

8. dl : 용어를 정의 할때, key-value로 정보를 제공할 때 쓰는 리스트 태그

   dt dd div : dl 의 직계 자식 태그

9. dfn: 용어 정의 할때 사용하는 태그

10. blockquote : 인용글

<blockquote cite="url">인용글</blockquote>
//cite는 생략 가능

11. cite : 출처

12. q : 문단 내에 인용글에서 사용 (""쌍따옴표가 생긴다.)

13. div,span : 아무런 의미 없는 태그

• 최대한 사용하지 않도록 노력한다.

  div: 전체를 그룹화 할때
  span: 글자 일부, 문단 내 일부

14. form : 사용자게에 input(정보)를 받기 위한 태그

<form action="API주소" method="GET/POSt">
 //API주소 : form을 처리할 로직이 있는 url주소
 //GET/POST : 기본으로 GET 사용 , 정보가 많을 땐 POST

15. input : 입력창 필드

• 필수 속성 : type(텍스트/이메일/비밀번호 등)

  text : 텍스트
  email : 이메일 @ 가 없으면 에러가 남
  password : 입력값을 '점'으로 표기
  url : 링크
  number : 숫자
  file : 파일
  radio : 체크박스 (단 하나만 선택가능)
  check : 체크박스 (다중 선택 가능)

• radio, check : name,value 속성 필수 사용

• 그외 속성
  placeholder : 인풋 안에 텍스트 (설명구)
  value : 초기 텍스트 입력값
  maxlength : 최대 입력가능한 글자수
  minlength : 최소 입력해야하는 글자수
  max : 숫자 최대 값
  min : 숫자 최소 값
  required : 무조건 입력(필수 입력)
  disabled : 입력 불가
  accept : 파일 유형 지정

16. label : 사용자 인터페이스에 라벨(이름)을 지정한다.

• 필수 속성 : for 을 사용하여 label의 요소와 결합 가능

<label for="결합요소의 id값">

• label은 html에서는 텍스트로 보여지지만, 텍스트를 클릭하면 결합된 label 요소가 선택되어 사용자의 편의성이 높아진다.

17. select : 옵션 선택

• 필수 자식 요소 : option

<select name='pet' id='pet-select'>
  <option value='cat'>cat</option>
  <option value='dog'>dog</option>
  <option value='hamster'>hamster</option>
</select>

• name -> multiple 변경 시 여러개의 옵션 선택 가능

18. textarea : 여러줄, 많은 양의 텍스트를 받는 태그

19. button : 버튼 태그

• 필수 속성 : type

  button : 가장 기본적인 버튼 type
  summit : 서버에게 제출, 보내는 용도
  reset : 폼을 리셋 (잘 사용하지 않음)

20. table : 표를 만드는 태그

<table>
    <thead>
        <tr> // 가로줄 생성
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td> 
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

• colspan : 가로로 차지하는 칸 수 지정
• rowspan : 세로로 차지하는 칸 수 지정
• scope : 행과 열의 맨 위 (header)임을 명시한다. row,col 활용

참고

구름 EDU : 김버그의 HTML&CSS는 재밌다.
MDN