마크업 개발 레벨 테스트 질문

얼마 전 이직 면접을 보고 난 뒤 문득 이런 생각이 들었다.

내가 너무 설렁설렁 준비하는게 아닐까, 남들은 면접공부, 기술스택에 대한 질문 답변까지 준비하는데...

정작 나는 자기소개, 포트폴리오 설명 따위의 기본 중의 기본만 준비하던 나였기에 조금 더 성장하려면 내 직무에서 지식을 더 탄탄하게 쌓아야한다는 생각이 들었고 마침 이 페이지를 보게 되었다.

 

퍼블리싱에 관심이 있거나 현직에 종사한다면 한 번쯤 복습 겸 배워볼 만한 질문들이 많은 듯하다!

 

그럼 테스트 시작!

 

---

 

## HTML

Q1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?
A1. Doctype 선언이란 HTML문서가 어떤 버전으로 작성되었는지 브라우저에게 알려주는 것이다. HTML이 어느 버전인지 알려주고, 내용을 올바르게 출력할 수 있도록 도와주는 역할인데, 선언하지 않을 경우 호환모드(Quricks Mode)로 작동되어 의도대로 동작하지 않을 수 있다. 

- 호환모드(Quirks Mode)
　: 기존 방식으로 제작된 웹사이트들을  표현하기 위한 Navigator4와 Explorer5의 비표준 동작들을 애뮬레이터
- 거의 표준모드(Almost Standard Mode)
　: 소수의 호환모드 요소만 지원
- 완전 표준모드(Standard Mode)
　: HTML과 CSS에 의해 표시

- 출처 : https://saranf-click.tistory.com/16

 

Q2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
A2. <b> = <strong> <i> = <em>

Q3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
A3. block: <p> <div> <h1> <hr> <li>
　　inline: <img> <a> <b> <input> <button>
　　block: <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li><main> <nav> <noscript> <ol> <p> <pre> <section> <table><tfoot> <ul> <video>
　　inline: <a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input><kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time><tt> <var>

Q4. blockquote 태그는 어떤 용도로 사용해야 할까요?
A4. 인용으로 사용 시
다른 출처로부터 인용된 블록을 정의할 때 사용하며, 이렇게 인용된 블록을 브라우저는 보통 들여쓰기를 사용하여 표현

Q5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
A5. 유지보수 시 하나하나 수정해야하는 번거로움이 발생
CSS 속성의 중복 및 재사용이 불가하며 애니메이션 등의 기능을 사용할 수 없음

Q6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
A6. <img src="/myPhoto.jpg" alt="myPhoto" width="100px" height="100px">

Q7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
A7. 해당 속성에 유니크한 값을 주기 위해, 중복 사용이 불가

Q8. ‘TopArea'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
A8. 
첫 글자는 소문자로 시작(이걸 놓쳤다니ㅜㅜ)

Q9. 'blue-box'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
A9. blue에 대한 값이 변경될 수 있기 때문에 유지보수에 혼동이 올 수 있다.

Q10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
A10. 부가적인 요소에 사용
문서의 주요 내용과 간접적으로만 연관된 부분을 나타내며, 주로 사이드바 혹은 콜아웃 박스로 표현

Q11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?
A11. <label>

Q12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?
A12. viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">

- width=device-width
　: 페이지의 너비를 기기의 스크린 너비로 설정, 렌더링 영역과 기기의 뷰포트 크기를 같은 값으로 설정
- initial-scale=1.0
　: 처음 페이지 로딩 시 확대/축소가 되지 않은 원래 크기를 사용하며 0~10의 값을 가짐
- minimum-scale
　: 줄일 수 있는 최소 크기를 지정하며 0~10의 값을 가짐
- maximum-scale
　: 늘릴 수 있는 최대 크기를 지정하며 0~10의 값을 가짐
- user-scaleble
　: yes or no 값을 가지며 사용자가 확대/축소할 수 있는지 지정

- 출처 : https://offbyone.tistory.com/110

 

 

## CSS

Q1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
A1. 

Q2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?
A2. overflow: hidden; clear: both;

Q3. border-box와 content-box의 차이점은 무엇일까요?
A3. border-box: 영역의 테두리까지 영역의 너비로 침. content-box: 테두리가 아닌 실제 컨텐츠(폰트나 이미지 등의 내용)에 한해서만 너비로 침

Q4. position: relative는 어떤 경우에 사용 하나요?
A4. 자식요소에 absolute를 사용 시 

Q5. CSS Reset은 무엇이며 왜 사용할까요?
A5. 각 요소별이 가지고 있는 기본 설정을 초기화 하기 위해

Q6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
A6. 아니요...

Q7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
A7. inline style > !important > id > class

Q8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
A8. 

Q9. Sprite image 기법을 사용하는 이유는 무엇일까요?
A9. 용량 최적화

Q10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
A10. background-posistion, background-size

Q11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
A11. 

Q12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?
A12. woff, woff2, eot

Q13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.
A13. 

Q14. 반응형웹디자인의 3가지 요소를 꼽아보세요.
A14. 

Q15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?
A15. 

Q16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.
A16. 

Q17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
A17. 단축키: c, cropTool

Q18. jpg, gif, png의 차이점을 설명해보세요.
A18. jpg: 뭐라고 설명해야할까...
　　png: 웹용 이미지, 투명(transparent)한 배경을 사용 할 수 있음.
　　gif: 256색의 비트로 움직이는 이미지, 적은 용량 사용

Q19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
A19. 요소의 앞 또는 뒤에 내용 삽입

Q20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?
A20. 부모요소에 text-align: center;

 

 

 

2023년 3월 13일 기준 작성.
답변되지 못한 부분 또는 오답인 경우에 추가로 입력 가능성이 있습니다.

클릭 시 원 출처로 이동