본문 바로가기

웹코딩 배우기/· CSS140

반응형 레이아웃을 좀 더 쉽게 - 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.
align-items : flex 아이템 세로 정렬 See the Pen align-items by nilgi (@nilgi) on CodePen. display: flex; • align-items: flex-start; // 아이템의 세로 정렬 위치 위 • align-items: center; // 중앙 • align-items: flex-end; // 아래 • align-items: stretch; // 아이템을 컨테이너 높이만큼 늘리기 • align-items: baseline; // 아이템 중앙을 기준으로 나열 2021. 10. 8.
flex-flow See the Pen flex-flow by nilgi (@nilgi) on CodePen. flex-flow = flex-direction + flex-wrap flex-flow: row-reverse wrap; 2021. 10. 8.
justify-content 항목 위치 See the Pen justify-content by nilgi (@nilgi) on CodePen. • justify-content: flex-start; // 기본값. 왼쪽 • justify-content: center; // 가운데 • justify-content: flex-end; // 오른쪽 • justify-content: space-around; // 항목공간 똑같이. 첫항목 왼쪽과 끝항목 오른쪽에 공백 들어감. 항목 기준. • justify-content: space-between; // 항목사이 공간 똑같이. 첫항목 왼쪽, 끝항목 오른쪽에 공백 없음. 컨테이너 기준. 2021. 10. 6.
flex-wrap 아이템 래핑 정렬 See the Pen flex-wrap by nilgi (@nilgi) on CodePen. display: flex; • flex-wrap: nowrap; / 기본값. • flex-wrap: wrap; / 아이템을 래핑하여 크기를 유지하고 창 사이즈에 따라 위에서부터 차례로 정렬 • flex-wrap: wrap-reverse; / wrap의 반대 방향으로 정렬 반응형 웹페이지를 만들 때 유용. 2021. 10. 6.
flex-direction; flex 아이템 나열 방향 See the Pen flex-direction by nilgi (@nilgi) on CodePen. flex-container안 item들의 방향을 설정한다. • flex-direction: column; // 위부터 1번 시작 • flex-direction: column-reverse; // 아래부터 1번 시작 • flex-direction: row; // 왼쪽부터 1번 시작 • flex-direction: row-reverse; //오른쪽부터 1번 시작 2021. 10. 1.

티스토리툴바