w3.css “팀을 만나다” 페이지 CSS를 사용하여 반응형 “팀을 만나보세요” 페이지를 만드는 방법을 알아보자. “팀을 만나다” 페이지/섹션은 특정 연락처 정보와 함께 회사의 고용주를 나열하는 데 자주 사용된다. 팀을 만나다 페이지를 만드는 방법 1단계) HTML 추가 <div class=”row”> <div class=”column”> <div class=”card”> <img src=”img1.jpg” alt=”Jane” style=”width:100%”> <div class=”container”> <h2>Jane Doe</h2> <p class=”title”>CEO & Founder</p> <p>Some text that describes me lorem ipsum ipsum lorem.</p> <p>example@example.com</p> <p><button class=”button”>Contact</button></p> </div> </div> </div> <div class=”column”> <div class=”card”> <img src=”img2.jpg” alt=”Mike” style=”width:100%”> <div class=”container”> <h2>Mike Ross</h2> <p…

w3.css 이미지에 테두리 추가 이미지 주위에 테두리를 추가하는 방법을 알아보자. 이미지에 테두리를 추가하는 방법 속성 을 사용하여 border<img> 요소에 테두리를 추가한다. 1단계) HTML 추가 img { border: 5px solid #555; }

w3.css 썸네일 썸네일 이미지를 만드는 방법을 알아보자. 썸네일 이미지를 만드는 방법 <img> 요소를 사용하고 그 주위에 <a> 요소를 둘러쌉니다. 테두리로 이미지 스타일을 지정하고 호버 효과를 추가한다. 1단계) HTML 추가 <style> img { border: 1px solid #ddd; /* Gray border */ border-radius: 4px; /* Rounded border */ padding: 5px; /* Some padding */ width: 150px; /* Set a small width */ } /* Add a hover effect (blue shadow) */ img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);…

w3.css 센터 이미지 CSS를 사용하여 이미지를 중앙에 배치하는 방법을 알아보자. 이미지를 중앙에 배치하는 방법 1단계) HTML 추가 <img src=”paris.jpg” alt=”Paris” class=”center”> 2단계) CSS 추가 이미지의 중심을 지정하려면 왼쪽 및 오른쪽 여백을 auto로 설정하고 block 요소로 만든다. .center { display: block; margin-left: auto; margin-right: auto; width: 50%; }

w3.css 반응형 이미지 CSS를 사용하여 반응형 이미지를 만드는 방법을 알아보자. 반응형 이미지는 화면 크기에 맞게 자동으로 조정된다. 아바타 이미지를 만드는 방법 1단계) HTML 추가 <img src=”nature.jpg” alt=”Nature” class=”responsive”> 2단계) CSS 추가 이미지가 응답성에 따라 위아래로 모두 확대되도록 하려면 CSS width 속성을 100%로 설정하고 height를 auto로 설정한다. .responsive { width: 100%; height: auto; }

w3.css 아바타 이미지 CSS를 사용하여 아바타 이미지를 만드는 방법을 알아보자. 아바타 이미지를 만드는 방법 1단계) HTML 추가 <img src=”avatar.png” alt=”Avatar” class=”avatar”> 2단계) CSS 추가 보기 좋은 height와 width를 설정하고 border-radius 속성을 사용하여 이미지에 둥근 모서리를 추가한다. 50%는 이미지를 원형으로 만든다. .avatar { vertical-align: middle; width: 50px; height: 50px; border-radius: 50%; }

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

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…

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;…

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…