728x90
반응형

Language/CSS 2

Grid

그리드 2차원(수평 + 수직) 레이아웃 시스템 Flex와 동일하게 container, item이 필요하다 부모 요소 : Grid Container 자식 요소 : Grid item ​ .item.bgc{요소의 내용 }*갯수 display : grid --> 변화없음 몇개의 컬럼 또는 로우를 만들지 각각의 사이즈는 어떻게 해야할지 정해야한다. ​ repeat(반복횟수, 크기 ​ fr단위(fraction) = 비율, 분수, 부분 minmax(최소 높이, 최대 높이); .container{ display: grid; /*grid-template-columns: 100px 100px 100px;*/ /*grid-template-columns: repeat(5, 20%);*/ /*grid-template-colum..

Language/CSS 2023.07.10

bootstrap

Sass css css전처리도구 자신만의 구문을 가지고 css를 생성하는 프로그램 ​ bootstrap 트위터에서 시작된 오픈 소스 프론트 엔드 프레임 워크 장점 - 웹 페이지에서 많이 쓰이는 대부분의 요소를 내장하고 있기 때문에 bootstrap 관련 사항 설치 후 미리 지정되어 있는 css클래스, javascript함수를 불러와서 바로 사용가능 html과 css에 대한 기본지식만 있으면, 사용하기 쉽다. 반응형 디자인을 지원한다 단점은 html5에 맞춰져 있어, 구형 브라우저 지원이 미흡하다. ​ 부트스트랩 사용방법 1.부트스트랩 파일 다운로드 후, 압축 해제(팀프로젝트 진행시, 사용) 2.cnd(content delivery network) 어딘가에 올려져 있는 css파일을 우리는 링크를 통해 단순..

Language/CSS 2023.07.10
728x90
반응형