낀대코딩

이직을 준비하다 보니 마크업(퍼블리셔) 부문도 필기, 라이브테스트 형식으로 코딩테스트를 많이들 했다.

어느정도 개념이 있는지 확인 해볼필요가 있는거 같아 찾게 된 질문지.

아래 마크업 개발자 테스트 질문지를 만들어낸 글쓴이는 2015년도에 막내레벨을 확인 하기 위해 작성했고,

면접관으로 들어갔을때에 질문과 비슷하다고 했다.

[ 질문지를 작성자 (원본) ] https://tobyyun.tumblr.com/post/115282929482/%EB%A7%88%ED%81%AC%EC%97%85-%EA%B0%9C%EB%B0%9C-%EB%A0%88%EB%B2%A8-%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A7%88%EB%AC%B8

※ 보라색은 답 또는 추가 설명

## HTML

1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?

me) 독타입으로 작성된 코딩의 유형을 선언하게 되는데 이를 사용하지 않으면 각 브라우저별로 깨지는 현상이 발생

DOCTYPE 선언은 HTML 작성된 버전을 브라우저에게 알려주는 것으로 웹브라우저가 내용을 올바르게 출력하도록 도와줍니다.
DOCTYPE 선언을 하면 표준 모드로 작동되고 선언하지 않으면 호환 모드(Quricks Mode)로 작동되서 의도와 다르게 표시

2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

me) b => strong , i => em

b & strong : 글자 굵게, i & em : 기울기 

3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.

me) block요소 = header,section,artcle,footer,main,nav,div,ul 등

      inline요소 = span,img,strong,em,a,br,small,label 등

block: address, article, aside, blockquote, canvas, div, dd/dl/dt , fieldset, figcaption/figure, footer, form, h1-h6, header, hr,               ul/ol/li, main, nav, noscript, p, pre, section, table/tr/th/td, 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...

4. blockquote 태그는 어떤 용도로 사용해야 할까요?

me) 인용문구에 사용

인용문의 출처 문서나 메시지를 가리키는 URL. 인용문의 맥락 혹은 출처 정보

5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?

me) 인라인 스타일은 가독성도 떨어트릴 뿐더러 유지보수 하는데도 어렵다

6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

me) <img src="해당파일주소/myPhoto.jpg" alt="사진이미지">

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

me) id는 중복해서 사용할수 없기 때문에 유니크하게 활용시 사용

8. ‘TopArea'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

me) 낙타형태의 네임은 상관 없으나 대문자로 시작하면 안됨

네이밍은 - (하이폰) 사용을 기본으로 한다.
시작의 이름은 영문 소문자를 사용하며 두 번째 단어부터 하이픈(-)으로 연결하며 대문자는 사용하지 않는다.
영문 소문자, 숫자, 하이픈(-)만 사용할 수 있다.
하이픈(-)은 2개 이상의 단어를 조합할 때만 사용한다.

[참조] http://dev.paik.ac.kr/guide/guide/index.html

9. 'blue-box'라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

me) 클래스명의 해당 태그의 내용이 직관적으로 보여지지 않아서 협업이나 유지보수 일때 접근성이 비효율적이라 생각 

10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

me) 사이드 메뉴나, 본문에 추가되는 요소들을 적용

주요한 주제가 아닌 부차적인 요소 적용

11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

me) label

12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

me) midea query="max-width:600px"

## CSS

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

me) visibility:hidden, display:none

이 질문은 개인적으로 크로스브라우징 처리시 중요한 사항인거 같다.
display: none 은 당연히 화면에도 코드구성에도 숨김처리라서 리더가 당연히 몬읽을줄 알았지만,
visibility: hidden은 보이지는 않지만 너비를 차지하고 있기 때문에 당연히 스크린 리더에서도 읽힐줄 알았는데..
스크린 리더에서도 읽히지 않는다.
그래서 찾아본 방법은 아래내용과 같다

1. position:absolute;top:-9999px;left:-9999px;
2. text-indent:-9999px;
3. clip속성
ex)block tag{ overflow:hidden;
                 position:absolute;
                 boder:0;
                 margin:-1px;
                 width:1px; height:1px; 
                 clip: rect(1px 1px 1px 1px); 
                 clip-path: inset(50%); }
  inline tag{ overflow:hidden; 
                 display:inline-block;
                 boder:0; 
                 margin:-1px;
                 width:1px; height:1px; 
                 clip: rect(1px 1px 1px 1px); 
                 clip-path: inset(50%); }
※ screen out 기법으로 black hat을 피하기 위해 고안된 접근성 방법

[참조] https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

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

me) 부모에 overflow:hidden;값 주거나, float을 가진 자식에 가상요소로 clear:both주기

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

me) box-sizing의 속성이며 border-box는 해당 태그의 콘텐츠 영역 padding,border값까지 전부 포함,

  content-box는 해당 콘텐츠 영역

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

me) 자식에게 기준이 될 부모태그에게 사용

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

me) 스타일로 적용한 웹폰트라던지 마진이나 패딩 등 오류가 생길시 reset으로 가장 기본값으로 적용

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

me) sass/scss를 사용해봤음.

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

me) !important > inline style > id > class

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

me) color, font

visibility, opacity, font, color, line-height, text-align, white-space

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

me) 이미지를 불러오는 횟수를 줄여 로딩속도를 빠르게 처리

서버 요청 수가 감소되고 대역폭이 절약됨

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

me) background-position, background-size

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

me) 시간은 오래걸리지만 순차적으로 디벨롭 하는것

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

me) woff, woff2

TTF/OTF, WOFF, WOFF2, SVG, EOT

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

me) -webkit-, -moz-

-webkit- : 구글 , 사파리 브라우저에 적용
-moz- : 파이어폭스 브라우저에 적용
-ms- : 익스플로러에 적용 , 보통 생략합니다.
-0- : 오페라 브라우저에 적용

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

1. Fluid Grid : 가변성이 있는 그리드(레이아웃)이용
2. Flexible Images : 고정값이 아닌 퍼센트개념
3. Media Query : 디바이스에 따라 스타일 다르게 적용

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

me) 기준 해상도 360px(xmpi), 

[4개의 반응형 분기점]
1. 낮은 해상도의 PC, 테블릿 가로 : ~1024px 
2. 테블릿 가로 : 768px ~ 1023px
3. 모바일 가로, 테블릿 : 480px ~ 767px
4. 모바일 : 320px ~ 480px

[3개의 반응형 분기점]
1. pc : 1024px ~
2. 테블릿 가로, 테블릿 세로 : 768px ~ 1023px
3. 모바일 가로, 모바일 세로 : ~ 768px

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

me) ie7, ie9

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

me) slice(c), select(m,l), ctrl+a

marquee tool, lasso tool, slice tool, Select

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

me) jpg: 고해상도 이미지 

     gif : 움직이는 이미지, 용량이 작음

     png: bmp또는 투명도 드러간 이미지, 용량이 작음

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

me) 작성된 html에 추가, 수정 없이 콘텐츠 삽입을 원할때나, float를 사용햇을때

가상선택자는 꾸밈을 위해서 의미없는 태그를 더 추가해야 될 때

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

me) 1. 부모: 높이값,text-align:center; line-height:높이값;

      2. 부모: 너비값,높이값,position:relative;

         자식: position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;width:너비;heigth:높이;

      3. 부모:display:flex;justis-content:center;align-item:center

      4. position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)

## 웹접근성

1. IR기법 :  이미지 대체 텍스트 제공을 위한 css 기법

- Phark Method : 배경이미지, 텍스트 넣고 텍스트만 숨김처리

display:block;
overflow:hidden;
font-size:0;
lien-height:0;
text-indent:-9999px;

- WA IR : 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때

display:block;
overflow:hidden;
position:relative;
z-index:-1;
width:100%; height:100%;