CSS3
-
0 3117 [동영상강의] html12_css( 요소의 배치 방법, float, z-index, overflow )
* block과 inline - block : 한 줄에 한개만 배치 h, p, ul, li, table, div, form 등의 태그에 적용됨 태그 { display:block; } - inline : 한 …
-
0 2668 HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without Underline
HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다. 요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄…
-
0 1736 CSS 애니메이션 사용하기
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 …
-
0 1641 [동영상강의] html13_css(표 스타일, 투명도, visibility, 애니메이션 효과)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content…
-
0 1551 html11_css(배경이미지, 리스트 스타일, 테이블 스타일)
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con…
-
0 1520 CSS 로딩바, 진행바 만들기
html<div class="loading-dim-layer"> <div class="loading-klover-dimBg"></div> <div id="loading-klover-layer" class="loadi…
-
0 1495 input 흔들리는 코드
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iter…
-
0 1453 ★ 상단 메뉴바 만들기 , mega dropdown 메뉴 만들기
리스트로 메뉴 만들기 float우리가 리스트에 CSS를 적용하기 전에 float에 대해서 먼저 배워 보도록 합시다. 태그{float:값} 값에는 left, right, no…
-
0 1442 css 버튼 예쁘게 꾸미기
전환 버튼 12가지 패턴의 버튼 버튼 호버 효과 Button with simple effect on hover! &nbs…
-
0 1434 CSS display 속성을 이해하기 위한 6가지 포인트
CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하…
-
5 웹 폰트 아이콘 Font Awesome 으로 로딩바 loading 만들기
?1<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> ?12345678910111213141516171819202122#page-loadin…
-
4 부트스트랩 과 카카오맵 충돌
충돌로 카카오맵 버튼이 안보일 경우 *, *::before, *::after { /* box-sizing: inherit ; */ } .btn{ padding: 0px !important; font-size: 0.8rem !important; …
-
4 CSS 애니메이션 사용하기
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 …
-
4 CSS display 속성을 이해하기 위한 6가지 포인트
CSS의 display는 많은 다양한 상황에서 익숙하게 사용되는 속성입니다. 그러나 익숙한 데에는 언제나 함정이 있습니다. 실제로 display 속성을 사용하…
-
4 부트스트랩5 테마 및 색상 사용자 정의 - 쉬운 방법
부트스트랩 커스텀 사용 설명 - npx : Node Package eXecute의 약자. 즉, 노드 패키지를 실행하라는 뜻입니다. - --watch : 소스에 변형이 일어날 때…
-
4 HTML-CSS] A태그의, 링크 밑줄(언더라인) 없애기, 제거; Links without Underline
HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다. 요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄…
-
4 반응형 갤러리 카드 card css
<!DOCTYPE html> <html> <head> <style> #macard-main{ width: 1280px; background: #fff; margin: 0 auto; height: 600px; } div.mcard-gallery { border: 1px s…
-
4 css 16.9 비율 유지 - 유튜브 동영상 설정
<div class="container"> <div class="item"></div> </div> .container .item{ width: 100%; height: 0; pa…
-
4 css 배경 이미지 그라데이션 처리
background: `linear-gradient(to bottom, rgba(0,0,0,0) 39%, rgba(0,0,0,0) 41%, rgba(0,0,0,0.65) 100%), url('${props.image}') , #1c1c1c`,
-
4 input 흔들리는 코드
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iter…
-
Tailwind 타일윈드로 가격표 만들기
1. 프로젝트 설정먼저 Tailwind CDN을 포함한 HTML 파일을 설정합니다. 프로젝트는 화면의 중앙에 배치됩니다. 이를 위해 flexbox를…
-
Tailwind CSS를 사용하여 이메일 구독 카드를 만드는 방법
1. 프로젝트 설정새 폴더 생성: Tailwind Dash Projects라는 폴더를 만들고, 그 안에 email-subscribe라는 하위 폴더를 생성합니다.코드 에디터 열기:…
-
Tailwind CSS 환경설
https://tailwindcss.com/docs/installation 1. Tailwind CLI를 사용하여 환경 구축 웹사이트 개발에 사용할 간단한 환경을 구축하는 데 중점…
-
Tailwind 기본 - part2
1. 상호작용(interactivity) 1. 호버(hover), 포커스(focus), 액티브(active) 상태 스타일링버튼이나 링크 같은 요소의 상태별 스타일을 Tailwind의 유틸…
-
Tailwind 기본 - part1
1. 색상작업 <!-- Text Colors --> <p class="text-black">Tailwind is awesome</p> <p class="text-red-50">Tailwind is awesome</p…
-
tailwindcss - 테일윈드 css
1.프로젝트 링크 코스 링크 코드 및 데모: 주요 웹사이트(프로젝트 데모 포함) - https://tailwindfromscratch.com샌드박스 코드 - https://github.com/…
-
css 로딩중 꾸미기
1.첫번째 예css.macaronics-loader { margin: 5% auto; height: 150px; width: 150px; position: relative; display: none; } .circle { height: 100%; width: 100%;…
-
css 16.9 비율 유지 - 유튜브 동영상 설정
<div class="container"> <div class="item"></div> </div> .container .item{ width: 100%; height: 0; pa…
-
반응형 갤러리 카드 card css
<!DOCTYPE html> <html> <head> <style> #macard-main{ width: 1280px; background: #fff; margin: 0 auto; height: 600px; } div.mcard-gallery { border: 1px s…
-
CSS 로딩바, 진행바 만들기
html<div class="loading-dim-layer"> <div class="loading-klover-dimBg"></div> <div id="loading-klover-layer" class="loadi…
