funfunweb

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.