HTML 태그

제목 태그 (heading)

•  <h1>~<h6>까지
•  숫자가 작을수록 큰 글씨

h1, h2, 기본 크기

단락과 개행 (paragraph, linebreak)

• <p> 는 단락
• <br> tag는 줄바꿈

텍스트 태그 ( B, I, U, S )

• <b> 글자를 굵게
• <i> 이탤릭체 ( 기울임 )
• <u> 밑줄
• <s> 글자에 중간선

b, i, u, s

앵커 태그 

• <a> 태그
• HTML의 하이퍼 텍스트에 해당
• 다른 문서로 이동할 수 있는 link 생성
• <a  href="nantes.tistory.com/" target="_blank"> 홈으로 </a>
• target속성은 _self가 기본으로 현재 창에서 이동
• _blank는 새 창에서 이동
• id나 class의 값을 줄 수 있음

의미 없이 요소를 묶는 태그 (container)

• <div> block-level ( 한 줄 전체 영역 차지 )
• <span> inline-level ( 한 줄 내에 여러 영역이 들어감 )
• 웹이 단순 문서를 벗어나 형태를 갖기 때문에 자주 사용됨

 

div, span

리스트

• 일련된 항목들이 나열된 것
• <ul> unordered list (순서가 없는 리스트)
• <ol> ordered list (순서가 있는 리스트)
• <li> 리스트의 항목 (ul, ol 태그 내에 들어감)
• 중첩 시에는 <li>태그 내에  <ul>또는 <ol>로 가능

 

• <dl> description list (용어 설명 리스트)
• <dt> definition term (용어 구분)
• <dd> definition description (용어 정의)

ul

ol

dl, dt, dd

 

이미지 태그

• 문서에 이미지를 넣는다
• <img scr="경로" alt="대체 텍스트">
• 경로는 상대경로와 절대경로가 있다
• 상대경로 : ./ 는 현재 경로 ../는 상위폴더로 1번 ../../는 2번, 폴더명/ 은 하위폴더
• 절대경로 : C:/ 드라이브 내의 위치 지정
• 대체 텍스트는 이미지가 없을 시, 시각장애인의 접근성 보장
• width / height 이미지의 가로 세로 코드
• 닫힘 태그가 없음

출처:네이버 부스트코스

 

표 태그 (table)

• <td>, <th> 데이터 셀
• <tr> 행
• <table> 표
• <caption> 표의 제목 (table 내 최 상단 위치)
• <thead> 제목 행 그룹
• <tfoot> 바닥 행 그룹 ( 내용 합계 등을 주로 사용 , 코드는 중간이지만 화면엔 마지막에 나옴)
• <tbody> 본문 행 그룹
• 작은 표에도 많은 태그가 들어감
• 속성 colspan="2" 2개의 셀을 가로로 병합
• 속성 rowspan="2" 2개의 셀을 세로 병합
• 병합된 셀도 개수에 포함된다