본문 바로가기
반응형

html & css3

 (17)
[html/css] input checkbox 디폴트 없애고 css로 꾸미기 체크박스 input[type="checkbox"] { display: none; } input[type="checkbox"] + label span { display: inline-block; width: 22px; height: 22px; margin: -2px 10px 0 0; vertical-align: middle; border-radius: 5px; cursor: pointer; border: 1px solid red; } input[type="checkbox"]:checked + label span { background: red; }
[html/css] 대시보드 좌측 사이드 메뉴 기본 포멧 TITLE MENU 1 소메뉴1-1 소메뉴1-2 소메뉴1-3 소메뉴1-4 MENU 2 소메뉴2-1 소메뉴2-2 MYPAGE .side-menu { top: 50px; width: 45px; z-index: 10; background: #ff5858; border-right: 1px solid rgba(0, 0, 0, 0.07); bottom: 50px; height: 100%; margin-bottom: -70px; margin-top: 0px; padding-bottom: 70px; position: fixed; box-shadow: 0 0px 24px 0 rgb(0 0 0 / 6%), 0 1px 0px 0 rgb(0 0 0 / 2%); } .sidebar-inner { height: 100%; pad..
[html/css] 구글폰트/웹폰트 연결하기, 직접 폰트 변환하여 적용하기 폰트 연결하기 1. font-family : 글꼴 속성지정 윈도우의 기본글꼴은 영문 : sans-serif, serif 한글:굴림, 궁서, 돋움, 바탕 -css3 에서 웹폰트를 웹표준으로 설정하여 글꼴을 연결하여 사용하거나, 서버로부터 다운로드하여 스타일을 적용할 수 있습니다. 구글 폰트 다운로드 사이트▼ http://fonts.google.com http://fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com Google Fonts Making the web more beautiful, fast, and open throug..
[웹디자인/html/css] 웹호스팅에 파일 업로드하기 / 필수 확인 사항들 코딩한 html, css파일이 html5 문법에 맞게 적용되었는지 확인할 수 있는 사이트호스팅에 파일을 업로드하기 전, 자신이 코딩한 html 및 css 에 문법상 오류가 있는지 웹표준에 어긋하는 부분이 있는지 등을 확인해야합니다. W3C HTML 검사하기 ▽ https://validator.w3.org/The W3C Markup Validation ServiceValidate by File Upload Note: file upload may not work with Internet Explorer on some versions of Windows XP Service Pack 2, see our information page on the W3C QA Website.validator.w3.org css스타..
@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..
반응형

티스토리툴바