flexbox2 CSS Layout Float 한 요소가 정상 흐름으로부터 빠져 텍스트 및 인라인 요소가 그 주위를 감싸 요소의 좌, 우측을 따라 배치되어야 함을 지정 본래는 이미지를 한 쪽으로 띄우고 텍스트를 둘러싸는 레이아웃을 위해 도입 ex) 신문 더 나아가 이미지가 아닌 다른 요소들에도 적용해 웹 사이트의 전체 레이아웃을 만드는데까지 발전 float clear - 가상 요소 선택한 요소의 맨 마지막 자식으로 가상(의사) 요소를 하나 생성 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용 기본값은 inline clear 속성 선행 floating 요소 다음으로 갈지 아니면 그 아래로 내려가(cleared)야 하는 지를 지정 clear 속성은 float 및 비 float 요소 모두에 적용됨 일반적으로 bo.. 2021. 8. 30. Bootstrap & Grid box Bootstrap Bootstrap 트위터에서 시작된 오픈 소스 프론트엔드 라이브러리 웹 페이지에서 많이 쓰이는 요소 거의 전부를 내장 별도의 디자인을 할 시간이 크게 줄어들고, 크로스 브라우징(여러 웹 브라우저를 지원하기 위한 것) 시작?! bootstrap 사이트에서 파일 다운로드 필요한 css 및 js파일 working directory 로 가져오기 , js 코드는 태그의 끝 부분에 작성해준다. spacing mt .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } mx .mx-0 { margin-right: 0; margin-left: 0; } mx-auto 수평중앙정렬 py .py-0 { padding-top: 0; padding-bott.. 2021. 8. 30. 이전 1 다음