CSS

8. Grid 1) grid ✔ grid의 개요 웹페이지를 위한 2차원 레이아웃 시스템이다. 행(row)과 열(column)이 존재함 gutters(gap) ✔ container : display flex와 마찬가지로 외부 container와 내부 item이 있다. ✔ container : grid-template-rows, grid-template-columns 몇 개의 행, 열을 가질 것인지 설정한다. 단위 값을 명시 해줘야함 명시한 값의 개수만큼 자리 차지함 fr : 대비되는 비율 repeat(반복할 횟수 n, 값 명시) : 반복 함수 .container { grid-template-rows: 1fr 1fr /* 2개의 행 */ grid-template-columns: 100px 100px 50px..

7. Flexbox 1) flexbox ✔ flexbox의 개요 1차원 직선의 형태로 요소를 정리하기 위함 부모 자식 관계가 성립 되어야 적용할 수 있음 ✔ 용어 - flex container, flex item, main axis, cross axis flex container : 아이템을 감싸는 부모 영역 flex item : 내부 정렬을 위한 요소들 main axis : 주축, 가로로 흐름 cross axis : 교차축, 세로로 흐름 ✔ container - display 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정한다. 바깥쪽 : block, inline...외부 요소와의 관계 정의 안쪽 : flex, grid...내부 아이템 레이아웃 정의 i..

CSS 변형과 전환 1) transform ✔ transform(변형) 개요 요소에 회전, 크기 조절, 기울이기, 이동 효과 등을 부여할 수 있다. transform-function 요소에 적용할 하나 이상의 CSS 변형 함수 변형 함수는 왼쪽에서 오른쪽으로 곱해짐 ✔ 크기 - scale x, y, z축 비율 설정 가능, 원래 공간은 계속 차지함 ✔ 회전 - rotate angle 자료형 deg - degree(도) turn - 바퀴 rotate - 각도만큼 회전 시킴 음수값도 가능 ✔ 이동 - translate (0, 0)을 기준으로 얼만큼 이동시킬지 결정한다. ✔ 기울이기 - skew deg, 다른 속성과 달리 값을 하나만 입력하면 x축에만 적용된다. ✔ 기준점 - transform-origin 기준..

5. 레이아웃과 색상, 배경 1) 레이아웃 ✔ display - inline, block, inline-block inline 영역의 크기가 내부 콘텐츠 크기로 정해짐 margin, padding의 top,bottom을 지정 못함 요소가 가로로 배치 됨 block 영역의 크기를 width와 height로 지정할 수 있음 width를 지정하지 않으면 가로로 전체를 차지함 요소가 세로로 배치 됨 inline-block 대표적으로 input이 있음 block처럼 width, height 크기를 지정할 수 있음 inline처럼 가로로 배치 됨 display 속성을 통해 변경 ✔ 요소를 없애는 방법 - display none, visibility hidden display none : 요소 자체를 사라져 버리게 ..

4. Box model CSS 박스 모델 ✔ 박스 모델이란? 웹 페이지는 여러 박스로 구성되어 있다. content: 콘텐츠가 표시되는 영역 padding: 콘텐츠와 테두리(border) 사이 여백 border: padding과 margin 사이 테두리(default = 0) margin: 가장 바깥 쪽 레이어 콘텐츠와 패딩, 테두리를 둘러며 해당 박스와 다른 요소 사이 공백 역할 ✔ 크기 - width, height content의 크기 지정 defalut: auto 상속되지 않음 블록 요소에만 적용됨!! 인라인 요소에 적용 하려면 display 값을 block 또는 inline-block으로 바꿔줘야 함 ✔ 크기 - max-width, min-width, max-height, min-height 특정..