부트스트랩

개발자 도구를 통해 브라우저의 사이즈 조정 가능하다. (부트스트랩은 기본적으로 반응형 웹이다.) 부트스트랩 접근 2가지 방법 파일을 로컬에 저장해서 접근하는 방법 파일을 네트워크 경로로 저장하는 방법 부트스트랩을 적용하면 많은 리소스를 가져오게 된다.                  부트스트랩5는 모바일 우선이다. 부트스트랩의 사이즈는 픽셀 단위가 아니라 0~5단위로 구성되어 있다. 부트스트랩에서 각가의 div에 mb-5, mt-5로 설정할때 한개의 마진만 설정이 된다. My First Bootstrap Page Resize this responsive page to see the effect! Column 1 ..

CSS Box ModelContent(내용) - 텍스트와 이미지가 나타나는 상자 내용Padding(패딩) - 콘텐츠 주변에 투명한 영역을 만들어 border과 content사이에 여백을 추가하는 역할border(경계, 테두리) - padding과 content를 둘러싸는 테두리Margin(여백) - border 외부에 투명한 영역을 만들어 요소와 다른 요소 사이의 간격을 조정⭐ CSS로 요소의 너비와 높이 속성을 설정할때는 Content 영역의 width와 height만 설정하면 된다. 요소의 전체 width와 height를 계싼하려면 padding과 border도 포함해야한다. 요소의 총 너비는 350px이고 총 높이는 80px이다.div { width: 320px; height: 50px; pa..

버튼을 다루는 작업에서는 항상 btn 클래스가 사용된다. Primary Primary 오른쪽이 전형적인 버튼인게 부트스트랩 버튼과 다른 것을 파악할 수 있다. 기본 값으로 설정된 색상들이다. 중요한것은 시맨틱! 의미가 중요하다! (부트스트랩의 주요 컬러는 보라색 같은 의미가 중 요한 것이다.) 다 바꿀 수 있는 빌트인 옵션이다. 중요한것은 레이블과 용어 뒤에 있는 의미이다. Primary Primary Primary btn btn 뒤 시맨틱 컬러를 쓴 구문을 다양한 형태로 만들었다. Primary Success Info type="button" 속성은 제출이나 재설정 버튼이 아니라 그냥 기본값으로 지정된 동작이 없는 버튼이다. Outline 변형도 할 수 있다. 실제 클래스 이름은 다르다. btn은 같지..

CDN 콘텐츠 전송 네트워크 혹은 배포 네트워크를 나타낸다. 이는 원격으로 접근할 수 있는 스타일 시트의 호스트 버전이다. 컴퓨터에 다운할 필요가 없다. 옆의 링크를 복붙하면 실제 웹사이트로 이동하는 href도 있는데 해당 URL로 이동할 수 있다. 매우 큰 스타일시트의 압축판이다. 공백을 포함한 모든것이 제거되어 있다. 복사한 내용을 헤드에 넣어보겠다. 이렇게 넣으면 부트스트랩이 원상태로 돌리거나 덮어쓰질 못한다. Placeholder Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias omnis excepturi aliquam ea ut earum officia illum eligendi tempore quam ab dignissimos, ..