학원23 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-b.. 2021. 10. 1. 210923 필기내용 [구형 브라우저 대처](modernizr.com) html class명 옆에 `hidden` 속성 : 속성이 안 보이게 숨겨줌 margin 외부여백 : 요소와 요소 사이의 공백 부모가 border가 없으면 margin-top은 안 먹음 float 가 있으면 두 개 요소의 맞닿은 margin이 합쳐짐 `{ margin: 10px 30px;}` : 위, 아래 : 10px / 오른쪽, 왼쪽 : 30px `{ margin: 10px 50px 30px;}` : 위 : 10px / 오른쪽, 왼쪽 : 50px / 아래 : 30px `{ margin: 5px 20px 40px 70px;}` : 위 : 5px / 오른쪽 : 20px / 아래 : 40px / 왼쪽 : 70px 시계방향으로 돌아감 `{ margin: 20p.. 2021. 10. 1. 210917 필기내용 테이블 초기 셋팅 margin: 0; padding: 0; border-spacing: 0; border-collapse: collapse; css 선택자 `클래스명:hover` : 클래스에 마우스를 올렸을 경우 .none { display: none; width: 100px; height: 300px; background-color: #afa; } .on:hover > div { display: block;} 보통은 처음 나오지 않다가 위에 마우스 올리면 나오게 함 `클래스명:active` : 클래스를 마우스로 눌렀을 경우 `클래스명>a:visited` : 클래스에 있는 링크에 방문했을 경우 / background-color 안먹음 `클래스명>a:link` : 클래스에 있는 링크인 경우 `클래스명>a:.. 2021. 9. 17. 210916 필기내용 html `#` : 최상단으로 이동 `` `#id이름` : css에서 적용하는 것처럼 a태그에 `href`에 #id이름 적용 가능(**마이크로 링크**) 마이크로 링크는 id만 가능/class는 불가능 class명에 **,** 넣으면 에러 id명에 **띄어쓰기** 넣으면 에러 html에서는 `` `&` 절대 사용 불가 특수문자를 삽입하는 코드 : entity code ` : `>` 으로 사용 & : `&` 으로 사용 ₩ : `₩` 으로 사용 emmet에서 `$`는 숫자를 뜻함 style `min-height` : 최소한의 높이 설정 `border-spacing` : 보드 사이의 간격 조정 (오늘 table에는 0 이용) `border-collapse: collapse;` : .. 2021. 9. 17. 이전 1 2 3 4 5 6 다음 반응형
