퀴즈 리스트

[Front-line-dev]

• 번호
• 출제의도

[Front-line-dev]

1 - 10

1

• 출제 의도
  • 코드 에디터 간단한 사용 및 html, css 적용해보기

2

• 출제 의도
  • 가상 선택자 활용
• 필요한 지식
  • :nth-child

3

• 출제 의도
  • flex 활용

4

• 출제 의도
  • 말줄임

5

• 출제 의도
  • 테이블 사용

6

• 출제 의도
  • z-index 사용

7

• 출제 의도
  • inline요소에 margin, padding 적용
• 필요한 지식
  • inline, inline-block, block 요소 차이

8

• 출제 의도
  • font 속성 사용
• 필요한 지식
  • font 속성

8

• 출제 의도
  • border 속성 사용
• 필요한 지식
  • border 속성

10 - 20

10

• 출제 의도
  • backdrop-filter를 사용할 수 있는가
• 필요한 지식
  • 중앙정렬
  • backdrop-filter

11

• 출제 의도
  • float를 사용할 수 있는가
• 필요한 지식
  • float적용 및 clear
  • ::first-letter CSS pseudo-element selector

12

• 출제 의도
  • masonry 레이아웃을 만들 수 있나
• 필요한 지식
  • 음수 margin 값

13

• 출제 의도
  • 둥글면서 그라디언트 색이 적용된 보더를 만들 수 있나
• 필요한 지식
  • linear-gradient
  • CSS pseudo-element
  • border-radius

14

• 출제 의도
  • vw, vh를 사용할 수 있는가
• 필요한 지식
  • position: absolute
  • vw, vh

15

• 출제 의도
  • 텍스트에 그라데이션으로 색상 넣고 굵은 밑줄 추가하기
• 필요한 지식
  - linear-gradient
  -background-clip ( -webkit prefix 필요 )
  • 가상 요소에 z-index 활용

16

• 출제 의도
  • 메뉴 버튼 만들기

[Front-line-dev]

퀴즈 코멘트

1

정답화면 텍스트와 유저 화면의 텍스트가 스타일과 일치하지 않음. width 값이 다르거나 색상이 skyblud로 되어있음

혹시 의도하신건...?

2

SCSS 문법이 쓰임

3번, 4번등이 아닌 3의 배수, 4의 배수로 표현하는게 좋을 것 같음

1번색상 -> 첫 번째 아이템 색상 등

보더 색상까지 같이 변하게 한 디자인이 좋은 것 같음

3

사용자가 HTML을 수정해서 순서를 바꿀 수 있을 것 같음. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters CSS카운터를 사용해서 표시하거나 HTML 주석에 HTML 수정금지등을 넣는게 좋을 것 같음

4

이미지와 텍스트가 수직으로 center 조건은 알아채기 힘들 것 같음. 그냥 말줄임에만 집중하는게 좋아보임

5

달력은 보자마자 하기가 싫어짐. HTML이 어느정도 완성되어있고 colgroup과 관련된 문제를 내거나 후반 문제로 순서를 조정하는게 좋을 것 같음

6

z-index와 transform translate를 이용한 중앙정렬이 섞여있음

각각 다른문제로 분리하는게 좋을 것 같음

9

문제 디자인이 엄청 깔끔한 것 같음

11

폰트 색상을 바꿔야 할 것 같음

15

어려움. 난이도를 고급으로 바꿔야 할 것 같음

[Synagir]

퀴즈 코멘트

3

스타일 속성 선언을 태그 선택자나 클래스 선택자 중 하나로 통일하면 좋을 것 같습니다.

4

텍스트 수직 정렬과 아이템 간의 여백을 잡는데 불필요한 작업인 것 같습니다.

5

네이버 홈의 위젯 보드 - 캘린더의 활용하는 부분 같아 재밌습니다. 다만, <table> 태그의 집중을 위해서 달력만 있으면 좋을 것 같고, <table> 태그를 활용하기 위해서 달력 예시는 반복되는 비슷한 코드량이 많은 것 같습니다.

6

z-index 적용 후, 위치 또한 맞춰주어야 하는데, 첫번째 상자 의 위치의 힌트가 없다보니 정답을 맞추기가 어렵습니다. z-index만 적용하는 문제면 좋을 것 같습니다.

7

문제명을 display 활용하기 로 변경하면 좋을 것 같습니다.

8

vertical-align 속성이 font 속성과 직접적인 연관이 없어보여서 다른 문제나 제거하는 것이 좋을 것 같습니다.

9

3번 문제와 동일하게 태그 선택자나 클래스 선택자로 통일하면 좋을 것 같습니다.

10

문제 난이도는 적당한데, button 태그에 type이 있으면 좋을 것 같습니다.

11

float 관련 문제만 있으면 깔끔할 것 같습니다.

12

masonry 구조를 만들어보는 작업은 재밌습니다. 수치값만 박스 안에 표기되어 있으면 좋겠습니다.

13

문제가 어렵습니다..

14

퍼즐 맞추는 것 같아 재밌습니다.

[dnrlrl]

퀴즈 코멘트

20

해상도에 따라 '가로가 길 경우 마지막 아이템만 말 줄임'이 말줄임 안되어 보이는 경우가 있어서
ul태그에 display: flex만 추가해도 문제 풀리는 경우가 있습니다

21

어렵네요 처음엔 order 사용해서 풀려고 했는데 점선이 조금차이나서 틀렸네요

메뉴명과 가격에 background-color: 배경색을 주었는데 실무에서도 사용하셨나요?

[Front-line-dev]

위에 적어주신 부분들 중 제가 작성한 퀴즈는 수정하겠습니다

맥 환경에서는 같은 글자여도 더 가로가 작아서 여러 환경에서 테스트를 해봐야 할 것 같습니다

21번 퀴즈는 상원님이 푼 방법이 더 좋아보입니다. background-color를 재설정 하는것보다 의사요소에 order가 더 깔끔하게 느껴지네요. 실무에서 사용한게 맞습니다! 이렇게 구현되어 있던걸 보고 신기해서 문제로 만들었어요
둘 다 정답으로 하고 싶습니다만, 구현 특성상 위에 보여주신대로 조금 달라서 고민이 되네요
직접 해보고 order 방식으로 바꾸겠습니다

[Front-line-dev]

문제들을 좀 더 다듬고 난이도 순서대로 번호 재정렬