Mingg's Diary

2024-06-25

w3.css 둥근 이미지 CSS를 사용하여 둥근 이미지와 원형 이미지를 만드는 방법을 알아보자. 둥근 이미지를 만드는 방법 1단계) HTML 추가 <img src=”img_avatar.png” alt=”Avatar”> 2단계) CSS 추가 이미지에 둥근 모서리를 추가하려면 이 border-radius 속성을 사용하자. 50%는 이미지를 원형으로 만든다. img { border-radius: 50%; }

2024-06-24

How To – 이미지를 나란히 정렬

w3.css 이미지를 나란히 정렬 CSS를 사용하여 이미지를 나란히 정렬하는 방법을 알아보자. 이미지를 나란히 배치하는 방법 1단계) HTML 추가 <div class=”row”> <div class=”column”> <img src=”img_snow.jpg” alt=”Snow” style=”width:100%”> </div> <div class=”column”> <img src=”img_forest.jpg” alt=”Forest” style=”width:100%”> </div> <div class=”column”> <img src=”img_mountains.jpg” alt=”Mountains” style=”width:100%”> </div> </div> 2단계) CSS 추가 CSS float 속성을 이용하여 나란히 이미지를 생성하는 방법 /* Three image containers (use 25% for four, and 50% for two, etc) */ .column { float: left; width: 33.33%; padding: 5px; } /* Clear floats after…

2024-06-23

How To – 스크롤 시 배경 변경

w3.css 스크롤 시 배경 변경 CSS로 스크롤할 때 배경 이미지를 변경하는 방법을 알아보자. 스크롤 시 배경 이미지를 변경하는 방법 1단계) HTML 추가 <div class=”bg-image img1″></div> <div class=”bg-image img2″></div> <div class=”bg-image img3″></div> <div class=”bg-image img4″></div> <div class=”bg-image img5″></div> <div class=”bg-image img6″></div> <div class=”bg-text”>TEXT</div> 2단계) CSS 추가 body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } .bg-image { /* Full height */ height: 50%; /* Center and scale the image nicely */ background-position: center;…

2024-06-22

How To – 흐린 배경 이미지

w3.css 흐린 배경 이미지 CSS를 사용하여 흐린 배경 이미지를 만드는 방법을 알아보자. ⭐ 이 예는 Edge 12, IE 11 또는 이전 버전에서는 작동하지 않는다. 흐린 배경 이미지를 만드는 방법 1단계) HTML 추가 <div class=”bg-image”></div> <div class=”bg-text”> <h1>I am John Doe</h1> <p>And I’m a Photographer</p> </div> 2단계) CSS 추가 body, html { height: 100%; } * { box-sizing: border-box; } .bg-image { /* The image used */ background-image: url(“photographer.jpg”); /* Add the blur effect */ filter: blur(8px); -webkit-filter: blur(8px); /* Full…

2024-06-21

How To – 히어로 이미지

w3.css 히어로 이미지 CSS를 사용하여 히어로 이미지를 만드는 방법을 알아보자. 히어로 이미지는 텍스트가 포함된 큰 이미지로, 주로 웹페이지 상단에 배치된다. 히어로 이미지를 만드는 방법 1단계) HTML 추가 <div class=”hero-image”> <div class=”hero-text”> <h1>I am John Doe</h1> <p>And I’m a Photographer</p> <button>Hire me</button> </div> </div> 2단계) CSS 추가 body, html { height: 100%; } /* The hero image */ .hero-image { /* Use “linear-gradient” to add a darken background effect to the image (photographer.jpg). This will make the text easier to read…

2024-06-20

How To – 이미지의 양식

w3.css 이미지의 양식 CSS를 사용하여 전체 너비 이미지에 양식을 추가하는 방법을 알아보자. 이미지에 양식을 추가하는 방법 1단계) HTML 추가 <div class=”bg-img”> <form action=”/action_page.php” class=”container”> <h1>Login</h1> <label for=”email”><b>Email</b></label> <input type=”text” placeholder=”Enter Email” name=”email” required> <label for=”psw”><b>Password</b></label> <input type=”password” placeholder=”Enter Password” name=”psw” required> <button type=”submit” class=”btn”>Login</button> </form> </div> 2단계) CSS 추가 body, html { height: 100%; } * { box-sizing: border-box; } .bg-img { /* The image used */ background-image: url(“img_nature.jpg”); /* Control the height of the image */ min-height: 380px; /*…

2024-06-19

How To – 전체 페이지 이미지

w3.css 전체 페이지 이미지 CSS를 사용하여 전체 페이지 배경 이미지를 만드는 방법을 알아보자. 전체 높이 이미지를 만드는 방법 1단계) HTML 추가 컨테이너 요소를 사용하고 높이: 100%로 컨테이너에 배경 이미지를 추가한다. ⭐ 50%를 사용하여 반 페이지 배경 이미지를 만든다. 그런 다음 다음 다음 배경 속성을 사용하여 이미지를 완벽하게 중앙으로 조정하고 확장한다. ⭐ 이미지가 화면 전체를 덮는지 확인하려면 높이를 <html>과 <body>에 모두 100% 적용해야 한다. body, html { height: 100%; } .bg { /* The image used */ background-image: url(“img_girl.jpg”); /* Full…

2024-06-18

How To – 투명한 텍스트가 포함된 이미지

w3.css 투명한 텍스트가 포함된 이미지 CSS를 사용하여 투명(투명) 배경 텍스트가 있는 이미지를 만드는 방법을 알아보자. 투명한 이미지 텍스트를 만드는 방법 1단계) HTML 추가 <div class=”container”> <img src=”notebook.jpg” alt=”Notebook” style=”width:100%;”> <div class=”content”> <h1>Heading</h1> <p>Lorem ipsum..</p> </div> </div> 2단계) CSS 추가 .container { position: relative; max-width: 800px; /* Maximum width */ margin: 0 auto; /* Center it */ } .container .content { position: absolute; /* Position the background text */ bottom: 0; /* At the bottom. Use top:0 to append it to…

2024-06-17

How To – 이미지 위의 텍스트 블록

w3.css 이미지 위의 텍스트 블록 이미지 위에 텍스트 블록을 배치하는 방법을 알아보자. 이미지에 텍스트 블록을 배치하는 방법 1단계) HTML 추가 <div class=”container”> <img src=”nature.jpg” alt=”Norway” style=”width:100%;”> <div class=”text-block”> <h4>Nature</h4> <p>What a beautiful sunrise</p> </div> </div> 2단계) CSS 추가 /* Container holding the image and the text */ .container { position: relative; } /* Bottom right text */ .text-block { position: absolute; bottom: 20px; right: 20px; background-color: black; color: white; padding-left: 20px; padding-right: 20px; }

2024-06-16

How To – 이미지 위에 텍스트 배치

w3.css 이미지 위에 텍스트 배치 이미지 위에 텍스트를 배치하는 방법을 알아보자. 이미지에 텍스트를 배치하는 방법 1단계) HTML 추가 <div class=”container”> <img src=”img_snow_wide.jpg” alt=”Snow” style=”width:100%;”> <div class=”bottom-left”>Bottom Left</div> <div class=”top-left”>Top Left</div> <div class=”top-right”>Top Right</div> <div class=”bottom-right”>Bottom Right</div> <div class=”centered”>Centered</div> </div> 2단계) CSS 추가 /* Container holding the image and the text */ .container { position: relative; text-align: center; color: white; } /* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; } /* Top left text */ .top-left…