Framework | Library/Bootstrap

[Bootstrap] Horizontal alignment(text-center, d-flex, justify-content)

text-center 텍스트를 중앙에 배치하려면 상위요소에 .text-center 클래스를 추가한다. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Recusandae nihil hic delectus excepturi ipsam reprehenderit iusto rem, quam, repellendus accusantium culpa reiciendis sit dolorum aut aperiam a architecto. Fuga, sit. 이미지의 상위 요소에 .text-center 클래스를 추가하여 이미지를 중앙에 배치할 수도 있다. 버튼의 부모 요소에 .text-center를 추가하면 버튼도 중앙에 배치한다. Primary flexbox를 ..

[Bootstrap] (m, p, t, b, l, r, x, y),(0, 1, 2, 3, 4, 5, auto),(n1, n2, n3, n4, n5), (xs, sm, md, lg, xl, xxl)

박스모델(Box model) HTML의 element들은 (사각형 모양을 의미하는)박스의 형태를 가지고 있는 것을 말한다. 박스의 크기와 박스간의 간격을 정의하는 다양한 속성이 있다. margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음. border : 박스의 테주리 padding : 테두리와 content간의 간격 content : element 안에 포함되는 컨텐츠 M / P M : Margin P : Padding t, b, l, r, x, y t : top b : bottom l : left r : right x : x축 → left, right y : y축 → top, bottom 0, 1, 2, 3, 4, 5, auto 0 : 0 1 : .25rem(font-si..