[면접] 마크업 개발 레벨 테스트

# 마크업 개발 레벨 테스트

레벨테스트의 목적은 현재 파악하고 있는 수준을 측정함에 있습니다.
자료를 찾아서 답을 작성하지 마시고, 편안한 마음으로 아는 만큼만 적어주세요.

모든 답변은 2줄이 넘지 않을 정도의 분량으로 간결하게 작성해주세요.

 

## HTML

1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?
2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?
3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
4. blockquote 태그는 어떤 용도로 사용해야 할까요?
5. 인라인 스타일(style=”property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?
6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?
11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?
12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

 

## CSS

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

box요소 사이즈를 작게(width:0; height:0;)하여 overflow:hidden 을 주거나, text-indent, positoin 값에 (-)음수를 적어 안 보이게 합니다.

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

부모요소 CSS 에 overflow:auto;

3. border-box와 content-box의 차이점은 무엇일까요?

content-box는 오직 content의 크기만, border-box는 content+padding+border 를 포함한 크기

4. position: relative는 어떤 경우에 사용 하나요?

1) position:absolute의 부모속성에 선언

2) 현재 위치에서 top, bottom, left, right를 사용하여 미세이동을 할 때

5. CSS Reset은 무엇이며 왜 사용할까요?

브라우저의 기본으로 적용되어 있는 CSS를 제거하기 위해

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

아직 없다.

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

!important > inline style > #id > .class > tag

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

font-size, font-weight, color, text-decoration, text-transform 등

9. Sprite image 기법을 사용하는 이유는 무엇일까요?

이미지를 따로 관리하는 것보다 하나의 파일로 관리할 수 있기 때문

10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

background-image, background-position, width, height, oveflow

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

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

eot (IE5+), woff(모던브라우저)

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

1) flex : IE10, 모바일브라우저에서 벤더프리픽스가 없을 경우 적용되지 않음

2) transform : IE9, 모바일브라우저에서 벤더프리픽스가 없을 경우 적용되지 않음

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

Fluid Grids, Flexible Images, Media Queries

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

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

1) first-child : IE7 이상

2) last-chlid : IE9 이상

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

18. jpg, gif, png의 차이점을 설명해보세요.

JPG : 손실 압축 방식. 원본에 손상을 가해 이미지의 용량을 줄이는 방식. 트루 컬러(24비트) 색상 지원. 압축율을 높이거나 새로 저장할 수록 이미지의 품질이 점점 떨어지는 단점이 있다.(계단 현상 심화) 사진과 같이 다양한 색상과 명도를 가진 이미지의 용량을 줄이는데에 가장 높은 효율을 보여주기에 주로 사진을 저장하는 용도로 사용된다.(사진에 특화되어 있다.) 실제로 웹에서 가장 널리 사용되는 이미지 포맷이라고 할 수 있다.

GIF : 비손실 압축 방식. 이미지 포맷 자체는 비손실 압축이지만, 하나의 이미지에 저장 가능한 색상이 256 색으로 제한되는 탓에 트루 컬러(24비트)와 같은 256 이상의 색을 가진 이미지를 GIF 포맷으로 저장하게 되면 어쩔 수 없이 손실이 발생하 게 된다. 단색 투명층을 통해 투명 이미지를 지원한다.(투명이거나 아니거나) 또한 움직이는 그림 즉, 애니메이션을 지원하기 때문에 이 방면으로도 널리 사용되고 있다. JPG 이미지 포맷과 함께 웹에서 널리 사용되는 이미지 포맷이다.

PNG : 비손실 압축 방식. 비손실이면서 트루 컬러(24비트)를 지원하기 때문에 원본을 손상없이 그대로 저장할 수 있다. 또한 GIF 의 단색 투명층이 아닌 8 비트 알파 채널을 통한 투명층을 지원하기 때문에 이미지에 농도를 조절하여 투명 효과를 정밀하게 줄 수 있다. 단순한 패턴을 가진 이미지에는 굉장히 높은 압축 효율을 보여주지만, 사진과 같은 다양한 색상과 명도를 가진 이미지에서는 압축 효율이 좋지 못한 특성을 가지고 있다. 비교적 단순한 패턴을 가지고 투명 효과가 중요한 아이콘과 같은 이미지에서 널리 사용되며, 손상이 발생하지 않기 때문에 이미지의 품질을 중요시 하는 경우에는 사진을 저장할 때에도 많이 사용되고 있다.

19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

margin:0 auto;