Web/CSS

[CSS] Grid 함수, 단위

Grid Functions 그리드에서 사용하는 주요함수들 repeat : 행/열의 크기 정의 반복 .container{ grid-template-columns: 100px 100px 100px 100px 100px 100px 100px 100px 100px; grid-template-columns: repeat(9, 100px); } minmax : 행/열의 '최소/최대 크기' 정의 .container{ grid-template-columns: minmax(100px,1fr) minmax(200px, 1fr); /*첫번째열 최소최대, 두번째열 최소최대*/ } fit-content : 행/열의 크기를 그리드 아이템이 포함하는 콘텐츠 크기에 맞추되, 내용의 최대 크기를 설정 minmax(auto,max-co..

[CSS] Grid - items 속성

grid-row : grid-row-start와 grid-row-end의 단축 속성 grid-column : grid-column-start와 grid-column-end의 단축 속성 사용법 (grid-column도 똑같다) .item{ grid-row: / ; } .item{ grid-row: 2 / 5; grid-row: 2 / span 3; /* 윗줄과 동일 */ } .item{ grid-row: 1 / 4; grid-row: span3 / 4; /* 윗줄과 동일 */ } grid-area : grid-row-start와end, grid-column-start와 end의 단축속성 grid-template-areas가 참조할 영역 이름을 설정할 수 있다. *영역 이름을 설정할 경우 grid-row, ..

[CSS] Grid - Container 속성

Flexible Box -> 1차원 레이아웃 Grid: 2차원 (행과 열)의 레이아웃 시스템 제공 파이어폭스 브라우저를 사용해 테스트 추천. 개발자도구를 활용하면 그리드를 이해하기 좋음. Grid : 2차원 (행과 열)의 레이아웃 시스템 제공 Flex 같이 Container와 item으로 구분되어있다. *CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈이다. display 값 의미 기본값 grid Block 특성의 Grid Container를 정의 inline-grid Inline 특성의 Grid Container를 정의 grid-template-rows : 행의 크기 정의 grid-template-columns : 열의 크기 정의..

[CSS] Flex - Items 속성

Flex Items 속성 의미 order Flex Item의 순서를 설정 flex flex-grow, flex-shiringk, flex-basis 의 단축 속성 flex-grow 증가 너비 비율 flex-shirink 감소 너비 비율 flex-basis (공간 배분 전)기본 너비 algin-self 교차 축에서 Item의 정렬 방법 order : item의 순서를 숫자 순으로 지정(음수 허용, 기본값 0) flex-grow : Item의 증가너비를 숫자-비율로 설정(기본값 0) ex) 1:2:3 => 100px, 200px, 100px *item이 가변너비가 아니거나, 0일경우 효과 없음 *요소의 고정너비가 적용되어있는경우에는 완벽한 비율로 설정되지는 않음 예제( 하나는 고정하고 다른 하나는 유연하게 ..

[CSS] Flex - Container 속성

before : flat, table tag, display: inline-block 수평 정렬 => 대체방법에 가까움. 완벽하지 x inline-block 사용 예제 item 자체가 inline 화 되었기 때문에 에서 사이의 엔터키 친게 띄워쓰기로 인식되어서, 이렇게 item 들 사이에 간격이 생긴다 부모요소에서 font-size를 0으로 설정해 간격을 없애고, item에서 원하는 font-size를 재설정해야하는 번거로움이 있다. float 사용예제 ( 수평정렬에 특화된 속성은 아니라 일종의 대체제 였다) .clearfix::after{ content: ""; display: block; clear: both; } .container{ border: 2px solid red; } .container ..

[CSS] 애니메이션 & 다단

animation(애니메이션) : 요소에 애니메이션을 설정/제어 애니메이션을 직접 만들어주는 속성이 아니라 @keyframes 규칙에 설정된 애니메이션의 정의를 설정/제어. 단축속성. *단축속성 작성 시 duration delay 순으로 입력해야함 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니메이션의 지속시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니메이션의 대기 시간 설정 *음수사용가능 0s animation-iteration-count 애니메이션의 반복 획수 설정 1 animation-direction 애니메이션의 반복 방향 설정 normal ..

[CSS] 전환&변환

transition(전환) : CSS 속성의 전환 효과를 지정 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션. 단축속성. 바뀌기 전 상태에 지정 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 설정 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전환 효과가 몇 초 뒤에 시작할 지 대기시간 설정 0s *타이밍 함수: 전환효과의 여러가지 애니메이션? *1s=1000ms *단축속성 작성 시 duration delay 순으로 입력해야함 일반적으로 property와 duration 개별속성을 합친 transition 단축속성을 많이 사용한다 t..