w3.css 스낵바 / 토스트 CSS와 JavaScript를 사용하여 스낵바/토스트를 만드는 방법을 알아보자. 스낵바 만들기 스낵바는 종종 화면 하단에 메시지를 표시하는 툴팁/팝업으로 사용된다. 버튼을 클릭하면 스낵바가 표시되고 3초 후에 사라진다. 1단계) HTML 추가 <!– Use a button to open the snackbar –> <button onclick=”myFunction()”>Show Snackbar</button> <!– The actual snackbar –> <div id=”snackbar”>Some text some message..</div> 2단계) CSS 추가 스낵바 스타일 지정 및 애니메이션 추가: /* The snackbar – position it at the bottom and in the middle of the screen */ #snackbar…

w3.css 반응형 플로트 CSS를 사용하여 반응형 플로팅 요소를 만드는 방법을 알아보자. 반응형 플로트 미디어 쿼리를 사용하고 요소가 떠 있어야 하는 시점에 지정된 화면 너비(픽셀)를 설정한다. 1단계) HTML 추가 <div class=”clearfix”> <span class=”float-right-sm”>Float right =<768px</span><br> <span class=”float-right-lg”>Float right =>769px</span><br> </div> 2단계) CSS 추가 /* Float to the right on screens that are equal to or less than 768px wide */ @media (max-width: 768px) { .float-right-sm { float: right; } } /* Float to the right on screens that are equal to…

w3.css 클리어 플로트(Clearfix) “clearfix” 해킹으로 부유물을 제거하는 방법을 알아보자. 플로트를 제거하는 방법 (Clearfix) 떠 있는 요소 뒤의 요소는 그 주위로 흐른다. “clearfix” 해킹을 사용하여 문제를 해결하자. 클리어픽스 없이 클리어픽스로 clearfix 해킹 요소가 그것을 포함하는 요소보다 높고 떠 있는 경우 컨테이너 밖으로 넘쳐흐른다. 그런 다음 포함 요소에 overflow: auto; 를 추가하여 이 문제를 해결할 수 있다. 1단계) HTML 추가 <div class=”clearfix”> <img class=”img2″ src=”pineapple.jpg” alt=”Pineapple” width=”170″ height=”170″> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet… </div> 1단계) CSS 추가…

w3.css 동일한 높이 CSS를 사용하여 높이가 같은 열을 만드는 방법을 알아보자. 동일한 높이의 열을 만드는 방법 1단계) HTML 추가 <div class=”col-container”> <div class=”col”> <h2>Column 1</h2> <p>Hello World</p> </div> <div class=”col”> <h2>Column 2</h2> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> <p>Hello World!</p> </div> <div class=”col”> <h2>Column 3</h2> <p>Some other text..</p> <p>Some other text..</p> </div> </div> 2단계) CSS 추가 .col-container { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page…

w3.css 고정 요소 CSS를 사용하여 고정 요소를 만드는 방법을 알아보자. 스티키 엘리먼트 1단계) HTML 추가 <div class=”sticky”>I will stick to the screen when you reach my scroll position</div> <p>Some example text..</p> 2단계) CSS 추가 div.sticky { position: sticky; top: 0; }   position: sticky;는 사용자의 스크롤 위치를 기준으로 요소가 배치된다. sticky 요소는 스크롤 위치에 따라 relative와 fixed 사이를 전환한다. 뷰포트에서 주어진 오프셋 위치가 충족될 때까지 상대적으로 배치되며 그런 다음 제자리에 “고정”(예: position:fixed)된다. ⭐ 고정 위치 지정이 작동하려면 top, right, bottom…

w3.css 고정 푸터 CSS를 사용하여 고정 푸터를 만드는 방법을 알아보자. 고정된 바닥글을 만드는 방법 1단계) HTML 추가 <style> .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: red; color: white; text-align: center; } </style> <div class=”footer”> <p>Footer</p> </div>

w3.css 빛나는 텍스트 CSS를 사용하여 빛나는 텍스트를 만드는 방법을 알아보자. 빛나는 텍스트를 만드는 방법 text-shadow 속성을 사용하여 네온 조명 효과를 만든 다음 animation과 keyframes을 함께 사용하여 반복적으로 빛나는 효과를 추가한다. 1단계) HTML 추가 <h1 class=”glow”>GLOWING TEXT</h1>

w3.css 잘라낸 텍스트 CSS를 사용하여 반응형 컷아웃/녹아웃 텍스트를 만드는 방법을 알아보자. 컷아웃 텍스트(또는 녹아웃 텍스트)는 배경 이미지 위에 잘라져 나타나는 투명한 텍스트다. ⭐ 이 예제는 Internet Explorer나 Edge에서는 작동하지 않는다. 잘라낸 텍스트를 만드는 방법 텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다. 이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다. 1단계) HTML 추가 <div class=”image-container”> <div class=”text”>NATURE</div> </div> 2단계) CSS 추가 이 mix-blend-mode속성을 사용하면 이미지에 잘라낸 텍스트를 추가할 수 있다. 그러나 IE 또는 Edge에서는 지원되지 않는다. .image-container…

w3.css 반응형 텍스트 CSS를 사용하여 반응형 타이포그래피를 만드는 방법을 알아보자. 반응형 텍스트 브라우저 창 크기를 조절하여 텍스트 크기가 어떻게 변하는지 확인하자. 텍스트 크기를 조정할 때는 “vw” 단위를 사용하자. 10vw는 크기를 뷰포트 너비의 10%로 설정한다. 뷰포트는 브라우저 창 크기다. 1vw = 뷰포트 너비의 1%다. 뷰포트 너비가 50cm이면 1vw는 0.5cm다. 반응형 글꼴 크기 텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다. 이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다. 1단계) HTML 추가 <h1 style=”font-size:8vw;”>Hello World</h1> <p style=”font-size:2vw;”>Resize the browser…

w3.css 글머리 기호 없이 나열하기 CSS를 사용하여 글머리 기호가 없는 순서 없는 목록을 만드는 방법을 알아보자. 글머리 기호 없이 목록을 만드는 방법 1단계) HTML 추가 <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <p>Remove bullets, margin and padding:</p> <ul class=”no-bullets”> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> 2단계) CSS 추가 ul.no-bullets { list-style-type: none; /* Remove bullets */ padding: 0; /* Remove padding */ margin: 0; /* Remove margins */ }