Session 4. Group Interview

김민재·2021년 8월 22일

WeCode session 위코드

TIL, WeCode, Course

목록 보기

17/48

*🔐Study Keyword :

배운 내용을 복습한 이후 팀 별로 면접을 진행하기 위한 개념 정리

[HTML/CSS]

HTML이 무엇인가요?

hyper text markup language는 웹페이지를 만들기 위한 언어입니다. 따라서 HTML을 통해 페이지의 구조를 잡아줍니다.

hyper text는 '링크로 연결된 문서'이며 markup language는 “이렇게 보여줘”에 대한 지시를 의미합니다.

→ 따라서 HTML이란 웹페이지의 내용을 브라우저에게 렌더링을 해주라고 마크업하는 것 말합니다.

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

HTML 파일의 필수 구조는 크게 html, head, title, body 태그가 있습니다.

<!DOCTYPE html>는 태그는 아닌 HTML 파일 가장 상단에 위치한 선언문으로 사용 중인 파일이 무슨 버전의 HTML을 사용하는지 브라우저에게 알려주는데 역할을 합니다.

<html> 태그는 <!DOCTYPE html> 선언문을 제외한 다른 모든 HTML 요소의 컨테이너로, 모든 태그들을 열고 닫는<html> 태그로 감싸줍니다. 브라주어가 <html>를 만나는 순간 html이 시작됌을 인지해 요소를 그릴 준비를 합니다.

<head> 태그는 항상 <html> 태그 다음에 위치해 HTML 문서의 head 부분을 나타내기 위해 사용되어 사이트의 제목, 설명, 부가 정보, 기술적 내용등을 담으며 <head> 태그 안에 포함된 태그들은 웹 페이지에는 표시되지 않습니다.

<title> 태그는 <head> 태그 내부에 존재하며 브라우저 탭에 보이는 페이지 이름으로 태그의 콘텐츠 내용이 웹 브라우저 탭에 추가된다.

<body> 태그는 항상 <head> 태그 다음에 위치하여 HTML 문서의 주요 내용을 보여주며 웹 페이지에 표시되며 실제 화면에 보여지기 위한 각종 태그들을 담는 역할을 합니다.

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

img 태그가 가지고 있는 속성(attribute)으로 태그의 종류마다 속성이 달라집니다.

alt는, alternative로 img 태그가 이미지를 로드하지 못하였을 시 보여지게되어 이미지를 대체하는 이름을 의미하는 속성이고,

src, source로 외부 자원의 특정 URL, 즉 위치를 명시하기 위해 사용되어 img 태그에는 주로 이미지를 가져올 주소 혹은 경로를 값으로 적습니다.

CSS는 무엇인가요?

HTML로 구조를 잡은 웹페이지를 (cascading style sheet) CSS로 스타일을 꾸며줍니다.`

cascading은 계단식, 흘러내리는 뜻으로 CSS는 부모 요소로부터 자식요소로 단계별로 스타일이 적용되는 작동 방식을 지닙니다.

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

CSS를 적용하는 방법은 크게 3가지로
첫째, 태그 내부에 style 속성 적용,
둘 째, head 태그 내부에 link 태그를 활용해 CSS파일 로드하여 적용
셋 째, HTML 파일 내에 style 태그 내부에 CSS 적용이 존재합니다.

첫 번째는 태그 내에 style 속성을 사용해 원하는 스타일의 프로퍼티와 값을 지정해 태그에 바로 적용하는 것이며

두번째는 헤드 태그 내부에 link 태그를 만들어 href 속성의 값으로 해당 css 파일명을 넣어주어 파일을 로드하는 방법이며

HTML의 head 태그 내부에 style 태그를 만들어 내부 작성하여 적용하는 방법이 있습니다.
→ 가장 권고하는 방식은 두 번째 방식으로 CSS를 HTML로부터 로드하여 HTML과 CSS를 분리시킬 수 있습니다. 이로서 HTML엔 문서의 구조를 위한 내용들만 작성하고 CSS에는 그 구조를 꾸며주기 위한 내용을 작성함으로서 HTML과 CSS의 역할을 완전히 분할하여 보다 명확하게 각각의 작업을 진행할 수 있습니다.

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

HTML의 요소는 CSS의 속성을 몇 가지 들고 있는데 요소에 무조건 들어가는 속성들이 바로 CSS BOX MODEL입니다.

CSS BOX MODEL을 기준으로 한 개의 요소에는 바깥쪽부터 안쪽까지 margin-border-padding-contents 총 네 부분으로 구성됩니다.

만약 요소의 contents 영역에 '안녕'이라는 contents를 넣고 border를 주면 contents에 외부에 테두리가 생깁니다.

padding은 border 내에 생기는 공간을 의미하하고

margin은 border 외부에 생기는 공간으로 margin으로 요소와 요소간의 간격을 구분할 수 있습니다.

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

block 요소는 p 태그처럼 화면의 가로 공간을 전부 차지하는 요소를 의미합니다.

block 요소를 사용하면 가로의 모든 공간을 모두차지하여 그 옆에 다른 요소가 붙지 못합니다.

inline 요소는 자신의 콘텐츠 가로 크기 만큼만 가로 공간을 차지하는 요소를 의미합니다.

inline 요소 옆에 또 다른 inline 요소가 오게되면 옆에 나란히 배치됩니다.

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

block 요소에는 대표적으로 div태그, p태그, 각종 Semantic tag들이 존재하며

inline 요소에는 span 태그, a 태그, img 태그들이 있습니다.

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

목록과 관련된 태그에는 목록의 생성을 위해 가장 외부에서 감싸주는 ul 태그와 ol 태그가 존재합니다.

ul 태그는 unorder로 순서가 표시되지 않고 닷으로 나타내는 목록을 생성하며

ol 태그는 order로 순서가 표시되어 나타나는 목록을 생성합니다

ul 태그,ol 태그와 내부엔 li 태그를 사용하여 태그 내부의 콘텐츠로 list의 목록을 적어줄 수 있습니다.

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

테이블 테그는 가장 외부에서 감싸주는 table 태그와 행을 표현하는, table row tr 태그, 행에 존재하는 각각의 데이터를 나타내는 table data td 태그가 존재합니다.

td 태그 대신 table 태그 가장 상단에 <th> 태그, head를 사용하면 표의 가장 상단에 있는 제목 영역처럼 가운데 정렬과 bold 처리된 요소를 넣을 수 있습니다.

테이블의 각 영역 header, body, footer을 명시하기 위해 <tbody> 태그, <thead> 태그, <tfoot> 태그가 사용됩니다.

<tbody> 태그는 HTML 테이블에 내용 콘텐츠들을, <tfoot> 태그 푸터 콘텐츠들을, <thead> 태그는 헤더 콘텐츠들을 하나의 그룹으로 묶을 때 사용합니다.

rowspan 속성은 행 방향으로 테이블을 병합하기 위해 colspan 속성은 열 방향으로 테이블을 병합하기 위해 사용됩니다. 값으로 합치고자하는 갯수를 숫자로 넣어줍니다.

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

input 태그와 textarea 태그가 존재하합니다.

input 태그를 사용하면 검색창과 같이 사용자로부터 입력받을 수 있는 요소가 만들어집니다.

type 속성을 통해 입력 받을 속성을 정해줍니다.

placeholder 속성을 통해 입력창에 예시와 같은 텍스트를 도움말 형태로 보여줍니다.

select 태그와 button 태그도 있습니다.

select 태그는option 태그와 함께 쓰여 옵션 메뉴를 제공하는 컨트롤을 제공합니다.

<button> 태그는 클릭 가능한 버튼을 제공합니다.

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

요소의 위치를 정해줄 수 있는 속성으로 position에는 relative, absolute, fixed그리고 static이 존재합니다.

static은 기본값이며

relative를 사용하면 요소 자체의 위치를 기반으로 움직일 수 있는데 top, bottom,left ,right의 속성에 값을 통해 각각의 위치에서 얼마큼 떨어지는지를 지정할 수 있다.

absolute는 요소의 부모 요소의 position의 값이 relative, absolute, fixed 중 하나인 경우에 자신의 부모 요소를 기준으로 이동합니다,

fixed는 부모 요소와 무관하게 브라우저의 뷰포트를 기준으로 요소를 이동시켜 요소를 고정시킵니다.

JavaScript

JavaScript가 무엇인지 설명해 주세요.

자바스크립트는 웹 페이지 내에서 사용자와 소통하기 위해서 웹페이지와 상호작용을 하기 위해 만들어진 언어로 페이지를 HTML으로 구성된 정적인 웹페이즈를 동적인 웹페이지로 만들어 줍니다.

let, var, const를 사용하여 생성된 변수들의 차이점은 무엇인가요?

모두 변수를 선언, 생성하기 위한 키워드들로 var es5이전에 나왔으며 이 키워드를 개선하고자 나온 키워드가 let과 const 입니다.var 키워드는 변수의 참조 유효범위 스코프를 함수 블록을 가지며 var const는 함수 블록을 가지고 있습니다. 또한 var, let 변수로 선언 하면 값의 재할당이 가능하만 const는 상수이므로 재할당이 불가능합니다. 마지막으로 var의 경우 hoisting 변수를 어디서 선언했는지 위치와 상관없이 상단부로 변수 선언을 끌어올려지는 것처럼 동작하여 선언하기전에 참조하게 되면 undefined가 나오고 const let은 참조오류가 발생합니다.

JavaScript의 데이터 타입의 종류를 나열해 주세요.

자바스크립트의 데이터 타입 종류는 크게 기본형 참조형으로 나눠지며 기본형에는 숫자와 관련된 데이터인 number, 문자를 담을 수 있는 string, 참과 거짓을 나타내는 boolean과 선언하지 않음을 의미하는 undefined , 값이 비어잇음을 의미하는 null 등잇있으며 참조형 데이터엔 객체가 포함되고 객체의 하위 분류로 배열, 함수, map, set 등이 존재합니다.

함수의 정의와 호출을 구분해서 설명해 주세요.

함수의 정의란 변수로 따지면 선언에 해당하고 호출은 정의내린 함수를 실행하는 것을 의미합니다

따라서 정의란 함수를 생성하는 과정에 일련의 과정을 문으로 구현하여 코드 블록 내부에 감싸는 것이고 실행이란 이렇게 정의내린 일련의 문들의 과정, 함수를 불러 실행하는 것을 의미합니다.

Math와 관련된 함수(메서드)를 아는 대로 설명해 주세요.

Math.random 함수는0-1까지 실수 중 무작위로 만들어주는 함수로 *로 정수를 전달하면 해당 0부터 해당 정수까지 범위가 생겨 그 범위 안에 해당되는 실수를 리턴한다.

Math.max 배열로 전달하면 최대값을 Math.min은 최소값을 리턴한다

Math.floor 소수점 무저건 내린 값을 Math.ceil, 모조건 올림 Math.round 소수점 반올림, Math.squr 제곱의 값을 리턴한다.

== 와 === 의 차이점을 설명해 주세요.

일치연산자 ===는 타입까지 일치해야 true를 반환하고 == 동등연사자는 값만 같아도 true를 반환해 타입까지 비교하진 못한다.

조건문이 필요한 이유는 무엇인가요?

조건문은 현실세계에 존재하는 많은 상황들에 따라 발생하는 다양 일들 프로그램으로 구현 하기위해 만들어진 문법으로 , if문을 통해 정해진 조건에 따라 다양한 결정을 만들어 냄으로서 보다 현실세계를 모델링 할 수 있습니다.

함수의 인자가 필요한 이유는 무엇인가요?

함수의 인자는 함수 외부에 선언된 값들을 함수 내부에서 사용하기 위함입니다. 따라서 함수의 인자로 받아온 값들은 함수 내부에서 지역 변수처럼 사용하여 보다 함수 내부에 보다 다양한 문들을 구성하여 함수를 정의 내리고 호출 할 수 있게됩니다.

지역스코프를 갖는 지역변수를 생성하는데 있어 매우 유용해 함수형 프로그래밍을 만드는데 있어 중요하다.

배열이 필요한 이유는 무엇인가요?

배열은 사실 객체의 한 종류로 배열은 일련의 순서를 가진 데이터들을 나열하기 위해 만들어진 자료구조로서 배열을 사용하면 순서 배열에 존재하는 요소들은 모두 index 값 즉 순서를 가지기 때문에 순서와 관련된 메서드들을 사용할 수도 있으며 length 프로퍼티 즉 배열의 길이를 활용한 작업을 처리할 수 도 있습니다.

배열의 요소에 접근하는 방법을 설명해 주세요.

브라켓 노테이션을 사용해 브라켓 내부에 접근하고자 하는 배열의 인덱스 번호를 넣어주면되고 마지막 배열의 요소에는 length -1을 하게디면 전체 배열의 갯수 - 1은 즉 배열의 마지막요소와 일치하여 접근할 수 있습니다

배열의 메서드를 아는대로 설명해 주세요.

배열 객체는 다양한 메서드들을 지원하여 이를 사용할 수 있는데 대표적으로 sort, forEach, filter, map, reduce 등이 있는데,

sort는 배열을 적절하게 정렬해 정렬된 배열을 반환하는데 문자열은 알파벳순으로 되지만 숫자를 정렬하기 위해선 sort메서드의 인자로 정렬 순서를 비교하는 비교함수를 콜백함수로서 전달하여야합니다

forEach는 배열의 각 요소를 순회하면서 수행해야할 처리를 인자의 콜백함수로 전달받아 반복 호출합니다. 이때 콜백함수의 전달될 인자는 현재값 , 인덱스 , 함수를 호출한 배열 자체인 this를 전달받을 수 있다. 이때 원본 배열을 변경하진 않는다.

filter 메소드는 배열의 각 요소를 순회하면서 각 요소에 대해서 전달한 콜백함수에 반환값 true인 요소들만만 구성된 새로운 배열을 반환합니다.

map 메소드는 배열의 각요소를 순회하면서 각 요소에 대해서 전달한 콜백함수의 반환값들로 구성된 새로운 배열으 반환하여

map 과 forEach의 차이점을 설명해 주세
요.
- 둘다 배열의 요소를 순회하지만 메서드의 인자로 전달하 콜백함수의 ㄱ리턴값으로 이루어진 배열을 반환하고 forEach는 요소를 순회하며 반복해서 호출하는데 그친다. 반복문을 대체할 수 있는 메소드고 map은 새롭게 매핑된 배열을 반환해주는 메소드이다.