배경 및 구조

Coddy의 인스타그램 페이지 클론 | 프론트엔드 프로젝트 코스 레슨. 16개 중 3번째.

우리는 body를 flex display로 스타일링하고 모든 요소를 수직 및 수평으로 중앙 정렬했습니다. 이제 페이지의 배경/캔버스를 만들 것이기 때문입니다. 우리는 95%의 width와 height를 가진 div를 만들 것이며, 나중에 다음과 같은 구조를 갖게 될 것입니다.

웹사이트의 상단 부분은 profileInfo라고 불리는 section이 될 것이고 하단은 posts가 될 것입니다. 그 후에 각각을 더 많은 부분으로 나누기 시작할 것입니다.

챌린지

쉬움

HTML의 head 부분에 제목이 Instagram인 title 태그를 입력하세요.
index.html의 body 태그 안에 id가 background인 div를 생성하세요. 지금은 비워 두세요.
styles.css에서 해당 id를 사용하여 height와 width가 95%가 되도록 div의 스타일을 지정하세요.
값이 white인 background 속성
그리고 15px의 border-radius

직접 해보기

<!DOCTYPE html>
<html>
<head>
    <!-- 제목을 입력하세요 -->
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- 여기에 HTML 코드를 작성하세요 -->
    </body>
</html>