funfunweb

문자의 글꼴 지정하는 속성 여러 단어이거나 한글 글골인 경우 따옴표로 감싸고 여러 개의 글꼴은 쉼표로 구분, 지정한 글골이 없을 경우 그 다음 글꼴로 지정 할 수 있다. font-family:"돋움", dotum, sans-serif; serif - 장식 sans - 없다.

html 요소의 속성 유무 또는 속성값을 중괄호[ ] 안에 넣어 선택자로 사용 속성 값 설명 h1[class] class 명을 가진 h1 요소 img[alt] alt 속성을 가진 img 요소 p[class="abc"] class 명이 유일하게 'abc' 인 p 요소 p[class~="abc"] class 명이 유일하게 'abc' 이거나 여러개의 class 명 중 하나가 'abc'인 p요소 p[class|="abc"] class 명이 'abc' 이거나 'abc ~ ' 로 시작하는 p요소 p[class^="abc"] class 명이 'abc' 로 시작하는 p요소 p[class$="abc"] class 명이 'abc' 로 끝나는 p요소 p[class*="abc"] class 명이 'abc' 가 포함되어 있는 ..

css 작성 방법 선택자{속성:값;속성:값;} h1{color:blue;} h1 요소에 color(글자색)을 blue(파란색)으로 설정해라. 선택자는 스타일을 지정하려는 html 요소를 의미하고 선언 블록은 {} 안에 작성한다. 속성과 값을 : 로구분, 하나 이상의 선언이 포함되어있다. 선택자 종류 사용방법 태그 (type)선택자 ex) h1, p, section h1{color:red;} 클래스 선택자 ex) .util .util{color:orange;} 아이디 선택자(주의 이름은 숫자로 시작할 수 없다.) ex) #gnb #gnb{font-size:30px;} 전체 선택자 ex) * *{color:blue;} 하위 선택자 ex) header h1 header h1{color:pink;} 자식 선택자..

1 2 3 1 2 3 css .scroll-container{ scroll-behavior: smooth; } See the Pen 메뉴 선택시 스크롤 부드럽게 이동 by 정은 (@luchiaChoi) on CodePen.

CSS Grid는 2차원(row과 column)의 레이아웃 시스템을 제공합니다. 사용 방법: display:[grid],[inline-grid] 1 2 3 4 5 6 7 8 9 부모 container 에 display:grid 를 주었지만 화면 변화는 없다. grid-template-column - 그리드 열의 라인 이름과 트랙 크기 조정 기능 정의 /* Keyword value */ grid-template-columns: none; /* values */ grid-template-columns: 100px 1fr; grid-template-columns: [linename] 100px; grid-template-columns: [linename1] 100px [linename2 linename3]; ..

See the Pen mouse hover image 커짐 by 정은 (@luchiaChoi) on CodePen.

See the Pen mouse hover background dim by 정은 (@luchiaChoi) on CodePen.