웹개발 종합반 1주차 (1-11) : Quiz - 나만의 메모장 - 포스팅 박스 완성

 

주소와 코멘트 입력, 저장하면 카드로 생성되는 form

부트스트랩 > forms에서 찾아보기.

*참고 : <form></form> 태그는 <div></div>로 바꿔서 사용

(정확한 이유는 모르지만 자유롭게 쓸 수 있는 div 태그로.)

posting-box 이름 붙이고 css.

border-color가 있길래 적용해봤지만 무반응.

자동완성에서 이것저것 찾아봐도 잘 모르겠다. 그래서 구글링.

바깥 선 색이니까 outline color로 검색

대충 맞는 것 같아 적용해보니 이것도 무반응.

답을 확인해보니 검색어는 css border.

 

번역기 돌려보니까 테두리는 border.

outline은 윤곽, 개요로 뉘앙스가 좀 다르다.

 

검색할 때 참고하기 좋은 대표 사이트 2개.

 

[1]  MDN mozilla (css border)

https://developer.mozilla.org/en-US/docs/Web/CSS/border

border - CSS: Cascading Style Sheets | MDN

 

 

[2]  w3 schools (css border)

https://www.w3schools.com/css/css_border_color.asp

 

비교해서 적용해보기.

---

mdn 설명을 보니

border : 이걸로 한 번에 3가지 속성을 쓸 수 있다.

포스팅 박스의 아래가 카드와 너무 붙어있다.

 

margin이나 padding은 시계방향으로

위 오른쪽 아래 왼쪽 순서대로 연속 입력 가능.

 

ex )   margin : 0; auto; 20px; auto; 

이렇다는데..  이상하게 먹길래 왜이러지 했더니만

중간중간 ; 계속 붙여줘서 ㅋㅋㅋ

0 0 0 0 이런식으로 써야하는데 습관적으로 0; 0; 0; 0;... 이렇게.

글씨 바꾸고 필요없는 글 삭제. 그런데

비밀번호 부분은 가려져서 표시되고, 두께도 얇다.

부트스트랩 Forms에서 적당한거 찾아서 갈아끼우기.

포스팅 박스 완성~