Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

퀴즈 리스트 #49

Closed
Front-line-dev opened this issue Jul 16, 2023 · 6 comments
Closed

퀴즈 리스트 #49

Front-line-dev opened this issue Jul 16, 2023 · 6 comments

Comments

@Front-line-dev
Copy link
Owner

  • 번호
  • 출제의도
@Front-line-dev
Copy link
Owner Author

Front-line-dev commented Jul 17, 2023

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
Copy link
Owner Author

퀴즈 코멘트

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
Copy link
Collaborator

Synagir commented Aug 24, 2023

퀴즈 코멘트

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
Copy link
Collaborator

dnrlrl commented Aug 26, 2023

퀴즈 코멘트

20

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

21

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

스크린샷 2023-08-26 오후 11 07 17

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

@Front-line-dev
Copy link
Owner Author

Front-line-dev commented Aug 27, 2023

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

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

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

@Front-line-dev
Copy link
Owner Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants