본문 바로가기

웹코딩 배우기/· CSS112

grid-area: name; See the Pen grid-area by nilgi (@nilgi) on CodePen. grid-template-areas: 'head head head head'; // head 값 4칸 grid-area: head; grid-template-areas: 'main main . . .'; // main값 2칸 나머지 나열 grid-area: main; 2021. 10. 27.
grid-area See the Pen grid-area by nilgi (@nilgi) on CodePen. • grid-area: 1 / 2 / 5 / 6; // grid-row-start / grid-column-start / grid-row-end / grid-column-end; 순서 • grid-area: 2 / 1 / span 3 / span 3; 2021. 10. 22.
grid-column, row - 아이템 확장 See the Pen grid-column by nilgi (@nilgi) on CodePen. display: grid; grid-template-columns: auto auto auto auto auto; grid-gap: 5px; • grid-column: 1 / 4; // 1에서 시작해 4열의 시작점까지 확장. • grid-column: 1 / span 4; // 1에서 시작해 4칸까지 확장. • grid-column: 2 / span 2; // 2에서 시작해 2칸까지 확장. • grid-row: 1 / 4; // 1에서 시작해 4행의 시작점까지 확장. • grid-row: 1 / span 2; // 1에서 시작해 2칸까지 확장. 2021. 10. 22.
grid-template-columns, rows See the Pen grid-template by nilgi (@nilgi) on CodePen. • grid-template-columns: auto auto auto auto; // 3개를 쓰면 3열, 4개를 쓰면 4열. 오토는 모든 크기 같게. • grid-template-columns: 30px 100px auto 20px; // 열마다 크기 지정 가능. • grid-template-rows: 30px 140px; // 행 높이 지정. 2021. 10. 20.
반응형 레이아웃을 좀 더 쉽게 - display: grid; See the Pen display: grid by nilgi (@nilgi) on CodePen. display: grid; // 사용하면 반응형 페이지를 쉽게 만들수 있다. grid-template-columns: auto auto auto; // 3열, 화면 크기에 맞게 자동으로 모두 똑같이 • grid-column-gap: 30px; • grid-row-gap: 30px; • grid-gap: 20px 40px; • grid-gap: 5px; // 아이템 간격 • grid-column-start: 1; • grid-column-end: 3; • grid-row-start: 1; • grid-row-end: 3; // 아이템의 시작점과 끝점을 지정 - 표의 셀 병합과 비스무리. 2021. 10. 20.
viewport 정의 viewport는 무엇입니까요? 우리가 보는 영역이다. 화면 크기에 따라 보이는 영역 또한 다르다. PC화면, 폰화면에 따라 크기가 달라야 한다. 옛날에는 PC화면으로만 보면 됐는데 지금은 다양한 디바이스가 있기 때문에 크기를 해결하기 위해 viewport가 개발되었다. 티스토리의 반응형 스킨 같은 거다. ↪ width=device-width // 화면 너비에 따라 콘텐츠 너비를 설정한다. ↪ initial-scale=1.0 // 처음 로딩시 확대, 축소 수준을 설정한다. 다음을 지켜야 한다. • 너비가 큰 요소를 사용하지 마라. 영역보다 큰 요소를 사용하면 가로 스크롤이 생길 수 있다. 가로 스크롤은 화면이 작은 디바이스에서 보기 아주 불편하다. • 특정 디바이스의 화면 크기로 만들지 말라. • CSS.. 2021. 10. 20.
align-self / 아이템 하나의 세로 위치 See the Pen align-self by nilgi (@nilgi) on CodePen. display: flex; • align-self: center; // 지정한 아이템 세로 위치 중앙에 • align-self: flex-start; // 지정한 아이템 세로 위치 위에서 시작 • align-self: flex-end; // 지정한 아이템 세로 위 아래에서 시작 2021. 10. 15.
flex 아이템 속성 / order, grow, shrink, basis, 속기 See the Pen flex item by nilgi (@nilgi) on CodePen. ▸order: 순서 / 아이템의 순서를 재설정. ▸flex-grow / 아이템 크기를 비율로 지정. ▸flex-shrink / 아이템을 컨테이너 크기에 맞게 축소하지 않는다. ▸flex-basis / 지정값을 무시하고 다시 지정. ▸flex: 0 0 200px / 속기. flex-grow + shrink + basis 2021. 10. 15.
justify-content + align-items 이용해 아이템 중앙에 놓기 See the Pen flex center by nilgi (@nilgi) on CodePen. display: flex; justify-content: center; // 가로 중앙 align-items: center; // 세로 중앙 flex로 하니까 어렵네. 2021. 10. 13.
align-content See the Pen align-content by nilgi (@nilgi) on CodePen. display: flex; flex-wrap: wrap; • align-content: space-between; // 세로 기준 양끝에 나열 • align-content: space-around; // 아이템 세로 공간 똑같이 • align-content: stretch; // 컨테이너 크기만큼 늘려서 • align-content: center; // 중앙에 • align-content: flex-start; // 위에서부터 시작 • align-content: flex-end; // 아래부터 시작 2021. 10. 13.