본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _

html+css23

[CSS] scroll-* 유연한 스크롤을 만들어주는 CSS속성 scroll-* 1. scroll-* 사용법컨텐츠 영역과 컨텐츠를 감싸는 부모 요소를 만든다. 1 2 3 4    See the Pen scroll-* by gaae (@gaae) on CodePen. 2. scroll-behavior 속성scroll-behavior :   auto   |   smooth   |   initial   |   inherit문서이동시 스크롤 효과를 준다.  컨텐츠 감싸는 부모요소    ex) scroll-container · auto : 직선점프 효과. 기본값· smooth  : 부드러운 c롤 효과· initial  : 초기 기본값 설정· inherit : 상위요.. 2024. 4. 23.
Gradient Background Animation See the Pen Untitled by gaae (@gaae) on CodePen. 2022. 3. 15.
checkbox 만들기 See the Pen Untitled by gaae (@gaae) on CodePen. 2022. 3. 14.
table 만들기 See the Pen Untitled by gaae (@gaae) on CodePen. 2022. 3. 14.
리셋 css, 외부 프로그램 1. 직접 만듬 Reset.css 예시 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embe.. 2021. 5. 26.
navigation bar 링크를 사용한 리스트 메뉴 ex) html Home HTML CSS 자바스크립트 수직 내비게이션 바 ex) html Home HTML CSS 자바스크립트 ul { background-color: #FFDAB9; width: 150px; list-style type: none; margin: 0; padding: 0; } li a { display: block; color: #000000; padding: 8px; text-decoration: none; font-weight: bold; } li a:hover { background-color: #CD853F; color: white; } /li hover 시 칼라가 변함 + li a.current { background-color: #FF6347; co.. 2021. 4. 25.

티스토리툴바