설리번 프로젝트 웹으로 나만의 명함 만들기! 4차시

수업 목표

XD에서 디자인한 명함의 앞면 실제로 구현하기

수업 내용

지난시간 수업내용 복습
- 지난 시간에 검색하며 직접 찾아본 태그들을 다시 한번 정리해보기
- 실제 명함을 만들어가며 천천히 명함의 틀 꾸며보기

액션

명함 겉모양 만들기 (HTML, CSS 활용)
div로 명함 컨테이너를 만든 뒤 그 내부에 원하는 요소를 넣도록 유도
명함 레이아웃 만들기 (Flexbox)
내용 채우기 (<ul>, <li> tag)
그림자, 테두리 넣어보기 (CSS properties: drop-shadow, border)

액션: 응용

명함 레이아웃을 활용한 틀에 얽메이지 않은 나만의 웹페이지 디자인 구성하고 만들기