🎈아래처럼 완성을 할것이다.
https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/web101/week01/10.+%ED%8F%AC%EC%8A%A4%ED%8C%85%EB%B0%95%EC%8A%A4%EA%B9%8C%EC%A7%80.html
조금 더 커스텀 css들이 많이 필요하다.
https://getbootstrap.com/docs/4.0/components/forms/
🎈부트스트랩 form에서 맞는 모양을 찾아논다.
확실한건 만들려는 포스팅박스 위치가 jumbotron과 card-box들 사이에 있어야 할것 같다.
사이에 부트스트랩에서 가져온 form을 넣는다.
여기 나와있는<form>을<div>로 바꿔준다.
나중에 우리가 할 코딩과 안맞는다.
🎈가져온 CSS에다가 내 커스텀 CSS를 먹일거니까
div에 "posting-box"라고 명찰을 달아준다
🎈style에서 지칭을 해주고
우선,가운데로 오게 하고 싶으니
전체 길이를 줄이고 시작을 한다.
width: 500px;
margin: auto;
🎈박스를 만들려면 테두리가 필요하니 구글링 해본다.
전에 로그인페이지를 만들었을때 사용했던 border를 이용한다.
css border w3schools 🔎구글링
css border mdn 🔎구글링
| 🔎구글링🔎 | w3schools | mdn |
|---|---|---|
| 가장 기준이 되는 참고 문서 | 유명 사이트 | 공식 문서 |
🎈테두리 박스를 만들어준다.
border: 3px solid black;
🎈각진걸 10px로 둥글게
border-radius: 10px;
🎈안에서 30px 띄어준다.
padding: 30px;
🎈아래에서 20px 띄어준다.
그런데 이왕이면
margin-bottom: 20px;
🎈위에 더 띄어줄것이 없으니
0px
오른쪽,왼쪽엔 auto
아래엔 20px 해주면 더 좋겠다.
margin: 0px auto 20px auto;
🎈그다음 내부 글자를 바꿔준다.
필요없는건 날려버리고
example textarea form이 필요하니 찾아서 넣어논다.
