HTML5 필수 이론

📝 HTML5 서식 태그

• 제목 표시 : h1~h6
• 문단, 줄 바꿈 : p, br
• 글자 굵게 : b(bold의 약자), strong(효과는 같은데 '강조'를 위한 것임을 알려줌)
• 글자 기울이기 : em, i
• 글자 밑줄 표시 : u
• 글자 취소선 표시 : s, del
• 큰 글자 표시, 작은 글자 표시 : big, small
• 위 첨자, 아래 첨자 : sup, sub
• 형광펜 배경색 글자 : mark
• 수평선 : hr
• +무의미한 더미 텍스트가 필요할 때! 영어는 Lorem이 있지만 한글은 한글입숨이라는 사이트를 이용할 것

---

📝HTML5 목록 관련 태그

• ol > li (oldered list : 순서가 있는 리스트 - 숫자)
• ul > li (unoldered list : 순서가 없는 리스트 - 기호)

li태그는 ol과 ul태그의 자식 태그

❗ '방콕에서 반드시 들러야 할 베스트' 안에 ul이 귀속되어 있으므로 첫번째 사진처럼 바로 아래 적지 않고 두번째 사진처럼 tab을 한번 해주어야 한다. 그렇지 않으면 보기엔 잘 출력될지라도 ol의 li의 귀속된 ul이 그 li의 형제로 인식된다.

추후 내비게이션을 만들거나 할 때 서브메뉴로 호버창이 떠야 하는데 뜨지 않는 경우가 생길 수도 있다.

---

📝HTML5 a와 img 태그

• 외부 링크나 파일 링크하기 : a

<a href="...">#</a>

• 이미지 html 문서에 넣기 : img

<img src="...">

img 얘는 마감 태그 없다

보통 하나만 쓰기 보다는 두 가지를 중첩해서 많이 사용한다고 한다.

<a href="http://www.naver.com"><img src="네이버로고이미지"></a>

이렇게 해서 로고 이미지 클릭하면 네이버로 이동하게끔

• img태그를 입력하면 src와 alt가 자동입력되는데 src는 이미지 경로를 입력하고, alt는 혹여 이미지가 누락됐을 시 이미지를 대체할 설명 텍스트다. 시각장애인을 위한 정보이기도 하다. 기기가 이미지 대신 이 텍스트를 읽어준다. 웹디자인 기능사 시험에서 누락하면 감점이라고 한다. 사실 일반적인 사이트에서 실질적으로 필요하진 않기 때문에 실무에서는 src만 사용하기도 한다고 함.
  
• a 안에 들어가는 태그 중 target과 title이 있는데 target은 버튼을 클릭했을 때 창이 열리는 방식을 정해줄 수 있고(새 창으로 열기 등), title은 버튼 위에 커서를 올렸을 때 설명 툴팁이 뜨게 할 수 있다. a 태그에서만 쓸 수 있고 다른 태그 안에서는 작동하지 않는다.