오늘은 HTML의 실무에서 사용하는 필수 태그를 정리해보도록 하겠습니다.
차근차근 html의 기본 구성 요소부터 살펴보도록 해요 !
1).태그
태그란 html 문법을 이루는 가장 작은 단위로 <태그명>이 가장 기본 형태 입니다.
2).주석
주석은 웹 브라우저에 표시되지 않도록 작성할 수 있게 해줍니다. 코드에 관한 부연 설명을 할때 사용하기 좋습니다.
3).head 태그
웹 브라우저에는 직접 노출되지 않지만 html 문서의 여러 정보를 제공해 줍니다.
4).title 태그
title 태그는 html 문서의 제목을 지정하는 데 사용합니다
<title> title 태그 문서의 제목 예시</title>
5).body 태그
body태그는 웹 브라우저에 직접 노출되는 내용으로 웹 브라우저에 표시되는 모든 내용은 body 태그 영역에 작성됩니다
6).hn 태그
hn태그는 제목이나 주제를 나타내는 텍스트를 표현할때 사용합니다. 이때 h1에서 h6으로 갈수록 크기가 작아지고 가늘어 집니다
<h1>나는 제일 큰 글씨에요</h1> <h2>나는 두번째로 큰 글씨에요</h2> <h3>나는 세번째로 큰 글씨에요</h3>
7).p 태그
p 태그는 본문의 문단을 작성할때 사용한다
8).br 태그
br 태그는 문단에서 줄 바꿈을 할때 사용한다
9).ins와 del 태그
ins 태그는 밑줄이, del 태그는 취소선이 생긴다
#### html을 사용해서 그룹 짓기로 영역을 나눠보겠습니다
html의 그룹을 나누는 이유는 무엇일까요?
**=>html의 페이지 구조를 더 깔끔하게 작성하기 위해서 기본적인 형식으로 div태그와 span태그를 사용합니다!👍👍**
1).div 태그
div 태그는 블록 요소와 인라인 요소를 그룹으로 묶을 때 사용합니다
2).span 태그
span 태그는 인라인 요소를 그룹으로 묶을 때 사용합니다
> ```
<div class="movie">
<p> 영화<span>소개</span></p>
<p> 영화를 소개하는 페이지 입니다</p>
</div>다음으로는 사용자들이 웹 페이지의 접근성을 높이기 위해 사용하는 여러 ui 기능을 살펴보겠습니다.
1).목록 태그
ui 태그: 순서가 없는 비순서형 목록을 생성할 때 사용합니다
oi 태그: 순서형 목록을 생성할 때 사용합니다 단, UI 태그와는 달리 목록 내용에 번호가 붙습니다.
di와 dd태그: 정의형 목록을 만들 때 사용한다. dt는 태그로 용어를 dd는 태그로 용어 설명을 작성합니다
2).a 태그
내부와 외부의 링크를 생성합니다.
이때 기본 형식은 < a href="대상 경로" target="링크 연결 방식" title="링크 설명">
href 속성으로 링크의 대상 경로를 입력할 수 있습니다.
3).img 태그
html에서 이미지 객체를 삽입하고 싶을 때 img 태그를 사용합니다
img 태그는 src 속성과 alt속성으로 구성됩니다
이때 기본 형식은
<img src="이미지 경로" alt="이미지 설명">
으로 작성된다.
이때 alt 뒤에는 삽입한 이미지 객체를 설명할 수 있는 텍스트를 넣습니다.
4). strong 태그
텍스트의 의미를 강조하고 싶을 때 사용합니다.
웹 브라우저에 중요한 부분임을 알려주기 위해 사용하는 테그입니다
<strong>중요한 부분은 strong 태그를 사용합니다</strong>
5). em 태그
em 태그 또한 중요한 텍스트를 강조하기 위해 사용된다.
하지만 em 태그는 텍스트가 기울어지게 함으로써 강조시켜준다
6).input태그
로그인 페이지의 아이디와 비밀번호처럼 입력받는 요소를 생성할 때는 input태그를 사용합니다. input 태그에는 type,name,value속성이 있는데, type은 필수로 사용해야 하고 name과 value는 선택해서 사용할 수 있다.
<input type="종류" name="이름" value="초기값">
7).label 태그
label 태그는 form 태그 안에서 사용하는 상호작용 요소에 이름을 붙일 때 사용합니다.
label 태그를 잘 사용하면 label 태그만 클릭해도 상호작용 요소를 선택할 수 있습니다.
또한 웹 접근성 향상을 위해서도 도움이 됩니다.
<암묵적 방법>
<label> 아이디 <input type="type"> <\label>
<명시적 방법>
<label for="userpw">비밀번호<\label> <input type="password" id="userpw">
8)fieldset와 legend태그
form 태그 안에 사용된 다양한 상호작용 요소도 fieldset태그를 사용해 그룹 지을 수 있습니다. fieldset태그로 그룹을 지으면 그룹별로 박스 모양의 테두리가 생깁니다. 이렇게 그룹 지은 요소들은 legend 태그로 이름을 붙일 수 있습니다.
<form> <fieldset> <legend> 개인 정보<\legend> <p> <label for="userid">아이디<\label> <input type="text" id="userid"> <\p> <p> <label for="passwd">비밀번호<\label> <input type="password" id="passwd"> <\p> <\fieldset> <\form>
9)textarea 태그
여러 줄의 입력 요소를 생성할 때는 input 태그가 아닌 textarea 태그를 사용합니다. 웹 사이트에서 글을 작성할 때 사용하는 입력 요소는 대부분 textarea 태그로 생성합니다
10).select,option,optgroup 태그
select 태그를 사용하면 콤보박스를 생성할 수 있습니다. 콤보박스에 항목 하나를 추가할 때는 option 태그를 사용하고, 항목들을 그룹으로 묶고 싶다면 optgroup 태그를 사용합니다.
<select> <optgroup label="그룹 이름"> <option value="서버에 전송할 값">웹 브라우저에 표시할 값<\option> <\optgroup> <\select>
11).size 속성
size 속성은 콤보박스에서 화면에 노출되는 항목 개수를 지정하는 속성이다. 속성값으로 숫자를 적으면 되고, 생략할 경우 기본으로 1개의 항목이 표시됩니다.
12).multiple 속성
select 태그로 생성하는 콤보박스는 기본적으로 1개 항목만 선택할 수 있습니다. 그러나 multiple 속성을 사용하면 여러 항목을 동시에 선택할 수 있다.
13).selected 속성
콤보박스는 첫 번째 option 태그의 값이 기본 선택된 상태로 표시되는데, selected 속성을 사용하면 기본 선택 항목을 변경할 수 있습니다.
14).button 태그
button태그는 type 속성값을 submit, reset, button으로 지정해 생성할 수 있습니다.
type 속성값은 폼을 서버에 전송할 목적이면 submit, 상호작용 요소에 입력된 내용을 초기화하는 버튼이면 reset, 단순한 버튼이면 button으로 지정합니다.
15).checked 속성
checked 속성은 요소를 선택된 상태로 표시합니다. 선택 요소가 있어야 하므로 input 태그의 type 속성값이 checkbox나 radio인 요소에만 사용할 수 있습니다.
<fieldset> <legend>가장 좋아하는 강아지는?<\legend> <input type="checkbox" id="말티즈" name="말티즈" value="말티즈"> <label for="말티즈">말티즈<\label><br> <input type="checkbox" id="시베리안" name="시베리안" value="시베리안"> <label for="시베리안">시베리안<\label><br> <\fieldset>
