.jpg)
Q1. HTML
HTML이 무엇인가요?
HyperText Markup Language의 약자로, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 정보를 제공하는 마크업 언어이다.
페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고, 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다. 페이지의 뼈대, 의미에 중요성을 둔다.
Q2. HTML 필수 구조
HTML 파일의 필수 구조는 어떻게 되나요?
HTML 파일의 필수 구조는 크게 <html>, <head>, <title>, <body> 태그가 있다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html>: HTML 파일 가장 상단에 위치한 선언문으로 사용 중인 파일이 무슨 버전의 HTML을 사용하는지 브라우저에게 알려주는 역할<html>:<!DOCTYPE html>선언문을 제외한 다른 모든 HTML 요소의 컨테이너로, 모든 태그들을 열고 닫는<html>태그로 감싸준다.<head>: 항상<html>태그 다음에 위치해 HTML 문서의 head 부분을 나타내기 위해 사용되어 사이트의 제목, 설명, 부가 정보, 기술적 내용등을 담으며<head>태그 안에 포함된 태그들은 웹 페이지에는 표시되지 않는다.<title>:<head>태그 내부에 존재하며 브라우저 탭에 보이는 페이지 이름으로 태그의 콘텐츠 내용이 웹 브라우저 탭에 추가된다.<body>태그는 항상<head>태그 다음에 위치하여 HTML 문서의 주요 내용을 보여주며 웹 페이지에 표시되며 실제 화면에 보여지기 위한 각종 태그들을 담는 역할
Q3. <img> 태그
<img alt="profile" src="이미지 주소"></img>에서alt,src를 가리키는 말은 무엇일까요?
alt: Alterate(대체하다)의 약어src: Source의 약어
Q4. <img> 필수 속성
img 태그의 필수 속성을 설명해 주세요.
src 속성과 alt의 속성은 필수 속성이다.
src속성 : 이미지를 불러올 주소alt속성 : 이미지의 로드가 실패할 때, 이미지를 대체할 텍스트
Q5. CSS
CSS는 무엇인가요?
Cascading Style Sheet의 약자로, HTML 문서 내의 정보 컨텐츠로부터 시각적인 스타일(=디자인)을 분리해서 관리하기 위한 목적으로 고안된 별도의 언어이다.
Q6. CSS 적용 방법
CSS를 적용하는 방법을 최소 2가지 이상 말씀해 주세요.
- head 태그 내부에
link태그를 활용해 CSS파일 로드하여 적용 [가장 일반적]
<!-- case1 : link태그로 HTML에서 CSS 파일 연결-->
<head>
<link href="ex01.css" rel="stylesheet" type="text/css"/>
</head>- HTML 파일 내에
style태그 내부에 CSS 적용
<!-- case2 : style 태그로 HTML에서 CSS 코드 쓰기-->
<style>
p {
color: #000;
}
</style> - style이라는 속성을 활용해서 HTML 태그 내에 직접 CSS를 작성 [비추천]
Q7. margin, padding, border
margin, padding, border의 영역을 설명해 주세요.
border를 기준으로 안쪽이 padding, 바깥쪽이 margin.
box-sizing을 border-box로 설정하지 않을 경우 패딩이 커져 크기가 변경될 수 있다.
padding: 안쪽 여백,content와border사이의 공간border: 테두리margin: 바깥 여백, 요소와 다른 요소 사이의 간격
Q8. block, inline, inline-block
block, inline, inline-block의 차이점을 설명해 주세요.
-
inline: 자신의 콘텐츠 가로 크기 만큼만 가로 공간을 차지하는 요소를 의미
inline 요소 옆에 또 다른 inline 요소가 오게되면 옆에 나란히 배치됨. -
block: 화면의 가로 공간을 전부 차지하는 요소를 의미
block 요소를 사용하면 가로의 모든 공간을 모두 차지하여 그 옆에 다른 요소가 붙지 못함. -
inline-block: 줄 바꿈 없이 같은 라인에 있음(inline 속성), 크기 조정 가능(block 속성)
Q9. block, inline 요소
HTML 태그 중 block 요소 3개, inline 요소 3개를 각각 설명해 주세요.
block 요소
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: 1~6단계 제목<div>: 콘텐츠 분할 요소<blockquote>: 인용 블록 요소
inline 요소
<span>: 구문 콘텐츠를 위한 인라인 컨테이너로, 어떤 특성의 값을 서로 묶을 때 사용<a>: 다른 URL로 연결할 수 있는 하이퍼링크를 만듦.<img>: 이미지 요소
Q10. 목록 태그
목록과 관련된 태그를 설명해 주세요.
<ul>: unordered list의 약자로, 순서가 필요 없는 목록을 만드는데 사용<ol>: ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는데 사용<dl>: definition list의 약자로, 용어를 설명하는 목록을 만드는데 사용
Q11. 테이블 태그
테이블과 관련된 태그를 설명해 주세요.
<table>: 테이블을 만드는 태그<th>: 테이블의 헤더부분을 만드는 태그<tr>: 테이블의 행을 만드는 태그<td>: 테이블의 열을 만드는 태그
colspan 속성 : 가로로 이웃한 셀을 합칠 때 사용
rowspan 속성 : 세로로 이웃한 셀을 합칠 때 사용
Q12. 사용자 입력 태그
사용자의 입력과 관련된 태그를 설명해 주세요.
<input>: 사용자의 입력을 받을 수 있고, 속성으로 type을 설정할 수 있다. (password, text, button 등)<textarea>:<input>보다 더 긴 문자열을 입력 받을 때 사용<select>,<option>: 체크박스가 생성되고 사용자의 선택에 따라 값이 달라짐
Q13. position 속성
position 속성에 대해 아는대로 설명해 주세요.
static: 모든 요소들의 기본값으로 위치 속성에 영향 받지 않는다.relative: 자신의 원래 위치를 기준으로 이동. 다른 요소의 위치는 유지한 채 자기의 위치만 바꿔준다.fixed: 브라우저 창의 전체 크기를 뜻하는 Viewport Size를 기준으로 고정. 즉 스크롤을 내려도 계속 고정된 자리에 있다.absolute: 가장 가까운 position (relative, absolute, fixed) 값이 부여된 부모 태그를 기준으로 이동. 위의 속성이 부여된 부모 태그가 없다면(= position 속성 값이 static이라면), body를 기준으로 이동
