[웹 개발 1 주차] 개발일지 3 - 포스팅박스 만들기 실습

08. 포스팅박스를 완성해보자!(강의실습_)

 

 

1. 우선 큰 박스 먼저 만들기

→ 그림자 효과 : box-shadow: 0px 0px 3px 0px gray;

→ 안쪽으로 띄우기 : padding: 20px;

2. 영화 URL

→ Forms 의 Floating Labels 참고

3. 별점 박스

→ Input group의 Custom forms 참고

4. 코멘트 URL

→ Forms 의 Floating Labels의 Textareas 참고

5. 기록하기, 닫기 버튼

→ Button 두 개를 묶을 div를 만들어 display:flex 주기 (네 줄!)

→ Buttons 참고

 

(위에 완성본 코드는 강의 자료에서 확인해서 공부하기)

 

6. 위에 화면을 모바일 처리를 해두자.

- 모바일에서는 "가로 사이즈"가 가장 문제다!

 

* 어디서나 500px 로 맞춰라 (width: 500px)

 

Q) 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px으로 보여줘 라고 할 수 있다면?

 

* width: 95%;

  max-width: 500px;