프론트엔드 Archives - 52 중 19 번째 페이지 -

2024-07-12

w3.css 윤곽선 버튼 CSS를 사용하여 윤곽선 버튼의 스타일을 지정하는 방법을 알아보자. 윤곽선 버튼 스타일을 지정하는 방법 1단계) HTML 추가 <button class=”btn success”>Success</button> <button class=”btn info”>Info</button> <button class=”btn warning”>Warning</button> <button class=”btn danger”>Danger</button> <button class=”btn default”>Default</button> 2단계) CSS 추가 .btn { border: 2px solid black; background-color: white; color: black; padding: 14px 28px; font-size: 16px; cursor: pointer; } /* Green */ .success { border-color: #04AA6D; color: green; } .success:hover { background-color: #04AA6D; color: white; } /* Blue */ .info { border-color: #2196F3; color:…

2024-07-11

How To – 경고 버튼

w3.css 경고 버튼 CSS를 사용하여 “경고” 버튼의 스타일을 지정하는 방법을 알아보자. 경고 버튼 스타일을 지정하는 방법 1단계) HTML 추가 <button class=”btn success”>Success</button> <button class=”btn info”>Info</button> <button class=”btn warning”>Warning</button> <button class=”btn danger”>Danger</button> <button class=”btn default”>Default</button> 2단계) CSS 추가 .btn { border: none; /* Remove borders */ color: white; /* Add a text color */ padding: 14px 28px; /* Add some padding */ cursor: pointer; /* Add a pointer cursor on mouse-over */ } .success {background-color: #04AA6D;} /* Green */ .success:hover {background-color:…

2024-07-10

How to – HTML에 파비콘 추가

w3.css HTML에 파비콘 추가 HTML에 파비콘을 추가하는 방법을 알아보자. HTML에 파비콘을 추가하는 방법 파비콘은 브라우저 탭의 페이지 제목 옆에 표시되는 작은 이미지다. 원하는 이미지를 파비콘으로 사용할 수 있다. https://favicon.cc 와 같은 사이트에서 자신만의 파비콘을 만들 수도 있다. ⭐ 파비콘은 작은 이미지이므로 대비가 높은 단순한 이미지여야 한다. 웹사이트에 파비콘을 추가하려면 파비콘 이미지를 웹서버의 루트 디렉터리에 저장하거나, 루트 디렉터리에 이미지라는 폴더를 만들고 이 폴더에 파비콘 이미지를 저장하자. 파비콘 이미지의 일반적인 이름은 “favicon.ico”다. 1단계) HTML 추가 <!DOCTYPE html> <html> <head> <title>My Page Title</title>…

2024-07-09

How To – 이미지 비교 슬라이더

w3.css 이미지 비교 슬라이더 두 이미지를 비교하는 슬라이더를 만드는 방법을 알아보자. 이미지 비교 슬라이더 만들기 1단계) HTML 추가 <div class=”img-comp-container”> <div class=”img-comp-img”> <img src=”img_snow.jpg” width=”300″ height=”200″> </div> <div class=”img-comp-img img-comp-overlay”> <img src=”img_forest.jpg” width=”300″ height=”200″> </div> </div> 2단계) CSS 추가 컨테이너에는 “상대적” 위치가 있어야 한다. * {box-sizing: border-box;} .img-comp-container { position: relative; height: 200px; /*should be the same height as the images*/ } .img-comp-img { position: absolute; width: auto; height: auto; overflow: hidden; } .img-comp-img img { display: block; vertical-align: middle;…

2024-07-08

How To – 이미지 돋보기 유리

w3.css 이미지 돋보기 유리 이미지 돋보기 유리를 만드는 방법을 알아보자. 이미지 돋보기 유리 만들기 1단계) HTML 추가 <div class=”img-magnifier-container”> <img id=”myimage” src=”img_girl.jpg” width=”600″ height=”400″ alt=”Girl”> </div> 2단계) CSS 추가 컨테이너에는 “상대적” 위치가 있어야 한다. * {box-sizing: border-box;} .img-magnifier-container { position: relative; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 100px; height: 100px; } 3단계) 자바스크립트 추가 function magnify(imgID, zoom) { var img, glass, w, h, bw; img…

2024-07-07

How To – 이미지 줌

w3.css 이미지 줌 이미지 확대/축소를 만드는 방법을 알아보자. 이미지 줌 생성 1단계) HTML 추가 <div class=”img-zoom-container”> <img id=”myimage” src=”img_girl.jpg” width=”300″ height=”240″ alt=”Girl”> <div id=”myresult” class=”img-zoom-result”></div> </div> 2단계) CSS 추가 컨테이너에는 “상대적” 위치가 있어야 한다. * {box-sizing: border-box;} .img-zoom-container { position: relative; } .img-zoom-lens { position: absolute; border: 1px solid #d4d4d4; /*set the size of the lens:*/ width: 40px; height: 40px; } .img-zoom-result { border: 1px solid #d4d4d4; /*set the size of the result div:*/ width: 300px; height: 300px; } 3단계)…

2024-07-06

How To – 필터링이 포함된 포트폴리오 갤러리

w3.css 필터링이 포함된 포트폴리오 갤러리 필터링을 사용하여 포트폴리오 갤러리를 만드는 방법을 알아보자. 포트폴리오 웹사이트를 만드는 방법 1단계) HTML 추가 <h2>PORTFOLIO</h2> <div id=”myBtnContainer”> <button class=”btn active” onclick=”filterSelection(‘all’)”> Show all</button> <button class=”btn” onclick=”filterSelection(‘nature’)”> Nature</button> <button class=”btn” onclick=”filterSelection(‘cars’)”> Cars</button> <button class=”btn” onclick=”filterSelection(‘people’)”> People</button> </div> <!– Portfolio Gallery Grid –> <div class=”row”> <div class=”column nature”> <div class=”content”> <img src=”/w3images/mountains.jpg” alt=”Mountains” style=”width:100%”> <h4>Mountains</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class=”column nature”> <div class=”content”> <img src=”/w3images/lights.jpg” alt=”Lights” style=”width:100%”> <h4>Lights</h4> <p>Lorem ipsum dolor..</p> </div> </div> <div class=”column…

2024-07-05

How To – 포트폴리오 갤러리

w3.css 포트폴리오 갤러리 CSS를 사용하여 반응형 포트폴리오 갤러리 그리드를 만드는 방법을 알아보자. 포트폴리오 웹사이트를 만드는 방법 1단계) HTML 추가 <!– MAIN (Center website) –> <div class=”main”> <h1>MYLOGO.COM</h1> <hr> <h2>PORTFOLIO</h2> <p>Resize the browser window to see the responsive effect.</p> <!– Portfolio Gallery Grid –> <div class=”row”> <div class=”column”> <div class=”content”> <img src=”mountains.jpg” alt=”Mountains” style=”width:100%”> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> <div class=”column”> <div class=”content”> <img src=”lights.jpg” alt=”Lights” style=”width:100%”> <h3>My Work</h3> <p>Lorem ipsum..</p> </div> </div> <div class=”column”> <div class=”content”> <img src=”nature.jpg” alt=”Nature”…

2024-07-04

How To – 이미지 흔들기

w3.css 이미지 흔들기 CSS를 사용하여 이미지를 흔들거나 흔드는 방법을 알아보자. 이미지를 흔드는 방법 1단계) CSS 추가 img:hover { /* Start the shake animation and make the animation last for 0.5 seconds */ animation: shake 0.5s; /* When the animation is finished, start again */ animation-iteration-count: infinite; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% {…

2024-07-03

How To – 이미지 뒤집기

w3.css 이미지 뒤집기 CSS를 사용하여 이미지를 뒤집는 방법(거울 효과 추가)을 알아보자. 이미지를 뒤집는 방법 1단계) HTML 추가 <style> img:hover { -webkit-transform: scaleX(-1); transform: scaleX(-1); } </style> <img src=”paris.jpg” alt=”Paris”> ⭐ 이 예는 태블릿이나 휴대폰에서는 작동하지 않는다. 텍스트가 포함된 3D 뒤집기 이미지 텍스트가 포함된 이미지의 애니메이션 3D 뒤집기를 수행하는 방법을 알아보자. 1단계) HTML 추가 <div class=”flip-box”> <div class=”flip-box-inner”> <div class=”flip-box-front”> <img src=”img_paris.jpg” alt=”Paris” style=”width:300px;height:200px”> </div> <div class=”flip-box-back”> <h2>Paris</h2> <p>What an amazing city</p> </div> </div> </div> 2단계) CSS 추가 /* The flip…