웹개발 Week1

웹페이지 html 파일 작성 시

1. head body div 구조를 먼저 작성
2. div별 style css 적용
3. div별 정렬 맞추기
4. script 필요 시 추가

=============
homework.html 시

body구조는 타이틀, 코멘트로 구성

• 타이틀
  - login.html 에서 응용하기
• 코멘트
  - 코멘트 UI는 부트스트랩에서 복사하기
  

막혔던 부분은 My post에서 닉네임과 코멘트 간 텍스트 박스 간의 간격을 20px씩 margin 적용하는 것, quote로 복사해온 card간 margin 20px 간격을 두는 것이었다.

mypost > 텍스트 박스간 간격은 다시 index.html을 확인해보니 부트스트랩에서 복사해온 코드에서 해결을 해야했다. mb값을 3으로 적용하여 코드 수정하니 간격이 생성되었다.

<div class="form-floating mb-3">

card간 간격은 sytle태그 내에서 아래 코드를 추가하여 생성 완료

.wrap > .card {
          margin-top: 10px;
          margin-bottom: 10px;

mt, mb등의 약어는 아래 부트스트램 > spacing 정리 페이지에서 용어가 뜻하는 바를 알 수 있었다.
https://getbootstrap.com/docs/5.0/utilities/spacing/

1주차라 쉽게 봤는데, 은근 숙제하는 데 시간이 걸렸다.