Diff
checker
텍스트
텍스트
이미지
문서
Excel
폴더
Legal
Enterprise
데스크톱
요금제
로그인
데스크톱 앱 다운로드
텍스트 비교
두 텍스트 파일의 차이점을 찾아보세요
도구
기록
실시간 편집
변경 없는 행 숨기기
줄바꿈 비활성화
레이아웃
나란히 보기
합쳐 보기
비교 단위
스마트
단어
글자
구문 강조
언어 선택
제외
텍스트 변환
첫 변경으로
수정
Diffchecker Desktop
가장 안전하게 Diffchecker를 사용하는 방법. 데스크톱 앱을 사용하면 비교 데이터가 외부로 전송되지 않습니다!
데스크톱 앱 받기
inside out project STEP-104 to STEP-105 CSS Code Changes
생성일
8년 전
비교 결과 만료 없음
초기화
내보내기
공유
설명
0 삭제
행
총
삭제
글자
총
삭제
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
91 행
복사
69 추가
행
총
추가
글자
총
추가
이 기능을 계속 사용하려면 업그레이드해 주세요
Diff
checker
Pro
요금제 보기
158 행
복사
복사
복사됨
복사
복사됨
/*
CSS Document */
/*
inside out project STEP-105
CSS Document */
#logo {
cursor: pointer;
}
#logo:hover {
color: #EEE;
}
nav {
nav {
right: 250px;
right: 250px;
display: inline;
display: inline;
position: fixed;
position: fixed;
background: #FFF;
background: #FFF;
z-index: 1000;
z-index: 1000;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-right: 20px;
padding-right: 20px;
}
}
nav ul {
nav ul {
list-style: none;
list-style: none;
position: relative;
position: relative;
float: left;
float: left;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
nav ul a {
nav ul a {
display: block;
display: block;
text-decoration: none;
text-decoration: none;
font-weight: 700;
font-weight: 700;
line-height: 32px;
line-height: 32px;
padding: 0 15px;
padding: 0 15px;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #333;
color: #333;
font-size: 16px;
font-size: 16px;
}
}
nav ul li {
nav ul li {
position: relative;
position: relative;
float: left;
float: left;
margin: 0;
margin: 0;
padding: 0;
padding: 0;
}
}
nav ul li.current-menu-item {
nav ul li.current-menu-item {
background: #ddd;
background: #ddd;
}
}
nav ul li:hover {
nav ul li:hover {
background: #DDD;
background: #DDD;
}
}
nav ul ul {
nav ul ul {
display: none;
display: none;
position: absolute;
position: absolute;
top: 100%;
top: 100%;
left: 0;
left: 0;
background: #f6f6f6;
background: #f6f6f6;
border: thin #225AA7 solid;
border: thin #225AA7 solid;
padding: 0;
padding: 0;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
}
nav ul ul li {
nav ul ul li {
float: none;
float: none;
width: 200px;
width: 200px;
}
}
nav ul ul a {
nav ul ul a {
line-height: 120%;
line-height: 120%;
padding: 10px 15px;
padding: 10px 15px;
}
}
nav ul ul ul {
nav ul ul ul {
top: 0;
top: 0;
left: 100%;
left: 100%;
}
}
nav ul li:hover > ul {
nav ul li:hover > ul {
display: block;
display: block;
}
}
#loaderDiv {
#loaderDiv {
background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed;
background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed;
position: fixed;
position: fixed;
z-index: 9999;
z-index: 9999;
top: 0;
top: 0;
left: 0;
left: 0;
bottom: 0;
bottom: 0;
right: 0;
right: 0;
opacity: 0.025;
opacity: 0.025;
background-size: 120%;
background-size: 120%;
background-color: #FFFFFF;
background-color: #FFFFFF;
display: none;
display: none;
}
}
복사
복사됨
복사
복사됨
section {
min-height: 450px;
}
.circle {
position: absolute;
top: 150px;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 350px;
border: 5px solid #fff;
box-shadow: 0 0 0 5px #4973ff;
border-radius: 50%;
overflow: hidden;
}
.wave {
position: relative;
width: 100%;
height: 100%;
background: #4973ff;
border-radius: 50%;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
}
.wave:before,.wave:after {
content: '';
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
background: #000;
}
.wave:before {
border-radius: 45%;
background: rgba(255,255,255,1);
animation: animate 5s linear infinite;
}
.wave:after {
border-radius: 40%;
background: rgba(255,255,255,.5);
animation: animate 10s linear infinite;
}
@keyframes animate {
0% {
transform: translate(-50%,-75%) rotate(0deg);
}
100% {
transform: translate(-50%,-75%) rotate(360deg);
}
}
저장된 비교 결과
원본
파일 열기
/* CSS Document */ nav { right: 250px; display: inline; position: fixed; background: #FFF; z-index: 1000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-right: 20px; } nav ul { list-style: none; position: relative; float: left; margin: 0; padding: 0; } nav ul a { display: block; text-decoration: none; font-weight: 700; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-size: 16px; } nav ul li { position: relative; float: left; margin: 0; padding: 0; } nav ul li.current-menu-item { background: #ddd; } nav ul li:hover { background: #DDD; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background: #f6f6f6; border: thin #225AA7 solid; padding: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; } nav ul ul li { float: none; width: 200px; } nav ul ul a { line-height: 120%; padding: 10px 15px; } nav ul ul ul { top: 0; left: 100%; } nav ul li:hover > ul { display: block; } #loaderDiv { background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed; position: fixed; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.025; background-size: 120%; background-color: #FFFFFF; display: none; }
수정본
파일 열기
/* inside out project STEP-105 CSS Document */ #logo { cursor: pointer; } #logo:hover { color: #EEE; } nav { right: 250px; display: inline; position: fixed; background: #FFF; z-index: 1000; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; padding-right: 20px; } nav ul { list-style: none; position: relative; float: left; margin: 0; padding: 0; } nav ul a { display: block; text-decoration: none; font-weight: 700; line-height: 32px; padding: 0 15px; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333; font-size: 16px; } nav ul li { position: relative; float: left; margin: 0; padding: 0; } nav ul li.current-menu-item { background: #ddd; } nav ul li:hover { background: #DDD; } nav ul ul { display: none; position: absolute; top: 100%; left: 0; background: #f6f6f6; border: thin #225AA7 solid; padding: 0; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; } nav ul ul li { float: none; width: 200px; } nav ul ul a { line-height: 120%; padding: 10px 15px; } nav ul ul ul { top: 0; left: 100%; } nav ul li:hover > ul { display: block; } #loaderDiv { background: url("https://90northgroup.com/wp-content/uploads/2017/02/cogs-1.gif") no-repeat center center fixed; position: fixed; z-index: 9999; top: 0; left: 0; bottom: 0; right: 0; opacity: 0.025; background-size: 120%; background-color: #FFFFFF; display: none; } section { min-height: 450px; } .circle { position: absolute; top: 150px; left: 50%; transform: translate(-50%,-50%); width: 350px; height: 350px; border: 5px solid #fff; box-shadow: 0 0 0 5px #4973ff; border-radius: 50%; overflow: hidden; } .wave { position: relative; width: 100%; height: 100%; background: #4973ff; border-radius: 50%; box-shadow: inset 0 0 50px rgba(0,0,0,.5); } .wave:before,.wave:after { content: ''; position: absolute; width: 200%; height: 200%; top: 0; left: 50%; transform: translate(-50%,-75%); background: #000; } .wave:before { border-radius: 45%; background: rgba(255,255,255,1); animation: animate 5s linear infinite; } .wave:after { border-radius: 40%; background: rgba(255,255,255,.5); animation: animate 10s linear infinite; } @keyframes animate { 0% { transform: translate(-50%,-75%) rotate(0deg); } 100% { transform: translate(-50%,-75%) rotate(360deg); } }
비교하기