웹 페이지의 내의 미디어를 통해 다른 연관 정보로 넘어갈 수 읶세하는 연결고리 즉, 링크이다.
특정 내용에 링크를 생성할 때 사용한다. herf(Hyper reference) 속성으로 이동할 리소스를 지정한다. 이동할 리소스는 URL과 같은 웹 페이지 주소나 미디어의 주소가 된다.
<a href="https://www.google.com">google</a>
결과
이미지를 삽입할 때 사용한다. .src 속성으로 이미지의 주소를 지정하면 해당 이미지가 표시된다. 홀태그 형식으로 사용된다.
<img src="https://jydev.netlify.app"/>
결과 :
외부 콘텐츠를 삽입할 때 사용된다. 보통 유튜브 플래시와 같은 외부 미디어 객체를 웹 사이트에 포합 시키고 싶을 때 사용한다.
<embed src="객체의 주소"/>
표를 그리기 위해서 여러 태그를 조합해서 코드를 작성해야 한다.
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
th는 볼드하게 나옴
rowspan : 합칠 행의 수
<table>
<tr>
<th rowspan="2"></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
th는 볼드하게 나옴
사용자에게 데이터를 입력 받기 위한 화면 궝ㅇ르 폼이라고 한다. 폼태그 사이에 폼 관련 태그들 (input, label, button, select등)을 넣어 하나의 폼을 구성하게 된다.
폼을 정의하는 태그, 이 태그 내에 input, select, button 등의 태그들을 넣어 사용자의 입력을 방아서 훤하는 서버의 주소로 데이터를 전송 할 수 있다.
속성
입력상자를 만드는 태그 type의 속성에 따라 입력칸, 선택박스 버튼을 표시할 수 있다. 홀태그 형식이다.
버튼을 만든다. submit으로 지정된 버튼을 클릭하면 해당 폼의 전체 내용이 form 태그의 action에 지정된 서버 주소로 전송된다. 여기서 value 속성은 버튼의 텍스트를 지정하는 역할을 한다.
input태그 대신에 button 태그를 사용해서 구현할 수 있다.
<input type= "button" value="click"/>
<button type="button">클릭</button>
클릭
라디오 버튼 또는 체크박스를 만든다. 선택지 하나당하나의 태그를 사용한다.
<input type="radio" name="n1"/>1 번
<input type="radio" name="n2"/>2 번
<input type="radio" name="n3"/>3 번
<input type="checkbox" name="n1"/>1 번
<input type="checkbox" name="n2"/>2 번
<input type="checkbox" name="n3"/>3 번
1 번
2 번
3 번
1 번
2 번
3 번
드롭다운 선택박스를 만든다. option 태그를 사용해서 선택지를 추가한다.
<select name="job" id="job">
<option value="op1">옵션1</option>
<option value="op2">옵션2</option>
<option value="op3">옵션3</option>
</select>
결과
옵션1 옵션2 옵션3두 줄 이상의 긴 글을 입력 받도록 해주는 입력 칸을 만든다. 쌍 태그로 만드러지고 태그 사이에 값을 미리 넣을 수 있다.
<textarea name="" id="" cols="30" rows="10">
임시 메세지
</textarea>
사용자에게 각 입력 칸을 설명해주는 레이블을 표시할 수 있다.
입력 태그에 id 속성으로 지정된 값을 for 속성으로 넣어주면 그 입력 태그를 수식해주게 된다.
<label for="username">이름</label><input type="text" id="username"/>
<input type="radio" name="options" id="option1">
<label for ="option1">1 번</label>
<input type="radio" name="options" id="option2">
<label for ="option2">2 번</label>
<input type="radio" name="options" id="option3">
<label for ="option3">3 번</label>
이름
1 번 2 번 3 번name 태그의 값은 서버로 전손된다. 즉 서버에서 볼 때
options 1 번
이러한 형식으로 나타난다.
여러 입력 태그를 하나의 그룹으로 묶고 원하는 제목을 달 수 있다.
<fieldset>
<legend>legend 태그</legend>
fieldset 태그 내부
</fieldset>
legend 태그
fieldset 태그 내부
메타태그는 웹문서의 정보를 알려주기 위해 작성하는 태그이다. 이렇게 작성된 메타 데이터는 사용자에겐 보이지 않지만 웹 브라우저, 검색엔진, 그리고 메타데이터를 활용하는 웹 서비스 들이 사용하게된다. head 태그내에 위치하고 홀 태그 형식으로 사용된다.
웹 문서의 문자 인코딩을 알려주는 역할이다. 문자 인코딩은 웹 문서에 표시되는 문자열이 어떤 문자코드 기반으로 해석되고 표현할지를 정한다. 현재의 웹에서는 유니코드 기반인 UTF-8 인코딩을 사용한다. 그렇기에 charset="UTF-8"으로 작성한다.
모바일을 위한 태그
웹 문서가 그려지는 영역(viewport)에 대해 크기나 확대 비율을 어떻게 조정할지를 정한다. content 속성에 viewport 설정 값을 넣을 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
검색 엔진이나 외부 웹 서비스에 알려질 정보를 표현한다.
<meta name="author" content="컨텐츠 이름">
<meta name="keywords" content="키워드">
<meta name="description" content="설명">
author, decription, keyword 메타 태그로도 정보를 나타낼 수 있지만 open graph 메타 태그를 사용하면 facebook같은 sns에 더 자세한 정보를 알려줄 수 있다.
<meta property="og:title" content= "web"/>
<meta property="og:type" content= "article"/>
<meta property="og:url" content= "https://www.google.com"/>
<meta property="og:image" content= "이미지 주소"/>
다른 웹 페이지를 표시할 수 있는 태그이다.
<iframe width="500" height="300" src=https://www.naver.com frameborder="0"></iframe>