2주차 6day(가 아니지 6번째 이지만, 편의상^^) 가 시작되었다!
⎮ Flex remind !
1) Cross Axis 에 대한 이해가 쉬워지는 img(수업이 끝나고 디자이너분이 직접 만들어주셨다)
2) justify-content |align-items 도 한 눈에 알 수 있는 img
3) align-items:center : line - line 사이 유지하며 가운데로
align-content: center; 무조건 가운데로 몰아라
flex:wrap; 감싸서 줄이 떨어짐 (줄바꿈)
(HTML에서
로 줄바꿈 금지합니당 ㅎㅎㅎㅎ;)
4) flex-basis
: flex item들의 크기를 특정함. axis 방향에 따라서 커지는 방향이 달라진다.
이 값이 적용되어 있으면, width- height 값은 적용되지 않아요!
5) flex-grow | flex-shrink
: 자식요소에 사용하고
- flex-grow: 1 → 자식이 모두 동일한 비율로 공간을 할당받음
3개 박스 중 1개의 박스만 변경도 가능!
(flx-grow: 1;
flex-grow:2;) - flex-shrink: width 크기가 줄어도 비율을 유지하며 더이상 줄어들지 않도록!
6) align-self
: 개별 align-item의 속성을 바꿀 때 사용 (위치 변경)
7) order
: flex-item 들의 순서를 결정.
수의 의미로 순서를 결정하지 않고 수의 크기로 결정!
수가 작을 수록 더 우선 순위를 부여 받는다. (음수도 사용이 가능.)
⎮ Grid
1) 100px넓이의 3개박스를 만든다. (한줄에 3개)
grid-template-columns: 100px 100px 100px;
2) 똑같은 넓이로 3개의 박스를 만든다.
grid-template-columns: repeat(3, 1fr)
3) 셀의 높이
grid-template-rows: 1fr 1fr 1fr;⎮ 영화목록 페이지 만들기 실습을 했다!
⎚ 오늘의 기억해야 하는 팁
1) padding 값이 0 이면,
list의 dot 표시가 사라진다!
2) CSS 작성 시 ul>li class로 되어 있을 경우에는 부모와 자식 관계를 명시해 주면서 작성하는 것이 유지보수에 좋다!
3) 변경되는 image는 <img> 고정되는 이미지나 아이콘의 경우에는 background-image 사용
4) sr-only 스크린 리더만 읽을 수 있도록 태그들을 뺄 수 있다. (heading으로 시멘틱 하게 작성하고 sr-only로 빼면 아주 시멘틱 하겠지! )
5) Copyright 는 small 태그로 작성
6) 중앙 정렬은 margin{ 0 auto };
Memoir
멋사 정말 친절하다 !
아무도 포기하지 못하도록 만든 과정인 것 같다.
사실 개인적으로 너무 좋은 과정이다. . ^^
오늘은 실습 프로젝트를 같이 만들어보는 과정을 거치면서 훨씬 정리가 잘 되었다!
CSS 작성 보다 시멘틱하게 HTML 작성하는 게 여전히 어렵다.
이번주는 기계처럼 홈페이지 HTML을 작성 할 수 있도록 수련해야지 ^^
