[BootStrap] 부트스트랩 사용해보기

🍕BootStrap 이란? 

• 간단히 말하면 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다. 
• 오픈 소스 프론트엔드 프레임워크이다. PC용 디자인 뿐만아니라 태블릿이나 스마트폰 같은 모바일용 디자인을 반응형으로 한번에 지원한다. 여러 웹 브라우저를 지원하기 위한 크로스 브라우징 걱정 X
• 부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크다.

https://getbootstrap.com/docs/5.0/components/card/

Cards

위의 공식홈페이지를 가면 미리 만들어진 card에 관련된 여러 예시들과 코드가 있다. html파일에 원하는 위치에 복사한 코드를 붙여넣기하면 적용된다. 

card

🍔이메일 입력창 

부트스트랩 Docs(기본) -> Forms -> Floating labels 

 

🍔별점 박스 

Forms -> input group의 custom forms 참고

🍔코멘트 URL

Forms -> Floating Label의 Textarea 참고

 

🍔기록하기, 닫기 버튼

Button 두 개를 묶을 div를 만들어 dixplay: flex를 주기(네 줄,

display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;

) 

Componenets -> Button 참고

---

🍕div size 조정시 TIP

• <div> tage에 사이즈를 줄 때는 background color를 속성으로 줘서 육안으로 확인할 수 있게 하는게 사이즈를 맞추기에 좋다. 

🍕div box CSS TIP

-> 그림자 효과

box-shadow: 0 0 3px 0 gray;

-> 안쪽으로 띄우기

padding: 20px;

-> 중앙 정렬

//위의 공간을 조금 띄우고 싶다. 하면 20px  auto 0 auto 4개 값을 각각줘도 됨
margin: 20px auto 0 auto;

-> 색을 투명하게 주는 속성

background-color: transparent;

-> div class="wrap"으로 전체를 감싸는 container를 만들었을 때, 자식요소 혹은 내용물을 정렬하기

• 부모 요소에 속성을 주는 것임 자식 요소에 주는 것이 아님 그래서 wrap에 아래의 4가지 속성값을 준다.

/*자식 요소들(내용물)을 정렬하는 방법: 4가지 요소가 세트!
외울필요 없이 거의 세트라고 생각하고 column to row 정도만 바꾼다*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

->⭐모바일 처리하기 (container에 width값을 아래와 같이 준다.) 

• 확인하는 법은 크롬개발자 도구를 통해 가능하다. 
• point는 max-width값을 px로 주고 기본 width값은 95%(퍼센트)로 주는 것이다.

max-width: 1200px;
width: 95%;

---

 

이모티콘 관련 링크 

https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

• win + . 를 통해서도 이모티콘을 넣을 수 있지만 더 다양한 이모티콘을 원한다면 위의 사이트에서 찾아오자.