Q&A | 1. HTML & CSS (그룹 면접 예상 질문)

Wook·2021년 11월 19일

TIL html

Q&A (HTML, CSS, JavaScript, React)

목록 보기

1/4

1) HTML

HTML이 무엇인가요?

HyperText Markup Language의 약자로, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 정보를 제공하는 마크업 언어이다.

페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고, 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다. 페이지의 뼈대, 의미에 중요성을 두며, 웹페이지의 구조를 잡을 수 있게 해준다.

2) HTML의 필수 구조는?

HTML 파일의 필수 구조는 어떻게 되나요?

HTML 파일의 필수 구조는 크게 <html>, <head>, <title>, <body> 태그로 나뉘어진다.

  <!DOCTYPE html>      
<html>
    <head>
	  <title></title>
    </head>
    <body>
		
    </body>
</html>

<!DOCTYPE html> : HTML 파일 가장 상단에 위치한 선언문으로 사용 중인 파일이 어떤 버전의 HTML을 사용하는지 브라우저에게 알려주는 역할
<html> : 선언문을 제외한 다른 모든 HTML 요소의 컨테이너로, 모든 태그들을 열고 닫는 <html> 태그로 감싸준다.
<head> : 항상 <html> 태그 다음에 위치해 HTML 문서의 head 부분을 나타내기 위해 사용되어 사이트의 제목, 설명, 부가 정보, 기술적 내용등을 담으며 <head> 태그 안에 포함된 태그들은 웹 페이지에는 표시되지 않는다.
<title> : <head> 태그 내부에 존재하며 브라우저 탭에 보이는 페이지 이름으로 태그의 콘텐츠 내용이 웹 브라우저 탭에 추가된다.
<body> : <body>태그는 항상 <head> 태그 다음에 위치하여 HTML 문서의 주요 내용을 보여주며 웹 페이지에 표시되며 실제 화면에 보여지기 위한 각종 태그들을 담는 역할을 한다. HTML 페이지의 모든 내용이 이 태그 안에 담아진다.

3) `<IMG>` 태그

<img alt="profile" src="이미지 주소"></img> 에서 alt, src를 가리키는 말은 무엇일까요?

alt : "Alternative"의 약자로 img 태그가 이미지를 로드하지 못하였을 시 보여지는 대체 텍스트를 의미하는 속성이다.
src : "Source"의 약자로 외부 자원의 특정 URL, 즉 위치를 명시하기 위해 사용되어 img 태그에는 주로 이미지를 가져올 주소 혹은 경로를 값으로 적습니다.

4) `<imgposition 속성에 대해 아는대로 설명해 주세요.>` 태그의 필수 속성

img 태그의 필수 속성을 설명해 주세요.

img 태그의 필수 속성으로는 3번에서 설명한 두가지 태그 src속성과 alt속성이 있다.
alt : "Alternative"의 약자로 img 태그가 이미지를 로드하지 못하였을 시 보여지는 대체 텍스트를 의미하는 속성이다.
src : "Source"의 약자로 외부 자원의 특정 URL, 즉 위치를 명시하기 위해 사용되어 img 태그에는 주로 이미지를 가져올 주소 혹은 경로를 값으로 적습니다.

5) What is CSS?

CSS는 무엇인가요?

Cascading Style Sheet의 약어로, HTML 문서 내의 정보 컨텐츠로부터 시각적인 스타일(디자인적 요소)을 분리해서 관리하기 위한 목적으로 고안된 별도의 언어이다.
Cascading은 계단식, 흘러내리는 뜻으로 CSS는 부모 요소로부터 자식요소로 단계별로 스타일이 적용되는 작동 방식을 지닙니다.

6) CSS 적용 방법

CSS를 적용하는 방법을 최소 2가지 이상 말씀해 주세요.

CSS를 적용하는 방법은 다음과 같은 3가지의 방법이 존재합니다.

1) 태그 내부에 style 속성 적용

<body>
  <p style: color="blue">안녕하세요</p> // font-color 가 blue로 적용.
</body>

2) <head> 태그 내부에 link 태그를 활용해 CSS파일을 로드하여 적용

<!-- link태그를 활용하여 HTML에 별도의 CSS 파일을 연결해줌 -->
<head>
    <link href="style.css" rel="stylesheet" type="text/css"/> 
</head>

3) HTML 파일 내에 <style> 태그 내부에 CSS 적용

<!-- 따로 CSS파일을 연결해주지 않고 HTML파일 내에서 자체적으로 style 태그 생성 -->
<style>  
    body {
    color : gray;
    font-weight : bold;
    }
  	span {
    background-color: yellow;
    }
</style>

7) Margin, Padding, Border

margin, padding, border의 영역을 설명해 주세요.

이 세가지 영역에 대해 설명하기 위해선 Box Model의 개념부터 알아야 한다.

- Box Model이란?

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.
박스 모델은 아래와 같이 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

1) margin : 테두리(border) 외부에 생기는 여백이다.
margin property 값은 마진 영역의 두께를 의미하며, 기본적으로 투명(trangsparent)하고 배경색을 지정할 수 없다.

2) padding : 테두리(border) 내부에 생기는 영역이다. (content와 border사이의 공간)
padding property 값은 패딩 영역의 두께를 의미하며 기본색은 투명(transparent)이지만, 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다.

3) border : 테두리를 의미하며 색과 굵기를 지정해줄 수 있다.

8) block, inline, inline-block

block, inline, inline-block의 차이점을 설명해 주세요.

inline : 자신의 width 크기 만큼만 가로 공간을 차지하는 요소로써,
inline 요소 옆에 또 다른 inline 요소가 오게되면 옆에 나란히 배치됨.
(내용물의 크기가 태그의 영역이 된다.)
ex) <span>, <img>, <a> 태그
block : 화면 내의 가로 공간을 전부 차지하는 요소로써,
block 요소를 사용하면 가로의 모든 공간을 모두 차지하여 그 옆에 다른 요소가 붙지 못함. (예시 :div 태그를 사용하고 다음 태그 사용시 line이 다음 위치로 넘어감)
ex) <div>,<p> 태그
inline-block : 줄 바꿈 없이 같은 라인에 있으며(inline 속성), 크기 조정이 가능하다.(block 속성)

9) block, inline

HTML 태그 중 block 요소 3개, inline 요소 3개를 각각 설명해 주세요.

block 요소 :
1) <h1>~<h6>까지의 태그들 : 제목 태그로써 사용되며 크기가 제각각
2) <div> : 콘텐츠 분할 요소 (divide 태그), 섹션을 분할해줌
3) <blockquote> : 블록 인용구로 사용됨
4) <p> : 문장을 구분할 때 사용됨.
inline 요소 :
1) <span> : 구문 콘텐츠를 위한 인라인 컨테이너로, 어떤 특성의 값을 서로 묶을 때 사용
2) <a> : 다른 URL로 연결할 수 있는 하이퍼링크를 삽입
3) <img> : 이미지 요소들을 웹페이지 내에 삽입 가능하게 해줌

10) 목록 태그

목록과 관련된 태그를 설명해 주세요

<ul> : unordered list의 약자로, 순서가 필요 없는 목록을 만드는데 사용
<ol> : ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는데 사용

(ul 태그, ol 태그 내부에 li 태그를 사용하여 콘텐츠로 list의 목록을 만들어줌.)

<dl> : definition list의 약자로, 용어를 설명하는 목록을 만드는데 사용

11) 테이블 태그

테이블과 관련된 태그를 설명해 주세요.

<table> : 테이블을 만드는 태그
<th> : 테이블의 헤더부분을 만드는 태그
<tr> : 테이블의 행을 만드는 태그
<td> : 테이블의 열을 만드는 태그
colspan 속성 : 가로로 이웃한 셀을 합칠 때 사용
rowspan 속성 : 세로로 이웃한 셀을 합칠 때 사용
align 속성 : 테이블을 정렬할 때 사용

12) 사용자 입력 태그

사용자의 입력과 관련된 태그를 설명해 주세요.

<input> : 사용자의 입력을 받을 수 있고, 속성으로 type을 설정할 수 있다. (input type : password, text, button 등)
<textarea> : <input> 보다 더 긴 문자열을 입력 받을 때 사용
<select>, <option> : 체크박스가 생성되고 사용자의 선택에 따라 값이 달라짐

13) Position

position 속성에 대해 아는대로 설명해 주세요.

static : 모든 요소들의 기본값으로 위치 속성에 영향 받지 않는다.
relative : 자신의 원래 위치를 기준으로 이동. 다른 요소의 위치는 유지한 채 자기의 위치만 바꿔준다.
위치를 이동시킬 때는 top, right, bottom, left 프로퍼티를 사용해야 이동이 가능며,
top, right, bottom, left는 position이라는 프로퍼티가 있을 때만 적용 가능
fixed : 브라우저 창의 전체 크기를 뜻하는 Viewport Size를 기준으로 고정. 즉 스크롤을 내려도 계속 고정된 자리에 있다. 조상 요소가 필요 없으며 relative와 마찬가지로 top, right, bottom, left 프로퍼티가 사용된다. 공백이 전혀 생기지 않는 Position이다.
absolute : 가장 가까운 position (relative, absolute, fixed) 값이 부여된 부모 태그를 기준으로 이동. 위의 속성이 부여된 부모 태그가 없다면(= position 속성 값이 static이라면), body를 기준으로 이동한다.

Wook

지속적으로 성장하고 발전하는 진취적인 태도를 가진 개발자의 삶을 추구합니다.

다음 포스트

Q&A | 1. HTML & CSS (그룹 면접 예상 질문)

Q&A (HTML, CSS, JavaScript, React)

1) HTML

HTML이 무엇인가요?

2) HTML의 필수 구조는?

HTML 파일의 필수 구조는 어떻게 되나요?

3) `<IMG>` 태그

`<img alt="profile" src="이미지 주소"></img>` 에서 `alt`, `src`를 가리키는 말은 무엇일까요?

4) `<imgposition 속성에 대해 아는대로 설명해 주세요.>` 태그의 필수 속성

`img` 태그의 필수 속성을 설명해 주세요.

`img` 태그의 필수 속성으로는 3번에서 설명한 두가지 태그 `src`속성과 `alt`속성이 있다.

5) What is CSS?

CSS는 무엇인가요?

6) CSS 적용 방법

CSS를 적용하는 방법을 최소 2가지 이상 말씀해 주세요.

CSS를 적용하는 방법은 다음과 같은 3가지의 방법이 존재합니다.

7) Margin, Padding, Border

margin, padding, border의 영역을 설명해 주세요.

- Box Model이란?

8) block, inline, inline-block

block, inline, inline-block의 차이점을 설명해 주세요.

9) block, inline

HTML 태그 중 block 요소 3개, inline 요소 3개를 각각 설명해 주세요.

10) 목록 태그

목록과 관련된 태그를 설명해 주세요

11) 테이블 태그

테이블과 관련된 태그를 설명해 주세요.

12) 사용자 입력 태그

사용자의 입력과 관련된 태그를 설명해 주세요.

13) Position

position 속성에 대해 아는대로 설명해 주세요.

Q&A | 2. JavaScript (그룹 면접 예상 질문)

0개의 댓글

Q&A | 1. HTML & CSS (그룹 면접 예상 질문)

Q&A (HTML, CSS, JavaScript, React)

1) HTML

HTML이 무엇인가요?

2) HTML의 필수 구조는?

HTML 파일의 필수 구조는 어떻게 되나요?

3) <IMG> 태그

<img alt="profile" src="이미지 주소"></img> 에서 alt, src를 가리키는 말은 무엇일까요?

4) <imgposition 속성에 대해 아는대로 설명해 주세요.> 태그의 필수 속성

img 태그의 필수 속성을 설명해 주세요.

img 태그의 필수 속성으로는 3번에서 설명한 두가지 태그 src속성과 alt속성이 있다.

5) What is CSS?

CSS는 무엇인가요?

6) CSS 적용 방법

CSS를 적용하는 방법을 최소 2가지 이상 말씀해 주세요.

CSS를 적용하는 방법은 다음과 같은 3가지의 방법이 존재합니다.

7) Margin, Padding, Border

margin, padding, border의 영역을 설명해 주세요.

- Box Model이란?

8) block, inline, inline-block

block, inline, inline-block의 차이점을 설명해 주세요.

9) block, inline

HTML 태그 중 block 요소 3개, inline 요소 3개를 각각 설명해 주세요.

10) 목록 태그

목록과 관련된 태그를 설명해 주세요

11) 테이블 태그

테이블과 관련된 태그를 설명해 주세요.

12) 사용자 입력 태그

사용자의 입력과 관련된 태그를 설명해 주세요.

13) Position

position 속성에 대해 아는대로 설명해 주세요.

Q&A | 2. JavaScript (그룹 면접 예상 질문)

0개의 댓글

3) `<IMG>` 태그

`<img alt="profile" src="이미지 주소"></img>` 에서 `alt`, `src`를 가리키는 말은 무엇일까요?

4) `<imgposition 속성에 대해 아는대로 설명해 주세요.>` 태그의 필수 속성

`img` 태그의 필수 속성을 설명해 주세요.

`img` 태그의 필수 속성으로는 3번에서 설명한 두가지 태그 `src`속성과 `alt`속성이 있다.