본문 바로가기

html, css/css

(3)
bootstrap 정리 bootstrap https://getbootstrap.com/ CDN links CSS https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css JS https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js color https://getbootstrap.com/docs/5.2/customize/color/ Breakpoints https://getbootstrap.com/docs/5.2/layout/breakpoints/ Spacing https://getbootstrap.com/docs/5.2/utilities/spacing/ ..
bootstrap 기초(반응형 폭 조절) 세계에서 가장 인기있는 HTML, CSS, JS 라이브러리인 bootstrap의 기본적인 사용법을 소개한다. 예시가 있다고 가정해보자. ex) col은 row 안에 넣어서 작성한다. (tr,td 와 비슷한 원리) row = 행 col = 열 여기서 col 뒤에 나오는 숫자는 12칼럼으로 나눠 bootstrap.css로 작성되어있다.(ex에서는 6과 3) 예시이며 같은 방식으로 .col-12 width:100%까지 진행된다. ex)에서 남은 sm은 반응형으로 만들때 쓰는 것이다. sm은 576px 이상에서만 작동하는 의미이다. ex)에서 사용된 .col-sm-3 의 css @media(min-width:576px){ .col-sm-3{ flex: 0 0 auto; width:25%; } }
css 선택자 모음 https://code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 반드시 기억해야 하는 CSS 선택자 30개 여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 중에 다수가 CSS3 명세서에 있으며 모던 code.tutsplus.com https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors CSS 선택자 - CSS: Cascading Style Sheets | MDN CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.CSS 선택자는 CSS..