핵심 요소 정리
1. div 태그
Division의 약어로 블록요소에 해당.
특별한 의미가 없는 구분을 위한 요소이다.
굉장히 많이 사용되고 있음.
2. h1 태그
Heading의 약어. 블록요소에 해당
제목을 의미하는 요소이다.
h1~h6까지 있으며 숫자가 작을수록 더 중요한 제목을 정의함.
3. p 태그
Paragraph의 약어. 블록요소에 해당
문장을 의미하는 요소이다.
4. img 태그
Image의 약어. 인라인요소에 해당
이미지를 삽입하는 요소이다.
img src(source.필수속성)="삽입할 이미지의 경로" alt(alternate.필수속성)="삽입할 이미지의 이름"5. ul 태그, li 태그
Unordered List 와 List Item 의 약어. 둘 다 블록요소에 해당
ul태그는 순서가 필요하지 않은 목록의 집합을 의미하며
li태그는 목록 내 각 항목을 의미한다.
<ul>
<li>사과</li>
<li>딸기</li>
<li>수박</li>
<li>감</li>
</ul>목록 안 각 항목 내용이 객관적인 순서가 필요가 없음.
ul 의 자식으로는 li가 한개 이상 있어야 함
한 세트~
6. a 태그
Anchor의 약어. 인라인요소에 해당
다른, 같은 페이지로 이동하는 하이퍼링크를 지정하는 요소.
<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">Google</a>속성을 통해 경로를 명확하게 명시해주기.
target="_blank" 를 명시해주면 이동할 때 새 탭에 이동하게 됨.
target은 링크 url의 표시 위치를 나타내는 것임. (새탭이냐, 현재 탭이냐)
첫번째 a 태그의 경우 현재 페이지에서 네이버가 열리고
두번째 a 태그의 경우 새 페이지에서 구글이 열림
7. span 태그
인라인 요소로 특별한 의미가 없는 구분을 위한 요소
만약
<style>
span {color: red;}
</style>
<span>동해물</span>과 백두산이 마르고 닳도록
라고 입력을 한다면, span으로 묶인 동해물의 글자색이 빨간색으로 변함.
8. br 태그
Break의 약어. 인라인요소에 해당
줄을 바꿔주는 역할을 한다.
동해물과 백두산이 <br/> 마르고 닳도록
동해물과 백두산이
마르고 닳도록
9. input 태그
인라인요소이면서 블록요소에 해당한다.
인라인블록이라고 하는데 글자 요소이지만 상자요소가 가지고 있는 몇가지 특성을 사용할 수 있음
가로세로+위아래여백 온전히 사용 가능.
수평으로 쌓임.
사용자에게 어떤 데이터를 입력받는 요소.
<input type="text"/>
type이라는 속성에 입력받을 데이터에 대해 명시를 해줘야됨.
-
input 안에는 미리 입력된 값을 넣을 수 있는 value라는 속성도 가지고 있음
<input type="text" value="riri"/>
-
placeholder 라는 속성은 사용자가 입력할 값에 대한 힌트를 줄 수 있음.
<input type="text" placeholder="이름을 입력하세요"/>
- disabled 는 입력 요소를 비활성화 시킬 수 있음.
<input type="text" disabled/>
- checkbox 는 사용자에게 체크 여부를 입력 받는 속성.
어떤 것에 대한 체크를 받을 건지는 label을 사용해야됨
<label>
<input type="checkbox"/> Apple
<input type="checkbox"/> Banana
</label>- 미리 체크된 체크박스를 만들고 싶으면 뒤에 checked라는 속성을 입력해주면 됨.
<label>
<input type="checkbox"/> Apple
<input type="checkbox" checked> Banana
</label>- input type 중 radio라는 값을 입력하면 사용자에게 체크 여부를 그룹 내에서 하나만 입력 받는다.
<label>
<input type="radio" name="fruits"/> Apple
<input type="radio" name="fruits"/> Banana
</label>fruits라는 이름의 그룹 내에서 apple 과 banana 중 하나만 선택 가능.
Apple Bananaradio 걑은 경우 그룹을 지을 수 있는 name이라는 속성 꼭 필요하고 같은 이름을 적어줘야한다.
10. table 태그
표 요소로 행(Row) 과 열(Column)의 집합을 말한다. 테이블요소!!!! 엄밀히 따지면 블록 안 테이블요소?
테이블요소는 행과 열로 나뉘어져 있음
표를 만들 때는 행 tr(table-row)이 먼저!
행 안에 열 td(table data)가 있음.
<table>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
</table>| 1 | 2 |
| 3 | 4 |
많이 사용되진 않지만 나중에 어떤 구조로 되어 있는지 알아볼 수 있다.
html은 구조를 만드는 역할을 하므로
각 태그가 어떤 역할을 하는지, 어떤 속성을 사용하는지 정도만 알면 충분하다.
눈에 보이는, 예쁘게 만드는 작업은 css가 담당.
