Today Yurim Learned

# 마크업 레벨테스트

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

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

# HTML

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

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

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

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

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

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

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

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

구조와 표현의 분리

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

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

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

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

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

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

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

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

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

label꼭 달자

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

meta name="viewport"

# CSS

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

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

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

나중에 알려줄게요.

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

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

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

좌표를 재정의할때 쓴다

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

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

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

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

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

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

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

파일 요청횟수

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

background-position

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

graceful degration(우아한 낮춤?!)<- 관점의 차이

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

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

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

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

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

링크 참고

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

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

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

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

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

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

나중에 더 자세히

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

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

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

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

← :nth-child(A) vs :nth-of-type(A) →