아카마메 기록소

Toby Yun님의 블로그에서 발췌한 질문 내용이다.

답안이 작성이 안되있으므로 차례대로 작성해나갈 생각이다.

사실 모르는게 대부분이라.. 이 기회에 많이 알아가는 것 같다. Toby Yun님 정말 감사드립니다.

# 마크업 개발 레벨 테스트

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

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

## HTML

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

DTD는 브라우저의 렌더링 모드를 지정해주는 태그로, DOCTYPE 태그를 무시하고 선언하지 않아도 되지만,

XHTML과 같은 정확하게 XML 구문으로 작성되어야 하는 HTML 문서에서는 반드시 선언을 해야한다.

그렇지 않으면 브라우저가 XHTML로 문서를 인식하지 않으므로 XML 구문에 어긋나는 점이 있더라도

브라우저는 무시할 수 있다.

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

<b> -> <strong>

b와 Strong 태그 모두 시각적으로 글씨를 굵게 만드는 태그이지만, 

strong으로 둘러싸인 단어는 중요단어로 검색엔진의 키워드 수집에 반영되므로 

강조를 위해서는 strong을 쓰는 것이 좋다.

<i> -> <em>

i태그와 em 태그 모두 글씨를 시각적으로 기울어진 모습으로 만들어주지만,

em태그 역시 검색엔진 키워드 수집에 반영되므로 강조를 위해선 em을 쓰는 것이 좋다.

요컨데 시맨틱 웹을 위해서 b,i를 지양하고 strong, em 태그를 사용하는 것을 추천한다.

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

block 요소는 항상 새로운 라인으로 시작하고 전체 폭넓이를 이용하는 요소이다.

div, h1, p, form, ul, li, dl...

inline 요소는 새로운 라인에서 시작하지 않고, 필요한 만큼의 폭을 사용하는 요소이다.

span, a, em, img, strong...

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

인용구문을 작성 할 때 사용하는 태그이다.

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

인라인 스타일을 사용하면 CSS를 무시하기 때문에 수정 하고자할 때 소스를 수정해야 하는 문제가 발생 할 수있으며 표현과 구조의 분리 측면에서도 좋지 않다. Html은 구조만을 나타내야만 좋다.

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

<img src="img/myPhoto.jpg" alt="myPhoto">

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

ID 속성은 해당 요소의 고유속성으로 요소를 조작,제어할 때 사용하며,

ID는 CSS 선택자에서 class 보다 우선순위에 있으므로 신중히 사용해야 한다.

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

Css문법에서  2개 이상의 단어가 사용된 속성에 -(hyphen) syntax를 사용하는데 

이를 따르지 않았으며, Top이라는 방향성은 무엇을 기준으로 Top인지도 명확하지 않으므로

방향은 쓰지 않는 것이 좋다 Navigation영역이라면 navigation-area 쯤이 좋지않을까 생각한다.

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

blue라는 색상은 언제든 바뀔 수 있고, 색을 변경 해야 할 때 class 명도 바뀌어야 한다.

이 요소가 갖고있는 역할을 작명하는 것이 추가 작업을 막는 방법이다.

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

주요한 내용이 아닌 부수적인 내용을 담을 때 사용한다. 

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

from, label

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

<meta name="viewport" content="width=device-width, user-scalable=no">

## CSS

1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.
2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?
3. border-box와 content-box의 차이점은 무엇일까요?
4. position: relative는 어떤 경우에 사용 하나요?
5. CSS Reset은 무엇이며 왜 사용할까요?
6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.
8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.
9. Sprite image 기법을 사용하는 이유는 무엇일까요?
10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.
11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?
13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.
14. 반응형웹디자인의 3가지 요소를 꼽아보세요.
15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?
16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.
17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)
18. jpg, gif, png의 차이점을 설명해보세요.
19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?