분류 전체보기 (52) 썸네일형 리스트형 [html/css/javaScript] 자바스크립트로 탭메뉴 만들기 tap menu tap1 tap2 tap3 tap4 # 제품명 상세설명 가격 비고 1 ~~~ 100$ 2 ~~~ 100$ 3 ~~~ 100$ # 22 22 22 22 ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ 3 3 3 3 3 ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ 4 4 4 4 4 ♤ ♤ % % % ♤ ♤ % % % ♤ ♤ % % % ♤ ♤ % % % ♤ ♤ % % % @charset "UTF-8"; * { margin: 0; padding: 0; box-sizing: border-box; } body{ margin-top: 100px; margin-left: 100px; } .col { border-collapse: collapse; } button { background-color: dodgerblu.. @keyframes 과 animation 속기형/animation-direction .wrap{ position: absolute; top:50%; left: 50%; } .effect{ transform: translate(-50%, -50%); color: #1670f0; box-shadow: 0 20px 50px rgba(0,0,0,0.5); overflow:hidden; background-color:ff0675; width: 400px; height: 400px; } .effect: before{ content:''; position:absolute; top: 6px; left: 6px; bottom: 6px; width: 50%; background: rgba(255,255,255,0.05); } .effect span:nth-child(1){ position:absolute.. [html/css] 페이지 로딩 애니메이션 만들기 @keyframes/hue-rotate/infinite 속성 등 nh0404.tistory.com/35 앞에 표정 애니메이션을 조금 변형하여 로딩화면을 만들어보았습니다. html 1분 이상 걸릴 수 있습니다. 잠시만 기다려주세요. css #loading1{ margin: 0; padding: 0; background: black; display: flex; box-sizing: border-box; } .loading1{ position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 200px; display:flex; } .bar{ width: 6px; height: 80px; background: #337ab7; margin: 0 3px; border-radius: 10px; ani.. [html/css] css animation 만들기 css 애니메이션은 자바스크립트를 모르더라도 간단하게 움직이는 애니메이션을 만들 수 있습니다. html 간단하게 눈이 될 부분과 움직이는 입모양이 될 부분으로 클래스를 따로 지정해줍니다 css #loading1{ margin: 0; padding: 0; } .loading1{ position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 40%; display:flex; align-items: center; } .obj{ width: 6px; height: 40px; background: black; margin: 0 3px; border-radius: 10px; animation: loading 0.8s infinite;.. [html/css] <dl>-<dt>-<dd> 태그 vs <th>-<tr>-<td> table 속성 nh0404.tistory.com/33 dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하는 방법입니다. 실제로, --를 사용하여 위의 테이블을, 속성을 사용하여 아래 테이블을 만들어보았습니다. 겉으로 보았을 때에는 차이가 없어보이지만 -- 는 그저 여러 dl 요소들을 묶어놓은 것이기 때문에 border-collapse : collapse 를 지정해주어도 겹치는 border부분은 표시가 납니다. -- 태그 vs -- table 속성 차이 dl dt dd 예제 dt111 dd 11 dt222 dd 22 dt333 dt444 dt555 dd 55_1 dd 55_2 dd 55_3 d666 dd 66 dt777 dt888 dt999 dt101010 dd 1010 th 111 td 11 th 22.. [html/css] dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 dl dt dd 태그 테이블처럼 사용하기, 반응형에서 줄바꿈 적용하기 dl : Description-List 기술 목차 dt : Description-Term 기술하고자 하는 용어 dd : Description-Description 용어에 대한 설명 dl dt dd 태그 은 반드시 하나 이상의 - 의 한 쌍을 이룹니다. 즉, dl 안에서만 사용가능하면, 독립적으로 사용이 불가합니다. 또한, dt는 아래의 예제와 같이 하나 이상의 dd를 형제 요소로 가질 수 있으며 --처럼 dt도 하나이상 연속으로 사용 가능합니다. - / ,와 비슷한 구조이지만 사용 목적이 다릅니다. --의 구조와도 유사하지만 그 차이점은 다음 포스팅에서 살펴보겠습니다. 정의 정의에 대한 설명1 정의에 대한 설명2 정의에 대한 설명3 보.. [html/css] input태그에 글 입력 시 아이콘/이미지 활성화 시키기 input태그에 글 입력 시 아이콘/이미지 활성화 시키기 HTML에서 버튼을 비활성화 시키는 것은 disabled을 사용하면 되지만, 아이콘이나 이미지파일에 input 태그에 입력 시 효과를 주려면 간단한 자바스크립트로 가능합니다. 1. javascript 검색란(input태그 "searchbox")에 입력이 되어 있으면 활성화버튼(btn-gray2)는 안보이고, 비활성화버튼(btn-gray)버튼만 인라인 블럭 속성으로 보이게 합니다. 반대인 경우는 else로 설정합니다. 2.html 같은 아이콘을 나란히 두개 넣은 후 위치를 css로 겹치게합니다 fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just .. [html/css] 페이지 밑에서 위로 올라가기/ 페이지 내 원하는 위치로 이동하기 페이지 맨 밑으로 간 경우 자동으로 버튼을 생성하여 클릭 시 페이지 맨 위로 이동하는 html을 작성해보았습니다. 1. html Top 밥을 얼마나 길지 방황하였으며, 피다. 위하여 꽃이 인간이 그들은 되려니와, 만천하의 것이다. 그들의 곳으로 많이 풀이 만천하의 실현에 피고, 품고 듣는다. 오아이스도 바이며, 같은 곳으로 청춘의 뼈 행복스럽고 동력은 않는 있다. 이상 갑 가치를 사라지지 그들의 약동하다. 천자만홍이 작고 끝까지 그리하였는가? 끓는 생명을 충분히 것은 따뜻한 따뜻한 피가 피어나기 것이다. 길을 싸인 할지라도 불어 못하다 맺어, 예가 것이다. 것은 오아이스도 바로 철환하였는가? 피어나는 할지니, 역사를 철환하였는가? 봄날의 그와 것이 밝은 영원히 우는 행복스럽고 사막이다. 싸인 피어나는 사.. 이전 1 2 3 4 5 6 7 다음
