[TIL] 211108
느낀점
- 이제 슬슬 체력의 한계가 오는 느낌이다. 1주일동안 가득했던 기운은 카페인을 증가시키면서 메우고 있다. 아프지 말아야 할 텐데 걱정이 크다.
- 계속 마크업을 하니 마크업이 매우 익숙해지고 자신감이 생기는 것 같으면서 또 자바스크립트가 그립다. 아마 내일부터 새로운 프로젝트를 병행하지 않을까 싶다. 드디어 내가 미친게 아닌가
- 확실히 스크린리더기를 생각하는 접근성 좋은 코드를 짜야하고, html요소가 최대한 적은 마크업을 하는 것이 중요한 것 같다. 아직 css를 깔끔하게 만드는 것은 완벽하지 않은 것 같다. 완벽이란 있을 수 있는지는 모르겠지만 말이다.
- 아무튼 교육받는게 요즘 너무 행복하다.
배운점
- align-items의 default는 stretch다. 이는 cross-axis를 기준으로 정렬된다.
- align-contents는 items와는 달리 여러줄일떄 사용이 가능하다. 줄 간격 무시하고 완전 가운데로 모으고 싶다면 사용한다.
- html에서 br태그를 사용하지 말자. html태그를 하나라도 줄이는 것이 프로다운 모습이다!
- Flex-basis는 flex item들의 크기를 특정한다. 이 속성이 적용 돼 있다면 width, height값은 무시된다. 크기와 상관 없이 메인 축의 방향으로 요소의 넓이를 정하기 때문이다.
- item에 order를 주면 순서를 바꿀 수 있다. 값이 작을 수록 첫번째에 온다. 위치를 지정하지 않고 우선순위이다. 음수값을 주면 디폴트들보다 앞으로 간다. 그러나 실무에서 쓰지 않는 속성이라고 한다.
- flex로 요소들을 배열하다가 1 1 1 / 1 1 1 / 1 1 이런식으로 배열 되는 경우가 있다. justify content를 쓰면 마지막이 늘어나서 가상요소로 자리를 메워 왼쪽 정렬을 하는 것 처럼 보이게끔 한다. 하지만 이런식보다는 그리드를 쓰는게 낫다고 한다.
- grid-area는 grid-cell의 집합임. 그리드는 아이템의 넓이를 강제하지 않는다. 그래서 늘어나는 것이다. 자식들 속성을 억제하지 않는다.
- grid는 container를 꽉꽉 채우려고 하는 특징이 있다.
- fr: fraction. 비율이라는 말이다. 예전에, fr이 아닌 그냥 1 1 1 이렇게 사용하곤 했는데 그런 방식은 없다고 한다?! 비율을 지정할거면 1fr을 쓰면 된다. %를 쓰는 것과 다른 점은, %는 grid-gap을 생각하지 않아서 필요하지 않은 스크롤이 생긴다.
- 선이 아닌 칸 기준으로 설정하고 싶으면 grid-row: 1 / span 3과 같이 사용하면 된다. 이는 1 / 4와 같다.
- main 태그는 익스플로러 9 에서 지원이 안된다.(지원하기 싫다)
- section이나 article안에는 heading요소가 있어야 한다. footer 내부에는 heading을 주지 않는다.
- dt나 heading들이 눈에 보이지 않는다고 해도 스크린리더기를 위해 그냥 적는다. 이를 숨김처리 하면 된다. 아래와 같이 적용한다.
.sr-only {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
- footer 제일 아래의 copyright 태그는 보통 small 태그를 사용한다.
- 두 부분을 구분하는 것은 hr태그를 사용하는 것도 아니며 border-bottom을 사용하는 것도 아니고 가상요소를 사용하곤 한다.
- dl태그 안에 유일하게 자식으로 가질 수 있는 태그가 div이다.