interview_01[html,css,js]

면접 기초 질문 대비하기

면접 예상 문제에 대한 답을 정리하고 지금까지 배운 내용을 정리하는 시간을 갖는다.

HTML / CSS

• HTML이 무었인가?

  Hypertext Markup Language로

  웹을 이루는 가장 기초적인 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다.

  HTML 요소는 ‘태그’를 사용해서 문서의 다른 텍스트와 구분한다.

  Hypertext 란 웹 페이지를 다른 페이지로 연결하는 링크를 말하며 웹의 근본적인 속성으로 인터넷에 자료를 올리고

  다른 사람이 페이지로 링크함으로써 우리도 능동적인 일원이 가능하다.

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

  태그의 형태의 구조가 됩니다.

  HTML은 기본적으로 DOCTYPE으로 문서의 버전을 선언하고 html태그로 시작해서 head와 body를 필수로 가지고 있는 형태로 구성된다.

  위의 구조를 기본적으로 구성되며 head태그에는 title이 필수로 필요합니다.

• “</img>” 에서 alt, src를 가리키는 말은 무엇일까요?

  src는 필수 속성으로 포함하고자 하는 이미지의 경로입니다.

  alt 특성은 필수 요소는 아니지만 스크린 리더가 alt 값을 읽어 사용자에게 이미지를 설명한다.

  네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지가 보이지 않는 경우 속성의 값을 대신 보여준다.

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

  필수 속성은 src 특성이며 포함하고자 하는 이미지로의 경로를 지정합니다.

• css는 무었인가?

  Cascading Style Sheets는

  HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다.

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

  첫번째 방법으로는 태그 내부에 style속성으로 적용해 주는 방법이다.

  두번째 방법은 HTML파일 내부에 style태그 내부에 css내용을 적어주는 방법입니다.

  마지막 방법은 head 태그에 link 태그를 이용해서 css 파일을 연결 시켜주는 방법입니다.

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

  border는 테두리가 그려지는 영역으로 요소의 테두리를 말합니다.

  padding은 border 내에 생기는 영역입니다.

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

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

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

  Block의 의미는 바로 옆에 다른 요소를 붙일 수 없는 요소입니다.

  <header> <footer> <p> <li> <table> <div><h1> 
  

  등 이 모두 block 요소에 해당됩니다.

  Inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻입니다.

  자신의 콘텐츠 가로 크기 만큼의 공간을 차지 합니다.

  ex) span태그

  Inline-block은 기본적으로 inline 요소처럼 줄바꿈 없이 나란히 배치됩니다.

  하지만 inline 태그에서 할 수 없는 width, height 속성 지정 및 margin, padding 속성이 가능합니다.

  Ex) button, input, select

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

  목록과 관련된 태그로는 ul, ol 태그가 있습니다.

  ul태그는 unorder로 순서가 표시되지 않고 닷으로 목록을 생성합니다.

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

  ul ol 태그 내부에 li태그를 이용해 내부 콘텐츠를 작성해 줍니다.

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

  table를 가장 외부에서 감싸주는 table 태그와

  Table row tr태그 행에 존재하는 데이터를 나타내는 table data td태그가 있습니다.

  td태그 대신에 th 태그를 이용해서 head를 사용하면 표의 가장 상단에 있는 제목 영역처럼 가운데 정렬과

  Blod 처리된 요소를 넣을 수 있습니다.

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

  Input, textarea, button, select 등의 태그들이 있으며

  Input 태그를 사용하면 사용자로부터 입력받을 수 있는 요소가 만들어집니다.

  type을 통해 id, password, email 등 다양한 정보를 받아 올 수 있습니다.

  textarea는 여러 줄을 입력 받을 수 있고 buton은 클릭이 가능합니다.

  select태그는 option태그와 같이 이용하여 옵션 메뉴를 제공합니다.

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

  Position은 문서에 요소를 배치하는 방법을 지정하는 것으로

  postion의 속성으로는 relative, absolute, fixed, static이 존재하며

  static은 기본값으로 문서의 흐름에 따라 배치합니다.

  relative는 요소를 일반적인 문서의 흐름에 따라 배치하고 자기 자신을 기준으로 top, left, right 값에

  따라서 이동 가능하며 다른 요소에는 영향을 주지 않습니다.

  absolute는 요소를 일반적인 흐름을 제거하고 부모 조상 요소에 상대적으로 left,bottom, right등으로 배치합니다.

  단 부모요소에 포지션이 지정되어 있어야 하며 지정요소가 없다면 계속 부모를 타고 올라가다가 끝까지 없으면

  컨테이닝 블록 기준으로 배치합니다.

  fixed는 요소의 문서 흐름을 제거하고 페이지 레이아웃에 공간도 배치하지 않으며 그 대신 뷰 포트의 초기 컨테이닝 블록을

  기준으로 삼아 배치합니다. Top, left, right 등을 이용하여 배치합니다.

  sticky는 가장 가까운 블록 레벨 조상을 기준으로 left, right, bottom.. 등으로 배치하며 다른 요소에 영향을 주지 않습니다.

  원래 자리를 유지하며 scroll해도 화면에 남아 있습니다.

JavaScript

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

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

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

  var은 es5 이전에 나왔으며 이를 개선하기 위해 let, const가 나왔습니다.

  var과 let은 변수를 선언하고 값의 재할당이 가능하지만 const는 불가능합니다.

  마지막으로 var의 경우 hoisting 변수를 어디서 선언했는지 위치와 상관없이 상단부로 변수 선언을 끌어올려지는 것처럼 동작하여 선언하기전에 참조하게 되면 undefined가 나오고 const let은 참조오류가 발생합니다.

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

  숫자를 담을 수 있는 number , 문자열 string 참과 거짓 blooean

  Undefined, null 값 등이 있습니다.

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

  함수의 정의는 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들 그리고 반환 값을 지정한는 것을 말합니다.

  호출은 정의된 함수를 불러서 실행시키는 것을 의미합니다.

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

  Math.random 함수는 0~1까지 랜덤한 실수를 리턴한다.

  Math.max는 범위 안에 있는 최대값을 리턴한다.

  Math.ceil는 소수점 이하 올림한다.

  Math.floor는 소수점 이하 버림한다.

  Math.round()는 소수점 이하를 반올림한다.

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

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

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

  조건문을 통해 많은 상 즉 조건에 따른 결정을 만듦으로서 현실의 상황을 모델링 할 수 있다.

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

  함수 외부에 선언된 변수의 값을 내부에서도 사용하기 위함이다.

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

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

  여러가지 데이터를 관리하고 인덱스를 이용하여 접근이 가능해 빠른 검색이 가능하다.

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

  []안에 원하는 인덱스 번호를 입력하여 접근할 수 있다.

  배열의 마지막 요소에 접근하기 위해선 배열의 길이를 알고 그 길이에서 1뺀 인덱스로 접근 가능하다.

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

  Slice( , )는 시작점과 끝점을 넣어주면 시작점부터 끝점보다 하나 작은 인덱스까지의 값이 출력된다.

  split(‘s’)는 문자열을 원하는 단어로 끊어서 배열로 만들 수 있다.

  Splice( , , )는 첫번째 값 시작 점 두번째는 삭제할 요소 마지막은 추가할 요소로 삭제 추가가 동시에 가능하다.

  filter는 조건에 맞는 요소들만 새로운 배열로 반환한다.

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

  둘다 배열의 요소를 순회 하지만 콜백함수는 배열을 반환하고 foreach는 요소를 순회하며 반복해서 호출하는데 끝난다.

  map은 새롭게 순회하면서 새롭게 매핑된 배열을 반환해주는 매소드이다.

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

  배열 내 요소들은 인덱스로만 되어 있지만 객체는의 프로퍼티는 속성을 나타내는 키와 값으로 구성되어 있어

  데이터를 좀 더 직관적으로 저장하고 불러올 수 있습니다.

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

  key를 이용해서 value 에 접근할 수 있습니다.

  Dot Notation은 [객체이름.키 ]를 통해 값을 불러오고

  bracket Notation은 괄호를 이용하여 [객체이름[키]]를 통해 불러옵니다.

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

  Dot Notation은 숫자로 된 키에 접근할 수 없고, 띄어쓰기가 포함된 키에는 포함될 수 없다.

  key에 변수가 포함되어 있으면 dot notation으로 접근할 수 없다.

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

  말로 간단하게 표현해 봤다.

  추가는 [객체이름.없는 키 = 추가] 이런식으로 가능하고

  수정은 [객체이름.있는 키 = 수정] 이런식으로 가능하며

  삭제는 [delete 객체이름 . 있는 키] 이런식으로 삭제가 가능하다.

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

  실행되는 컨텍스트로 해당 스코프 안에서 선언된 변수는 해당 scope 안에서 사용이 가능하다.

  스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

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

  ES6 이전에는 +를 이용하여 작성해 줘야 했지만 이제는 리터럴을 이용하여 문자열 안에 ${변수}를 넣을 수 있습니다.

  리터럴을 이용하여 문자열을 작성시 띄어쓰기를 할 때 다른 명령어 없이 리터럴 문자안에서 띄어쓰기로 작성하면

  화면에 그대로 표시됩니다.