HTML, CSS , JS 기초 면접

면접준비 💯

🏳️ HTML, CSS, JS 면접기초를 준비해보자. 나의 말투로 정리를 해봐야겠다.

HTML, CSS관련

• HTML이 무엇인가요?

  웹페이지를 만들기 위한것이며 웹브라우저에서 동작하는 언어입니다. 주로 웹페이지의 구조를 잡습니다.

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

  맨처음 어느종류의 문서인지 알려주는 DOCTYPE과 HTML의 범위를 알려주는 HTML태그, 그밑에 주로 보이지않는 정보를 저장하는 head태그, 마지막으로 사용자에게 보여지기위한 정보를 담은 body태그가 파일의 필수 구조입니다.

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

  img태그의 attribute, 속성이라고 불립니다.

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

  img태그의 필수 속성은 alt, src가 있습니다. alt는 이미지가 렌더링되지 않았을때 보여지는 속성이고 src는 이미지의 주소값을 넣어주는 속성입니다.

• CSS는 무엇인가요?

  HTML 태그들에 디자인을 입혀주는 것입니다.

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

  html태그에 직접 적는 방법, html코드의 style태그안에 작성하는방법, 따로 css파일을 만들어서 적용하는 방법이있습니다.

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

  content를 감싸는 사각형이 padding의 영역이고, 그것을 감싸는 border, 또 그것을 감싸는것을 margin이라고하며 각각의 사각형 영역을 가집니다.

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

  block은 box의 너비가 전체를 차지하고, inline은 content의 크기만큼을 가집니다. 그리고 inline-block은 inline과 비슷하지만 너비와 높이값을 변경할수 있는 특징이 있습니다.

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

  block 요소로는 div태그, p태그, h태그가 있고 lnline 요소로는 a태그, img태그, span태그가 있습니다.

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

  대표적으로 ul태그와, ol태그가 있는데, 둘다 공통적으로 li라는 태그를 자식태그로 사용합니다. ol태그를 사용하면 순서를 가지고 ul태그를 사용하면 순서를 가지지 않습니다.

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

  tr태그와 td태그가 있습니다. tr태그는 가로로 줄을 나타낼때 td태그는 그 tr태그의 세로로 줄을 나타낼때 사용합니다.

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

  대표적으로 form태그가 있습니다. form태그는 사용자입력 등에 의한 모든내용을 name, action, method 속성을 통해 서버로 전송합니다.

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

  position의 속성으로 static, relative, absolute, fixed 이렇게 4가지가 있습니다. 그 중 static은 기본설정이고 relative는 top, right, bottom, left와 같은 속성을 통해 위치를 이동시킬수 있습니다. 또 absolute는 부모요소가 static을 제외한 포지션값을 갖고 있다면 부모박스 안에서 절대적인 위치값을 갖고 부모요소가 포지션값이 없다면 body를 기준으로 절대적인 값을 갖습니다. 마지막으로 fixed는 top, right, bottom, left를 통해 지정된 위치에서 요소를 고정시켜줍니다.

JS 관련

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

  객체를 기반으로한 가벼운 언어이며 주로 html을 조작하기위한 목적으로 사용되어집니다.

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

  var는 재선언, 재할당이 가능하며 함수레벨스코프를 가지고 let은 재선언은 불가하지만 재할당이 되며 블록레벨스코프를 가지고 const는 재선언 재할당이 모두 안되며 블록레벨스코프를 가집니다.

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

  string, number, boolean, null, undefined, symbol, object가 있습니다.

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

  함수란 input을 받아서 output을 배출하는것으로 변수와 같은 방법으로 선언합니다. 함수를 호출 할땐 함수이름 뒤에 소괄호를 붙여 호출해줍니다.

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

  제가 알고있는 math의 메서드는 가장 작거나 큰값을 리턴해주는 max와 min 그리고 반올림해주는 round 또 가장 유용한 0~1사이값으로 random 메서드가 있습니다.

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

  ==는 동등연산자라고 하며 데이터타입을 신경쓰지않고 느슨하게 값을 비교하고 ===는 일치연산자라 하며 데이터타입 또한 신경쓰며 엄격하게 비교합니다.

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

  프로그래밍에서 조건문이 필요한 이유는..., 프로그램에서는 제작자의 의도와 다른 여러가지 상황들이 일어날 수 있습니다. 그래서 의도와 다른 상황을 예외처리하고 컨트롤하기위해 조건문이 필요하다고 생각합니다.

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

  함수에 인자가 필요한 이유는..., 함수에 인자를 넣지않는다면 코드와 함수를 이어줄 수가 없습니다. 그렇기에 징검다리 역할을 할 수 있는 함수에는 인자가 필요합니다.

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

  순서가 필요한 수많은 자료들을 단하나의 변수명을 통해 관리할 수 있기에 필요합니다.

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

  배열을 담은 변수를 쓰고 옆의 중괄호안에 인덱스를 넣어 배열의 요소에 접근합니다.

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

  배열의 메서드로는 원하는 값을 추출해 리턴해주는 filter, 배열의 값과 인덱스를 출력해주는 forEach 등이 있습니다.

• map 과 forEach의 차이점을 설명해 주세요.

  map은 배열내 모든요소에 콜백함수를 적용해 새로운배열을 리턴해주고, forEach는 map과 기능은 같지만 리턴값이 없습니다.

• 객체가 필요한 이유는 무엇인가요?

  많은 데이터를 한번에 관리하기 때문에 유지보수가 좋고 무엇보다 직관적이기 때문에 필요합니다.

• 객체의 값에 접근하는 방법을 설명해 주세요.

  닷노테이션과 바스켓노테이션을 통해 접근할 수 있습니다.

• 객체의 값에 접근하는 방법 두 개의 차이점에 대해 설명해주세요.

  일반적인 값은 닷노테이션으로 접근하는 것이 가능하지만 띄어쓰기나 마이너스 같은 값들이 포함된 키값에는 브라켓노테이션을 통해 접근이 가능합니다.

• 객체의 값을 추가, 수정, 삭제하는 방법을 설명해 주세요.

  값을 추가하는 방법은 객체.작명 = '넣을값'으로 하고 수정또한 같은 방법으로 수정합니다 삭제하는 방법은 delete를 써준 후 객체.키 로 삭제합니다.

• Scope에 대해 아는대로 설명해 주세요.

  스코프는 코드에 접근할 수 있는 범위를 뜻하며 범위의 크기대로 전역스코프, 함수스코프, 블록스코프라고 불립니다. 그리고 하위스코프는 상위스코프를 참조할 수 있지만 상위스코프는 하위스코프를 참조할 수 없습니다.

• ES6 템플릿 리터럴은 문자열을 생성하는데 많은 유연성을 제공합니다. 이에 대한 예를 들 수 있나요?

  백틱을 사용하면 내가 작성한 문자열을 그대로 보여줄 수 있고 ${}을 사용하여 변수를 넣을 수 있어 문자열 생성이 유연하다.