WEB (49) [jQuery] 숫자 카운트업 효과 0에서 지정한 숫자까지 카운트업 되는 효과입니다. 100% 500% 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 100% 500% 3. CSS .count { float: left; width: 100px; height: 100px; line-height: 95px; margin: 0 5px; border: 5px solid #ddd; -moz-border-radius: 50%; -webkit-border-radius: 50%; -khtml-border-radius: 50%; border-radius: 50%; font-size: 15px; color: #000; text-align: center; } .num { font-size: 28px; font-weight: bold; color: #0.. [jQuery] 화면 가운데 레이어 팝업 띄우기 (중앙 정렬/가운데 고정) 버튼 클릭 시 레이어 팝업을 화면 중앙에 띄우는 방법입니다. 팝업 열기 팝업 내용 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 팝업 열기 팝업 내용 3. CSS .btn_open { padding: 5px 10px; background: #759587; border: 0; color: #fff; cursor: pointer; } #mask { display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); zoom: 1; opa.. [CSS] 툴팁(tooltip) 만들기 간단하게 툴팁을 만드는 방법입니다. 툴팁 텍스트해당 글자에 마우스를 올리면 나타나는 보충 설명를 볼 수 있습니다. 1. HTML 툴팁 텍스트해당 글자에 마우스를 올리면 나타나는 보충 설명를 볼 수 있습니다. 2. CSS .text { position: relative; border-bottom: 1px dotted #0026dd; color: #0026dd; cursor: default; } .tooltip { visibility: hidden; min-width: 150px; padding: 8px; background: #000; border-radius: 6px; font-size: 13px; color: #fff; position: absolute; top: 26px; left: 50%; z-in.. [jQuery] 위로 슬라이드 되는 메뉴 만들기 위로 슬라이드 되며 펼쳐지는 메뉴를 만드는 방법입니다. 사이트 하단에 '관련 사이트' 링크 리스트를 만들 때에 사용할 수 있습니다. 관련 사이트 관련 사이트 1 관련 사이트 2 관련 사이트 3 1. 태그 안에 제이쿼리를 불러옵니다. 2. HTML 관련 사이트 관련 사이트 1 관련 사이트 2 관련 사이트 3 3. CSS .family_menu { position: relative; display: inline-block; *display: inline; *zoom: 1; } .btn_family { height: 45px; padding: 0 30px 0 15px; background: #fff; border: 1px solid #333; font-size: 15px; color: #000; cursor:.. [CSS] display와 visibility 차이 display 는 요소를 인라인 속성으로 보여줄지, 블록 속성으로 보여줄지 등 요소의 표시 방법을 지정합니다. visibility 는 요소의 표시 또는 숨김 여부를 지정합니다. display: none 과 visibility: hidden 이 속성들은 둘 다 요소를 숨겨 보이지 않게 합니다. 요소를 숨기는 기능은 똑같지만 차이점이 있습니다. display: none 은 요소의 영역까지 없애기 때문에, 마치 페이지에 해당 요소가 없는 것처럼 표시됩니다. visibility: hidden 은 요소는 숨기지만 영역은 그대로 남겨두므로, 해당 요소의 영역이 공백으로 표시됩니다. 다음 예시에서 빨강, 노랑, 초록 중 가운데 있는 노랑을 숨겨보겠습니다. 빨강 노랑 초록 display: none .yellow { d.. [CSS] 글자 간격(자간) 조절하기 글자 사이의 간격을 늘리거나 줄이고 싶다면 letter-spacing 속성을 사용할 수 있습니다. letter-spacing 속성의 기본값은 0 입니다. 속성 값에는 px, em 등의 단위를 사용할 수 있습니다. 자간을 늘리고자 한다면 아래와 같이 양수 값을 넣으면 됩니다. p { letter-spacing: 10px; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis arcu nisi, quis ultrices libero tincidunt lobortis. Aenean sollicitudin quis neque quis venenatis. Class aptent taciti sociosqu ad litora torquen.. [CSS] a 태그 스타일 적용 및 밑줄 제거 태그는 4가지 상태를 가지고 있습니다. a:link 사용자가 링크를 방문하지 않은 기본 상태 a:visited 사용자가 링크를 방문한 후의 상태 a:hover 사용자가 링크에 마우스를 올릴 때의 상태 a:active 사용자가 링크를 클릭하는 순간의 상태 각 상태별로 text-decoration , background , color , font-size 등 이외의 다양한 스타일 속성을 각각 적용할 수 있습니다. 스타일을 적용할 경우 상태의 순서는 반드시 아래와 같이 작성해주세요. a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-d.. [CSS] 줄바꿈 방지하기 내용이 길어 콘텐츠 영역을 넘어가게 되면 기본적으로 줄바꿈이 됩니다. 아래와 같이 설정하면 자동 줄바꿈을 방지할 수 있습니다. div { white-space: nowrap; } 이전 1 2 3 4 5 ··· 7 다음