Mingg's Diary

2024-11-10

w3.css 스크롤 시 헤더 크기 조정 CSS와 JavaScript를 사용하여 스크롤 시 헤더를 줄이는 방법을 알아보자. 스크롤 시 헤더를 축소하는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 <div id=”header”>Header</div> 2단계) CSS 추가 헤더 스타일 지정 #header { background-color: #f1f1f1; /* Grey background */ padding: 50px 10px; /* Some padding */ color: black; text-align: center; /* Centered text */ font-size: 90px; /* Big font size */ font-weight: bold; position: fixed; /* Fixed position – sit on…

2024-11-09

How To – 스크롤 헤더

w3.css 스크롤 헤더 CSS를 사용하여 스크롤 시 고정/고정 헤더를 만드는 방법을 알아보자. 스크롤 시 고정 헤더를 만드는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 <div class=”header” id=”myHeader”> <h2>My Header</h2> </div> 2단계) CSS 추가 헤더 스타일을 지정한다. 스크롤 위치에 도달했을 때 헤더가 고정되도록 position:sticky 및 top:0을 추가한다. .header { position: sticky; top: 0; padding: 10px 16px; background: #555; color: #f1f1f1; } position: sticky; 사용자의 스크롤 위치를 기준으로 요소가 배치된다. Sticky 요소는 스크롤 위치에…

2024-11-08

How To – 스크롤 시 배경 그라디언트

w3.css 스크롤 시 배경 그라디언트 스크롤 시 그라데이션 배경색을 만드는 방법을 알아보자. 스크롤 시 그라데이션 배경을 만드는 방법 위에서 시작하는 선형 그라데이션 배경색을 만든다. 청록색/녹색에서 파란색으로 시작한다. 1단계) HTML 추가 body { height: 3000px; /* Used to enable scrolling */ background: linear-gradient(55deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 85%); }

2024-11-07

How To – 부드러운 스크롤

w3.css 부드러운 스크롤 CSS를 사용하여 부드러운 스크롤 효과를 만드는 방법을 알아보자. 부드러운 스크롤링 스크롤 동작 추가: 전체 페이지에서 부드럽게 스크롤할 수 있도록 <html> 요소에 부드럽게 추가한다(참고: 특정 요소/스크롤 컨테이너에 추가할 수도 있다). 1단계) HTML 추가 html { scroll-behavior: smooth; }

2024-11-06

How To – 스크롤 드로잉

w3.css 스크롤 드로잉 JavaScript와 SVG를 이용해 스크롤에 그리는 방법을 알아보자. 스크롤 드로잉 그리기 스크롤 시 삼각형을 그리기 위해 SVG와 JavaScript를 사용한다. <path> 요소여야 한다. 1단계) HTML 추가 <svg id=”mySVG”> <path fill=”none” stroke=”red” stroke-width=”3″ id=”triangle” d=”M150 0 L75 200 L225 200 Z”/> </svg> <script> // Get the id of the <path> element and the length of <path> var triangle = document.getElementById(“triangle”); var length = triangle.getTotalLength(); // The start position of the drawing triangle.style.strokeDasharray = length; // Hide the triangle by offsetting…

2024-11-05

How To – 전체 화면

w3.css 전체 화면 JavaScript로 전체 화면 창을 만드는 방법을 알아보자. 전체 화면 창 JavaScript를 사용하여 전체 화면 모드에서 요소를 보는 방법. 전체 화면 비디오 전체 화면에서 요소를 열려면 다음 element.requestFullscreen() 메서드를 사용한다. <script> /* Get the element you want displayed in fullscreen mode (a video in this example): */ var elem = document.getElementById(“myvideo”); /* When the openFullscreen() function is executed, open the video in fullscreen. Note that we must include prefixes for different browsers, as they don’t support the requestFullscreen…

2024-11-04

How To – 스낵바 / 토스트

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…

2024-11-03

How To – 반응형 플로트

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…

2024-11-02

How To – 클리어 플로트(Clearfix)

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 추가…

2024-11-01

How To – 동일한 높이

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…