목록Web /bootstrap (5)
알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
기본폼 이메일 주소 암호 파일 업로드 여기에 블록레벨 도움말 예제 입력을 기억합니다 제출 주의점 Form group 과 input group 을 직접 같이 쓰면 안됩니다. 대신, input group 을 form group 내에 넣도록 하세요. 인라인 폼 한줄에 폼을 표시하는 것입니다. Name Email Send invitation 주의점1. 너비를 자동으로 맞추기게 되어 있습니다. with:100% 와 width:auto; 로 초기화하여 사용합니다. 사용하는 화면에 따라 맞춤너비가 필요할수도 있습니다. 2. 항상 라벨을 추가해야합니다. 그렇지 않으면 폼에 문제가 생길수도 있습니다. 하지만 라벨을 숨기는 방법은 있습니다. .sr-only 클래스에 sr-only 을 주면 라벨을 숨길수 있습니다. 그리고 ..
지금 부터 부트 스트랩 코드는 기본 코드는 기본 코드 를 바탕으로 body 만 작성 하겠습니다. 정렬 클래스 좌측정렬된 텍스트.중앙정렬된 텍스트.우측정렬된 텍스트.양쪽정렬된 텍스트.그냥 텍스트. 변형 클래스Lowercased text.Uppercased text.Capitalized text. 기본 테이블 Optional table caption. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter 줄무늬 테이블 Optional table caption. # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 ..
그리드 시스템 일단 간단한 샘플 코드를보면서 설명하는게 이해하기 좋을듯 합니다. Hello, world! .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-8 .col-md-4 .col-md-4 .col-md-4 .col-md-4 .col-md-6 .col-md-6 위 그림에서 보면 그리드에서 cod-md-1 최대 12열로 표현 합니다. md-8 은 8개를 합친 것이고 md-4는 4개를 합친것입니다. row은 줄을 의미하구요 부트 스트랩 공식 사이트에서 설명부트스트랩은 기기나 뷰포트 크기가 증가함에 따라 12 열이 적절하게 확대..
bootstrap 기본 코드 작성하기 처음에는 간단히 설치하고 넘어가는 방법으로 하겠습니다. 부트 스트랩은 코드를 웹서버로 지원해주는 서비스가 있습니다. 인터넷의 환경이라면 따라 설치를 안하고 써도 기본적인것들은 사용할수 있다는 것이죠 . 부트스트랩 CDNMaxCDN 의 사람들은 고맙게도 부트스트랩의 CSS 와 자바스크립트를 CDN 으로 지원합니다. 이를 사용하려면 아래의 부트스트랩 CDN링크들을 사용하세요. 위 내용은 추후 html 기본틀에서 bootstrap을 적용할때 사용됩니다, bootstrap 사이트 기본 예제코드 Hello, world! 나와 있지만 저는 처음에는 CDN 을사용하기 때문에 코드를 약간 수정해 줘야합니다. Hello, world! 위의 코드를 기본으로 해서 예제들을 보면서 학습 ..
bootstrap 부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.[네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과) 위 설명에서 보듯이 html,css,javascipt 를 이용해 개발자의 개발을 도와주는 프래임 워크 입니다. 개발자가 직접 디자인 와 반응형 웹을 위한 코딩 그리고 서버쪽 코딩 클라이언트 코딩 너무 일이 많기때문에 그러한 어려움을 해결하기 위해서 나오는것이 프래임 워크 입니다. 그리고 bootstrap 은 많이 사용되고 훌륭한 open source 기반 프레임 워크 입니다. 차근 차근 ..