1.다음 중 와이어프레임에 대한 설명으로 옳지 않은 것을 고르세요. 답: C
A.단순한 선이나, 도형으로 인터페이스를 시각적으로 묘사한 것이다.
B.와이어프레임만 봐도 어떤 목적을 가진 프로그램인지 유추할 수 있다.
C.와이어프레임은 보통 HTML 문서로 작성한다.
D.와이어프레임의 목적 중 하나는 화면의 영역을 구분하는 것이다.
해설:와이어프레임은 선과 도형으로 레이아웃의 뼈대를 그리는 것인 만큼, 보통 도형을 그릴 수 있는 그래픽 툴을 사용해서 만들게 됩니다. 따라서 C가 틀린 보기입니다.
2.다음 와이어프레임을 보고 프로그램의 목적으로 가장 적절한 것을 고르세요. 답: B
A.주문을 받기 위한 프로그램
B.댓글을 작성하는 프로그램
C.실시간으로 채팅을 주고받는 프로그램
D.학습 콘텐츠를 제공하는 프로그램
해설: 와이어프레임을 살펴보면, input 요소에 내용을 입력하고 button 을 누르면, 아래 div#list 에 username, date, content 를 감싸는 div 요소가 추가되는 방식으로 작동하는 프로그램으로 보입니다. 보통 게시글에 댓글을 작성하는 부분이 해당 와이어프레임과 유사한 형태를 가집니다.
3.다음 중 Flexbox에 대한 설명으로 맞는 것을 모두 고르세요. (정답 2개) 답: A,B
A.부모 요소와 자식 요소에 적용해야 하는 속성을 잘 구분해서 사용해야 한다.
B.하나의 요소에 display : flex; 속성과 flex-grow : 1; 속성이 동시에 적용되는 경우도 있다.
C.flex 속성의 기본값은 1, 0, auto 이다.
D.flex 속성값은 순서대로 수축 지수, 팽창 지수, 기본 크기이다.
해설:
•특정 요소가 부모 요소이자 자식 요소인 경우에는 두 속성이 동시에 적용되는 경우도 있습니다. •flex 속성값은 순서대로 팽창 지수, 수축 지수, 기본 크기로, 기본값은 0, 1, auto 입니다.
4.다음 중 부모 요소에 적용해야 하는 Flexbox에 속성으로 맞는 것을 모두 고르세요. (정답 2개) 답: B,C
A.flex
B.justify-content
C.align-items
D.wrap-reverse
해설:
•flex 속성은 자식 요소에 적용해야 하는 속성입니다.
•wrap-reverse 는 flex-wrap 의 속성값 중 하나입니다.
5.다음 예시에서 justify-content 의 속성값으로 적절한 것을 고르세요. 답: C
A.flex-start
B.center
C.space-between
D.space-around
해설:요소들의 배치를 봤을 때 flex-direciton: row; 인 상태입니다. flex-direciton : row; 일 때 justify-content 속성값에 따른 요소의 배치는 다음과 같습니다.
6.다음 예시에서 align-items 의 속성값으로 적절한 것을 고르세요. 답: B
A.stretch
B.center
C.flex-end
D.baseline
해설: 요소들의 배치를 봤을 때 flex-direciton : column; 인 상태입니다. flex-direciton : column; 일 때 align-items 속성값에 따른 요소의 배치는 다음과 같습니다.
7.다음 중 flex 속성에 대한 설명으로 맞지 않는 것을 고르세요. 답: A
A.요소의 크기는 flex-basis 의 값으로 항상 유지된다.
B.flex-grow 의 값이 0 일 경우 요소의 크기는 늘어나지 않는다.
C.flex-grow 속성과 flex-shrink 속성을 함께 사용하는 것은 권장되지 않는다.
D.flex-grow 속성의 비율은 flex-basis 의 값이 0 일 때 가장 정확해진다.
해설:
•flex-grow 의 값이 0 이 아니라면,flex-basis 에서 설정한 값보다 커질 수 있습니다.
•flex-shrink 의 값이 0 이 아니라면, flex-basis에서 설정한 값보다 작아질 수 있습니다.
8.CSS 코드가 다음과 같을 때, 결과물로 가장 적절한 예시를 고르세요. 답: D
해설: CSS 코드는 각 박스 요소에 적용된 flex-grow 값을 보여주고 있습니다. -grow는 부모 요소에 빈 공간이 있을 때 요소가 얼마나 늘어날지 비율을 뜻하므로, 같은 부모의 자식 요소라면 flex-grow 의 값이 클 수록 더 많은 공간을 차지하게 됩니다. 즉, 박스의 크기는 box3 (flex-grow : 4;) > box1 (flex-grow : 2;) > box2 (flex-grow : 1;) 순서가 됩니다.
9.다음 중 보기의 부모 요소에 적용된 속성으로 옳은 것을 모두 고르세요. 답:
A.flex-wrap : wrap;
B.flex-wrap : wrap-reverse;
C.justify-content : center;
D.justify-content : space-around;
해설:
•자식 요소의 줄 바꿈이 되어있음으로 flex-wrap 속성을 사용했음을 알 수 있습니다.
•자식 요소가 좌측 하단부터 순서대로 배치되었으므로 wrap-reverse 속성값을 사용했음을 알 수 있습니다.
•자식 요소가 부모 요소 가운데에 정렬되어 있으므로 justify-content : center; 속성을 사용했음을 알 수 있습니다.
10.다음 중 보기의 부모 요소에 적용된 속성들로 옳은 것을 고르세요. 답: D
A.display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
B.display: flex;
flex-direction: column;
flex-wrap: reverse-wrap;
justify-content: space-between;
align-items: flex-end;
C.display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-end;
D.display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
align-items: space-between;
해설:
•box가 세로로 정렬되어 있고, 요소가 상단에서부터 배치되어 있기 때문에 flex-direction : column; 가 적용되어 있음을 알 수 있습니다.
•줄 바꿈이 되어있고, 요소가 좌측 상단에서부터 배치되어있으므로 flex-wrap : wrap; 가 적용되어 있음을 알 수 있습니다.
•box4와 box5를 봤을 때, 축 방향 (⬇️ ) 기준으로 축의 양쪽 끝으로 배치되어있으므로, justify-content : space-between; 가 적용되어 있음을 알 수 있습니다.
•박스들이 축 수직 방향 (➡️ ) 기준으로 축의 끝부분인 오른쪽에 정렬되어 있으므로, align-items : flex-end; 가 적용되어 있음을 알 수 있습니다.
