1. HTML이 무엇인가요?
HTML(Hypertext Markup Language)은 일종의 마크업 언어로, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 정보를 제공한다.
페이지에 제목, 문단, 표, 이미지, 동영상 등 리소스들을 정의하고, 그 구조에 의미를 부여한다. 정적 언어라고도 불리며, 페이지의 뼈대와 의미에 중요성을 둔다.
2. HTML 파일의 필수 구조는 어떻게 되나요?
HTML파일은 필수적으로 <html>,<head>,<body> 그리고 <title>태그를 가지고 있어야한다.
먼저 HTML파일을 작성하기 전 문서를 선언해야하는데, HTML5 버전에서는 간단히 <!DOCTYPE html>의 형태로 선언 한다.
선언 된 문서는 html 태그로 시작하고, head와 body를 필수로 포함한다. 이 때, title 태그는 웹 페이지의 제목 역할을 하기때문에 head 태그 안에 꼭 작성해야한다.
<-- HTML기본 구조 표현 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>3. 목록과 관련된 태그를 설명해 주세요
> 순서 없는 목록
<--unordered list-->
<ul>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>- 목록1
- 목록2
- 목록3
> 순서 있는 목록
<--ordered list-->
<ol>
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ol>- 목록1
- 목록2
- 목록3
> 주요 제목과 그에 대한 설명을 나열하는 목록
<dl>
<dt>제목1</dt>
<dd>목록1-1</dd>
<dd>목록1-2</dd>
<dt>제목2</dt>
<dd>목록2-1</dd>
<dd>목록2-2</dd>
</dl>4. 테이블과 관련된 태그를 설명해 주세요
<table>
<caption>테이블의 제목</caption>
<thead>
<tr> <--table row-->
<th>제목1</th> <--table head-->
<th>제목1-2</th>
<th>제목1-3</th>
</tr>
</thead>
<tbody>
<tr>
<th>제목2</th>
<td>내용2-1</td> <--table data-->
<td>내용2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>제목3</th>
<td>내용3-1</td>
<td>내용3-2</td>
</tr>
</tfoot>
</table>결과>
5. 사용자의 입력과 관련된 태그를 설명해 주세요
<input> : form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다. 속성으로 type을 설정할 수 있으며, 여는 태그만으로 정보 제공이 가능하기 때문에 닫는 태그가 따로 필요없다.
-
type="text"
: 가장 많이 사용하는 기본적인 속성으로 ID, 주소, 닉네임 등을 받을 때 사용한다 -
type="password"
: 텍스트를 입력하면 입력한 문자가 "●" 으로 대체된다 -
type="number"
: 숫자만 입력 가능하고, "-"와 같은 문자는 입력 불가하다 -
type="textarea"
: 긴 텍스트를 입력받고 싶을 때 사용한다 -
type="submit"
: 다른 type 값을 통해 사용자로부터 입력받은 값을 서버로 전송하는 역할을 함. form 태그에 action 속성으로 경로 지정가능하다 -
type="button"
: 클릭 가능한 버튼이 생성되고, value값으로 버튼의 이름을 정할 수 있다
6. img태그의 필수 속성을 설명해 주세요
-
src속성
: Source의 약어로, 이미지의 URL을 지정한다 -
alt속성
: 이미지에 대한 대체 텍스트를 지정한다
alt 속성은 없어도 img 태그를 사용하는데 문제가 없지만 시각장애인들을 위한 screen reader의 사용이나 이미지 다운로드에 문제가 생겼을 때, 사용자에게 문서의 맥락을 알 수 있게 해주기 때문에 작성하는것이 좋다.
7. HTML 태그 중 block 요소 3개, inline 요소 3개를 각각 설명해 주세요
- 블록 요소 (block element)
<h1> ~ <h6>, <p>, <div>, <aside>, <form> ...
: 모든 인라인 요소를 포함할 수 있고, 다른 블록 요소들도 일부 포함 가능하다. 기본적으로 가로폭 전체 너비를 가지는 직사각형 형태가 되며, 블록 요소 다음에는 줄바꿈이 이루어진다.
- 인라인 요소 (inline element)
<a>, <em>, <b>,<span>, <img> ...
: 인라인 요소는 기본적으로 컨텐츠가 끝나는 지점까지를 너비로 갖는다. 임의로 크기 조절을 할 수 없으며, 인라인 요소 다음에는 줄바꿈이 이루어지지 않는다.
