오답노트
1. :nth-child(an+b)
b와 an(a의 배수) 를 선택하기 위한 도구.
예를 들어 1번째와 6번째를 선택하려고 한다면
5n+1이라고 쓰면 됨.
2. a태그 아래에 block요소 태그들이 있을 때
display:block을 하지 않으면 개발자도구로 확인했을때 a태그 너비가 잡히지 않는 걸 종종 확인할 수 있다.
(내 경우 매우 이런 경우가 빈번했기때문에 꼭 체크할것ㅠ)
3. position:relative 선언법
absolute를 선언한 바로 위 부모선택자에 relative를 선언해야 제대로 된 위치를 잡는다.
4. li사이에 공간 띄우는 법
지금까지는 li {margin-right:10px;} 쓰고
li:last-child {margin-right:0;}를 많이 썼지만
li + li {margin-left: 10px;}이 훨씬 효율적이다!
5. img에 덮어씌울 ::after 크기 잡는 법
img와 같은 width와 height를 주는 것 보다
top:0; right: 0; bottom: 0; left: 0;를 준다.
그리고 ::after나 ::before같은 가상선택자를 사용할 경우 꼭 content: ''; 을 사용해야 범위가 생긴다.
6. font-size와 line-height
font-size를 쓸 때는 line-height값을 3px ~ 4px정도 더해서 써주면 보기에 좋다.
7. 한줄 말줄임과 두줄 말줄임
1) 한줄 말줄임
white-space : nowrap;
overflow: hidden;
text-overflow: ecllipsis;
2) 두줄 말줄임
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
++ IE나 파이어폭스의 경우, webkit속성이 적용되지 않기 때문에 꼭 max-height속성을 사용하여 line-height의 두배를 잡아주기!
8. 웹접근성 마크업 하는 법
숫자만'1', 또는 '↑(이미지)3(글자)'과 같은 마크업을 할 때는<span><span class="blind">랭킹</span>1</span> <span>3<span class="blind">위 하락</span></span>-과 같이 한다.
