HTML의 기초를 다지며, 잊어버리지만 중요한 디테일에 대하여..!

HTML Tag

<p attr = "value"> _contents_ </p>

• HTML tag는 opening tag와 closing tag, 꺽쇠로 구성, 내가 마크업 하려는 내용이 어떤 형식인지 알려준다.
• 다양한 tag가 있고, 웹 표준에 따라 올바르게 사용해야 한다.

HTML Elements & Attributes

강조 <strong> </strong>

• <strong>은 강조 태그로 bold 처리되지만, 마크업 하면서 중요한 정보값을 묶을 때도 많이 사용한다.

링크(anchor) <a herf> </a>

• href는 'hypertext reference(웹 페이지 주소값)'의 약자
• 표기 방법
  1) URL을 그대로 붙여 넣기
  2) 페이지 내 이동 : <a href ="#주소값"> 으로 id 값을 사용
  3) email : <a href ="mailto:주소">
  4) 전화걸기 : <a href ="tel:전화번호">
• 링크를 새 창으로 열고 싶을 땐 (거의 대부분), target="_blank"

이미지(image) <img src ="#" alt=""/>

• alt는 'alternative text(대체 텍스트)'로 보여주려고 하는 이미지 파일이 보이지 않을 때 표시하는 부분이다.
  *웹 접근성을 위해 써주는게 좋다. 왜? screen reader에서는 읽어주기 때문이지! 기술을 사용하기 어려운 사람들도 적극 고려하는 혼자 감동한 부분😭

목록(list) <ul>, <ol>

• <ul>, <ol>의 자식 요소는 무조건 <li>만 받는다. <div>조차 거부한다. 따라서 다른 태그를 넣고 싶다면 <li> 안에 넣어야 한다.

<ul>
  <li>
     <a>
     </a>
  </li>
</ul>

정의목록(description list) <dl>, <dt>, <dd>, <dfn>

• 1) 용어를 정의할 때, 2) key-value로 정보를 제공할 때 쓴다 (이름: 김개발, 나이: 18..)
• <dl>description list 안에는 <dt>description term와 <dd> description data가 셋뚜셋뚜 * <dt>에는 반드시 <dd>가 따라와야 한다. (<dt>가 연속적으로 나오는 건 OK)
• <section> 태그를 쓸 수 없다. (<div>는 가능하다)

인용(quitations) <blockquote>, <q>

• 출처가 문장일 경우 <cite> 출처 </cite>를, url일 경우 <blockquote cite="http://"> 쓴다.
• <q>는 따옴표 생성해준다.

div(division)

• <div>는 섹션을 나눌 때 사용한다.
• <a>, <p>, <img> 등의 태그는 그 자체로 어떤 기능을 하는지 명확히 알 수 있지만, <div>는 의미가 없다.
• <div>는 비슷한 속성끼리 그룹짓고, 디자인에 맞게 레이아웃을 분리해주고, 각 <div>에 class나 id라는 attribute를 부여하여 CSS 스타일 작업을 해야할 때 쓴다.

  input, textarea, button은 모두 inline elements로 block element 인<div>로 감싸 영역을 분리한다.