앞서 배운 HTML과 CSS를 사용해서 간단한 목업을 만들어 보았다. 본 수업은 페어 프로그램으로 줌을 통해 페어분과 함께 상의하며 작업하였다. 순서는 다음과 같았다. 먼저 오븐(Oven)을 통해 와이어프레임을 짜고, 그에 맞춰 목업을 구현한다. 우리는 트위터와 네이버를 합친 트위버(Twiver)라는 사이트를 만들고 그 목업을 구현해 보기로 했다. 자바스크립트로 하는 기능 구현 틀은 짜여져 있었고, HTML과 CSS로 사이트의 구조를 만드는 작업만 하면 되었다. input을 받을 이름과 메세지를 적는 칸을 만들고 Tweet버튼과 새 메세지를 확인하는 버튼을 만들고 그 밑에는 이름과 날짜,메세지가 적힌 댓글창으로 구성했다. 네이버와 비슷한 색으로 글씨색(color)을 맞추고, 글자의 폰트를 조절해 주었다...

프론트엔드 개발을 할 때 필요한 HTML과 CSS의 기본 구조와 문법에 대해 배웠다. 레이아웃 구성을 할때 유용한 Flexbox의 개념도 배우고 와이어 프레임도 잡아보았다 주요내용 1.HTML의 기본 구조와 문법 - 자주 사용하는 HTML요소 2.CSS의 구조와 문법 3.페이지 레이아웃 -Flexbox로 레이아웃 잡기 -Flexboxfroggy 게임 4.와이어 프레임 설계 및 목업 구현 1.HTML의 기본 구조와 문법 HTML은 기본적으로 상위요소에 하위요소들이 달려있는 트리구조로 이루어져 있고, 그 요소들은 (태그)로 표현된다. 이때 상대적 상위요소를 부모요소, 바로 뒤 하위요소를 자식요소, 모든 하위요소들을 후손요소라고 한다. 자주 사용하는 HTML요소 Division, Span Image Llink..