Q1.

SNS에 블로그 포스팅 링크를 공유하면, 공유된 게시물에 포스팅의 제목과 썸네일 이미지가 포함된 미리보기를 보여주려고 해요.

다음 보기 중 어떤 작업을 해야 하는지 모두 고르세요.

• [ ] title 태그에 블로그 포스팅의 제목을 추가한다.
• [x] meta 태그를 사용하여 Open graph 정보를 추가한다.
• [ ] 포스팅의 제목을 나타낼 수 있는 h1을 사용한다.
• [ ] 블로그가 Client-side rendering을 사용 중이라면 Server-side rendering으로 변경한다.
• [ ] 블로그 HTML, CSS, JS를 서빙하는 서버에 robots.txt를 추가한다.

해설

Open Graph 프로토콜을 사용하면 SNS에서 링크를 공유할 때 제목, 이미지, 설명 등의 미리보기 정보를 쉽게 설정할 수 있습니다.

• og:title - 페이지의 제목을 지정합니다.
• og:description - 페이지의 설명을 지정합니다.
• og:image - 페이지의 대표 이미지를 지정합니다.

다른 선택지는 SNS 공유 시 미리보기를 만드는 데 직접적으로 관련이 없습니다.

Q2.

다음 보기 중 div에 적용되었을 때 Reflow가 발생하는 CSS 속성을 모두 고르세요.

<div
  style={{
    width: '140px',
    height: '140px',
    color: 'red',
    fontSize: '14px',
    backgroundColor: 'green',
  }}
/>

• [x] width: 120px