2. 마크업 & 태그 & link

■ 시맨틱 태그

의미를 가진 태그, 이름이 붙여진 div 태그

무조건 사용하는 것이 아니라, 작성하는 사람의 의도가 중요하다.

 

왜 사용하는가?

1. 검색엔진 최적화
2. 웹 접근성
3. 개발자의 생산성

 

■ link

rel

• stylesheet : css 파일
• icon : 사이트 아이콘

href

• mailto
  - <이메일 주소>라는 걸 사용하면 이메일을 보낼 수 있다. 이 링크를 클릭하면 이메일 프로그램이나 이메일 앱을 열 수 있고, 받는 사람 주소에 링크에 적힌 이메일 주소를 자동으로 입력해 준다.
  ex) <a href="mailto:test@example.com">메일 보내기</a>
  
  
• tel
  - <전화번호>를 사용하면 전화를 걸 수 있다. 데스크톱 컴퓨터에서는 전화 기능이 없을 수 있지만, 스마트폰에서 이 링크를 클릭하면 전화 앱으로 연결된다.
  ex) <a href:"tel:+821012340123">전화 걸기</a>

 

■ a

target : _blank / _self(기본값)

 

■ 기본 태그

• 제목 태그 : <h1> ~ <H6>
• 본문 : <p>
• 줄바꿈 : <br>
• 중요 : <strong>
• 강조 : <em>
• 취소 : <s>
• 인용 : <blockquote> - 긴 글 / <q> - 짧은 글
• 위첨자 : <sup>
• 아래첨자 : <sub>
• 주제 전환 : <hr>
• 머리서식이 정해진 텍스트 : <pre>

 

리스트

• 순서 o : ol
• 순서 x : ul

 

테이블

• thead
• tfoot

 

멀티미디어

• img
• video : autoplay / muted / controls
• audio : controls / autoplay
• iframe

 

Url 프래그먼트

• 화면이 바뀌지 않고, 화면 안에서 해당하는 부분으로 이동하게끔 만든다.
• #마크업 표시는 주소 맨 마지막에 붙어서 해당 주소의 일부분을 가리키는 용도, 이것을 'URL 프래그먼트'라고 한다.
  주소창에는 선택한 목차가 샾(#)과 함께 표시된다.

 

border : collapse / spacing

 

■ form
확인 버튼을 누르면 기본적으로 페이지가 이동한다.

• label for - input id 연결
• name
• type : password / email / checkbox - value / number - min, max, step / file - accept / multiple / radio - value / range - min, max
• button : submit / reset
• method
  웹 브라우저는 페이지를 이동하거나, 어떤 데이터를 전송할 때 서버에 '리퀘스트'라는 걸 보낸다.
  대표적으로 GET(기본값) 리퀘스트는 데이터를 받을 때 사용하고, POST 리퀘스트는 데이터를 보낼 때 사용한다.
  폼 버튼을 눌렀을 때 페이지를 이동하는 건, 사실 웹 브라우저가 어떤 서버로 GET 리퀘스트를 보낸 것이다.
  만약 파일 크기가 너무 클 경우, GET 리퀘스트와 쿼리 문자열 만으로는 보낼 수 없다. 이럴 때, POST 리퀘스트를 주로 사용한다. <form> 태그의 method 속성을 바꿔 주면 POST 리퀘스트를 보낼 수 있다.
• action
  현재 페이지 주소 말고, 다른 주소로 이동하게 하고 싶다면, 설정할 수 있다.
• select
• textarea
• input : placeholder / required / autocomplete