✍ Today I Learned
- table 마크업을 할 때는 웹 접근성을 준수하여 thead, tfoot, tbody 순서로 작성한다.
- colgroup 요소는 각 행(row)이나 셀(cell)의 스타일을 반복하지 않고, 열(column) 전체에 다른 스타일을 적용하고 싶을 때 사용한다.
- !important를 사용하면 최우선으로 적용된다. 꼭 필요한 경우에만 사용한다.
- 내비게이션 바 만들 때
overflow:hidden; 은 왜 사용하는 걸까? W3School TCPSchool
- currentcolor 키워드를 사용하면 color로 설정한 값을 그대로 사용할 수 있다.
- inherit 키워드는 부모 요소에게 값을 상속받는다는 의미이다.
word-wrap: break-word; 단어가 길면 끊고 다음 줄로 줄 바꿈 한다. (영어만 적용, 한글에는 적용 X)word-break: break-all; 모든 문자에서 줄이 끊어진다. 단어대로 줄 바꿈 하지 않는다. (한글은 자동으로 break-all)- object-fit 속성은 img 또는 video의 크기를 조정할 때 사용한다. (cover와 contain 알아두기)
- pagination 하는 간단한 방법 - a태그 div 태그로 묶어서 전체 inline-block 그리고 a태그는 float: left;
column-count: 3; 이렇게 지정하면 다단 효과를 줄 수 있다.- outline-offset 속성을 이용하면 아웃라인과 보더 사이의 간격을 조정할 수 있다.
- 내비게이션 바를 만들면서 느낀 점들
- 오른쪽 정렬된 내비게이션 바 만들 때
<ul>에 float: right; 그리고 <li>에 float: left; 해줘야 콘텐츠 순서 안 바뀜
- 내비게이션 바에 :hover 효과를 줄 때 backgorund-color가 바뀌는거면 padding 값을 늘리고 font-size가 바뀌는거면 margin값을 늘리고
- 내비게이션 바를 위쪽에 고정하고 싶을 때
position: fixed; 는 뒤따라오는 콘텐츠가 겹쳐지고 position: sticky; 는 공간을 차지해서 컨트롤하기 더 좋음
- 여백 설정할 땐 항상 맞닿은 부분의 수치를 잘 생각하기