1. a tag (anchor tag)
- target 속성
+ _self (기본 값) : 현재 페이지에서 외부 페이지로 이동하여 줍니다.- _blank : 외부 페이지를 새로운 브라우저 창으로 뛰우는 방식으로 이동하여 줍니다.
- href 속성
+ 이동할 페이지의 주소가 올 수 있으며, 주소가 올 경우 해당 주소로 이동합니다.- 요소의 id도 올 수 있으며, id가 올 경우 해당 요소로 포커스가 이동합니다.
2. div tag (division tag)
- 의미가 없는 태그이며, 요소들을 묶어 그룹을 나타낼 때 주로 사용합니다.
- 레이아웃을 잡을 때 주로 쓰이는 태그이며, block level 태그입니다.
- 의미가 없는 태그이미로 브라우저에서 별도의 스타일을 가지지 않습니다.
<div>
<ul>
<li>span tag</li>
</ul>
</div>3. span tag
- div 태그와 마찬가지로 의미가 없는 태그이며, 요소들을 묶어 그룹을 나타날 때 주로 사용합니다.
- 레이아웃을 잡을 때 주로 쓰이는 태그이며, inline level 태그입니다.
- 의미가 없는 태그이미로 브라우저에서 별도의 스타일을 가지지 않습니다.
- HTML 코드
<span>
<a href="#">span tag</a>
</span>4. ul, ol tag (unordered list tag, ordered list tag)
- 자식 태그로는 리스트의 항목을 나타내는 li 태그가 있습니다.
- ul 태그는 unordered list, ol 태그는 ordered list 를 의미합니다
- HTML 코드
<ol>
<li>A</li>
<li>B</li>
</ol>
<ul>
<li>A</li>
<li>B</li>
</ul>5. img tag (image tag)
-
alt 속성
+ 이미지의 대체 텍스트를 나타내는 속성입니다.
+ 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다.- src 속성과 더불어 반드시 들어가야 하는 속성입니다.
-
src 속성
+ 이미지의 경로를 나타내는 속성입니다. -
width & height 속성
+ 이미지의 가로/세로 크기를 나타내는 속성입니다.- 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.
+ width/height 속성이 없으면 이미지는 원본 크기, 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경됩니다.
+ 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경됩니다.
- 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산됩니다.
-
HTML 코드
<img src="http://~~~/logo.png" width="200" height="200" alt="로고이미지">6-1. table tag
: 표를 나타내는 태그
- : 행을 나타내는 태그
- : 제목 셀을 나타내는 태그
- : 셀을 나타내는 태그
- table > tr > th, td 의 구조를 뜁니다.
6-2. table의 cell 병합
- rowspan 속성
+ 행 병합을 할 때 사용합니다. - colspan 속성
+ 열 병합을 할 때 사용합니다.
6-3. table의 구조와 관련된 태그
- 표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것입니다.
- 따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 합니다.
- : 표의 제목을 나타내는 태그
- : 제목 행을 그룹화하는 태그
- : 바닥 행을 그룹화하는 태그
- : 본문 행을 그룹화하는 태그
Java, Python, JavaScript Lover