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

전체 글51

[jQuery]'data-'속성으로 버튼 만들기 See the Pen data-_01 by gaae (@gaae) on CodePen. 2021. 7. 14.
[jQuery]'data-'속성으로 tab리스트 만들기 See the Pen on_click_00 by gaae (@gaae) on CodePen. 2021. 5. 31.
리셋 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.
의사 클래스(pseudo-class) 의사 클래스(pseudo-class) CSS에서 의사 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용합니다. 선택자:의사클래스이름 {속성: 속성값;} 선택자.클래스이름:의사클래스이름 {속성: 속성값;} 선택자#아이디이름:의사클래스이름 {속성: 속성값;} 동적 의사 클래스(dynamic pseudo-classes) :link 사용자가 아직 한 번도 해당 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 모두 선택함. (기본 상태) ex) a:link {color: orange;} :visited 사용자가 한 번이라도 해당 링크를 통해서 연결된 페이지를 방문한 상태를 모두 선택함. ex) a:visited {color: gray;} :hove.. 2021. 4. 25.
align 정렬 (margin, position, float) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 됩니다. 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다. 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다. ex) div { width: 300px; margin: auto; padding:10px } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다. position 속성을 이용하여 정렬할 경우에는 요소에 margin과 padding .. 2021. 4. 25.

티스토리툴바