web 마크업 레벨테스트

개요

Tobyyun님의 Markup Level Test를 풀고 점검을 받았습니다.
첫 라인이 제가 쓴 답이고(대부분 틀렸어요 ^.^….눈물)
들여쓰기 되어있는 것이 첨삭받은 것입니다.

마크업 레벨테스트

1. Doctype을 사용하지 않을 때는 무슨일이 발생하나요?
   특정버전으로 작성된 메서든데 다른 버전으로 보일 수 있다.

   HTML렌더링 모드, 독타입이 없으면 quirks mode로 간다.(스탠다드-웹표준, 얼모스트 스탠다드, 쿽스 모드) CSS를 해석하는 방법이나 등등이 깨질 수 있다.

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

   시맨틱!!! <strong>, <em>

3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.
   블록: <img>, <div>, <header>, , <table>, <li>
   인라인: <p>, <a>, <strong>, <span>

   블록: div, p, section, article
   인라인: span, a, img, b, u, i….

4. blockquote 태그는 어떤 용도로 사용해야 할까요?
   인용구를 넣을때

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

   구조와 표현의 분리

6. myPhoto.jpg 파일을 img 태그로 작성해보세요.
   <img src="경로/myPhoto.jpg" />

   <img src="경로/myPhoto.jpg" alt="대체텍스트"> //알트 꼭 쓰기

7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?
   요소에 유니크한 속성을 부여한다. 페이지당 한번만 쓴다.

8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
   첫글자가 소문자가 아니다

   Top이라는 방향성을 가지고 있기 때문. 접근성차원에서도 방향은 의미 없으므로.

9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?
   색상이 CSS에서 변경될 수 있다.

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

    HTML5 Doctor의 콘텐츠 요소 판별법 참고
    컨텐츠의 주요 내용이 아니고 부수적인 내용일때

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

label꼭 달자

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

CSS

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

   위의것은 스크린리더에서 안읽어줌. 우리 사이트 a11y클래스 참고

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

   나중에 알려줄게요.

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

   박스 모델을 알고있나? 지금은 컨텐트박스가 표준. box-sizing으로 변경 가능 =

4. position: relative는 어떤 경우에 사용 하나요?
   다른 요소에 따라 이 요소의 위치값이 결정될때

   좌표를 재정의할때 쓴다

5. CSS Reset은 무엇이며 왜 사용할까요?
   브라우저 기본으로 적용되어있는 CSS값들을 리셋. (기본 패딩 등등…)

   크로스 브라우징을 목적으로

6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?
   sass를 좀 보았습니다.

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

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

   위 것들은 다 상속 안되는것들이고, color:red나 사이즈 같은거 상속됨.

9. Sprite image 기법을 사용하는 이유는 무엇일까요?
   빠른 로딩과 용량을 줄이기 위해

   파일 요청횟수

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

    background-position

11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?
    특정 기능을 적용할 때, 구 브라우저에 적용이 안돼도 치명적이지 않을 만큼 조금씩 신기능을 추가

    graceful degration(우아한 낮춤?!) ttf만 쓰면 구형 인터넷익스플로러에선 안된다. eot, svg같은걸 추가 (ttf, eot파일 두개만 있으면 거의 다 지원된다.)

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

    앞에 webkit, moz같은게 붙는거.

13. 반응형웹디자인의 3가지 요소를 꼽아보세요.
    모든 사이즈 지원, 모두 같은 내용, 코딩을 한번만 한다

    링크 참고

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

    320을 최소로 잡고, 그것보다 넓으면 100%로 늘리면 되니까!

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

    7, 9(그래서 퍼스트차일드로 스타일예외처리를 많이 한다.)

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

17. jpg, gif, png의 차이점을 설명해보세요.
    png: 투명 가능, 용량 작다
    jpg: 이미지 손실이 덜하다
    gif: 움직이는 이미지 제작가능

    나중에 더 자세히

18. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?
    애니메이션 만들때

    HTML고치지 않고 꾸밀때 (가상요소)

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

    일일코딩시에 하겠습니다.