210924 필기내용

border

• border-style : soild || dotted || dashed || ridge
• `.b_02 { border: 10px dotted #fa0; }` : 한줄로 사용 가능 / width, style, color 순서
• `{box-sizing: border-box;}` : border 까지 박스 안쪽으로 넣어서 정해진 크기로 만듦
• `{background-clip: content-box;}` : border가 박스 밖에 생김 (padding 적용시키면 border와 내용물이 그만큼 떨어짐)
• `{background-clip: padding-box;}` : content와 같지만 padding도 내용물과 같은 색으로 처리
• background-clip: border-box || padding-box || content-box || inherit
  • inherit : 부모가 갖고 있는 속성을 따라감
• .b_05 { border: 5px soild #fac; border-top: 4px dashed #aff; border-left-color: #afc; border-right-width: 10px; border-bottom-width: 0; } 사방에서

outline

• 기본적으로 focus 잡혔을 때 테두리
• margin, padding에 영향을 주지 않음

nth 선택자

• `클래스명:nth-child() {}` : (숫자) 클래스 내부의 숫자의 자손을 선택하는 것
  • css이기 때문에 숫자 그대로 순서 // js는 1이 두 번째
  • (odd) / (2n-1) : 홀수
  • (even) / (2n) : 짝수
  • (2n+1) : 두 개 중 첫 번째 꺼 / (3n+1) : 세개 중 첫번째꺼
  • `클래스명:first-child {}` : 첫 번째는 nth 대신 first 사용할 수 있고 () 생략
  • `클래스명:last-child {}` : 마지막은 nth 대신 last 사용할 수 있고 () 생략
• `클래스명:nth-last-child() {}` : 뒤에서부터 (숫자) 번째 선택
• `:nth-child(n+4):nth-child(-n+8)` : 4번째부터 8번째까지**뒤에 n은 - 붙임**
  • `:nth-child(n+4)` : 4번째부터 전부 다
  • `:nth-child(-n+8)` : 8번째까지 전부 다
  • `:nth-last-child(-n+3)` : 뒤에서부터 3번째까지
• `dt:nth-of-tyle(2)` : dt 중에서 2번째 (클래스 명 안 먹음/ dt 같은 타입을 써야 함)
• dd:first-of-type {} dd:last-of-type {} dd:nth-last-of-type() 전부

css

• `.b_06 button { cursor: pointer; }` : button에 올리면 손가락 모양
• `{ list-style: none; }` : 리스트 마커를 없앨 수 있는 코드
• `text-decoration: none / underline;` : 글씨 데코 없애기 / 밑줄
• `transition: 300ms ease;` : 0.3초 애니메이션
• `::first-letter` : 해당 문자의 첫 번째 글자
• `text-transform: uppercase;` : 대문자로
• `calc()` : 연산하는 코드 (*+-/) 앞 뒤로 **꼭 띄어쓰기**
• 1rem = 16px

html

• `<a href="#" title="">` : 타이틀은 마우스 올렸을 때 말풍선