220412 강의 정리
강의 전후 질문 정리
1. display: absoulte, fixed 사용시
display: absoulte, fixed를 사용하는 경우 블럭요소이면서 가로너비를 최대한 줄이려는 속성을 가지게 됩니다.- 이 경우 display를 통해 block형태로 변경해도 되지만,
min-width를 사용해 속성변경 없이 배치를 할 수 있습니다.
2. 모듈화 후 html 태그에 작성한 이벤트가 적용이 안되는이유
index.html
<head>
<script type="module" src="./sub.js"></script> //모듈명시
</head>
<body>
<div onlick="setMenu()"></div>
</body> sub.js
import './sub.js'
function setMenu(){
//윈도우에 붙을 수 없는 상태.
}
console.log(this)- 모듈화를 한경우 this 값을 출력해보면 undefined가 확인됩니다. 즉, 모듈화 후에 this는 밖으로 나갈 수가 없기에 undefined가 되는거죠.
- 마찬가지로
sub.js에서 나갈수가 없기에 윈도우 객체에서 참조할 수 있는 이벤트들은 사용할 수가 없습니다. html에 작성된onlick="setMenu()"역시 window객체의 속성을 사용한 것으로 모듈화 후에는 접근을 할 수가 없습니다.
오늘의 강의
1. filter
- 말 그대로 보여지는 것들을 필터링하는 속성입니다. 여기서 필터링이란 카메라로 사진을 찍을 때의 필터 느낌으로 보는 것이 좋습니다.
- 자주 쓰이는 속성(✅) 외에는 필요할 때 찾아봐도 괜찮으니 너무 부담 갖지 않고 공부를 해도 괜찮습니다
- ▶hue-rotate 속성을 이해하는데 참고하면 좋을 사이트
/* <filter-function> 값 */
filter: blur(5px); ✅
filter: brightness(0.4); ✅
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue); x축, y축, blur, 색상
filter: grayscale(50%); ✅
filter: hue-rotate(90deg);
filter: invert(75%); ✅
filter: opacity(25%);
filter: saturate(30%); 채도
filter: sepia(60%); 오래된 사진backdrop-filter가 적용된 예제
2. Grid
- flex가 1차원 레이아웃 구조이었다면 grid는 2차원 레이아웃 구조입니다.
- grid역시 Grid-container과 Grid-items으로 나누어 각각의 영역에서 사용가능한 속성을 구분지어 공부를 하는 것이 좋습니다.
Grid-container
- grid-template-columns: 열의 너비와 개수를 지정.
- fr단위를 통해 늘어나는 비율를 설정해 가변적으로 만들 수 있습니다.
- repeat함수를 통해 조금 더 손쉽게 열과 행을 만들 수 있습니다.
repeat(12, 1fr);
- grid-template-rows: 행의 너비와 개수를 지정.(명시적)
- gap: 셀과 행사이의 간격을 설정할 수 있습니다.
- gap: row column;
- grid-auto-rows : 영역범위 밖으로 넘치는 경우 기본 크기를 결정할 수 있습니다.(암시적)
- row의 경우
grid-template-rows을 잘 안쓰고grid-auto-rows를 쓰고는 합니다.
- row의 경우
- grid-auto-flow: row dense;
- 기본값은 row이며, dense를 추가 작성하는 경우 빈공간 없이 정렬을 합니다.
- row의 경우 row를 생략하고 dense만 작성할 수 있습니다.
- colunm을 쓰는 경우 컬럼순서로 배치를 합니다.
- 기본값은 row이며, dense를 추가 작성하는 경우 빈공간 없이 정렬을 합니다.
※용어정리
Track은 하나의 행또는 열을 의미합니다.
Line은 일반적으로 거터(Gutter)라고 하는 트랙과 트랙 사이의 간격을 의미합니다.
Cell은 아아ㅣ템이 배치되는 최소 단위의 영역(Area)입니다.
Area는 아이템이 배치되는 하나 이상의 셀영역입니다.
Grid-items
- gride-column: span 2;
- item이 차지하는 영역을 column으로 확장할 수 있습니다.
- line번호를 이용하는 방법
- span을 통해 확장하는 방법
- item이 차지하는 영역을 column으로 확장할 수 있습니다.
- gride-row: span 2;
- 추가정리필요
✅grid를 이용한 배치 예시
생각해보기
pinterset 사이트, 벨로그, masony 사이트의 메인페이지를 구성할 때 flex와 grid 중 어떤 배치가 더 효율적일까?
주요 수업 외 tip 모음
- 블로그
- revealjs.com: ppt로 만들 수 있는 페이지
- vue를 배우기 전에 꼭 다져야할 개념
- this
0seo