w3.css 텍스트 선택 비활성화 CSS를 사용하여 HTML에서 텍스트 선택을 비활성화하는 방법을 알아보자. 텍스트 선택 비활성화 해당 속성을 사용하면 user-select 요소의 텍스트 선택을 비활성화할 수 있다. 웹 브라우저에서 어떤 텍스트를 더블클릭하면 선택/강조 표시된다. 이 속성을 사용하면 이를 방지할 수 있다. 1단계) CSS 추가 .prevent-select { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ }

w3.css Textarea 크기 조정 비활성화 텍스트 영역의 크기 조정 옵션을 비활성화하는 방법을 알아보자. Textarea 크기 조절 비활성화 이 resize 속성을 사용하면 텍스트 영역의 크기를 조절할 수 있는지 여부를 지정할 수 있다. 1단계) CSS 추가 textarea { resize: none; }

w3.css 플레이스홀더 색상 변경 CSS를 사용하여 플레이스홀더 속성의 색상을 변경하는 방법을 알아보자. 플레이스홀더 색상 input 요소를 사용하고 placeholder 속성을 추가한다. 1단계) HTML 추가 <input type=”text” placeholder=”A red placeholder text..”> 2단계) CSS 추가 대부분의 브라우저에서 플레이스홀더 텍스트는 회색이다. 이를 변경하려면 ::placeholder 선택기를 사용하여 플레이스홀더의 스타일을 지정합니다. Firefox는 플레이스홀더에 불투명도를 낮추므로 이 문제를 해결하기 위해 opacity: 1를 사용한다. ::placeholder { color: red; opacity: 1; /* Firefox */ } ::-ms-input-placeholder { /* Edge 12 -18 */ color: red; }

w3.css Contenteditable 테두리 제거 편집 가능한 요소에서 테두리를 제거하는 방법을 알아보자. Contenteditable 테두리 제거 기본적으로 contenteditable가 true로 설정된 요소 안에 글을 쓰면 해당 요소는 초점이 맞춰진 테두리를 갖게 된다. 그러나 CSS를 사용하여 테두리를 제거할 수 있다. 1단계) HTML 추가 <p contenteditable=”true”>This is an editable paragraph.</p> 2단계) CSS 추가 [attribute] 선택기를 사용하여 콘텐츠에 적용할 수 있는 모든 요소를 선택하고 outline 속성을 사용하여 테두리를 제거한다. [contenteditable] { outline: 0px solid transparent; }

w3.css 장치 모양 CSS를 사용하여 다양한 기기의 모양(스마트폰, 태블릿, 노트북)을 만드는 방법을 알아보자. 스마트폰 1단계) HTML 추가 <div class=”smartphone”> <div class=”content”> <iframe src=”/w3css/tryw3css_templates_band.htm” style=”width:100%;border:none;height:100%” /> </div> </div> 2단계) CSS 추가 /* The device with borders */ .smartphone { position: relative; width: 360px; height: 640px; margin: auto; border: 16px black solid; border-top-width: 60px; border-bottom-width: 60px; border-radius: 36px; } /* The horizontal line on the top of the device */ .smartphone:before { content: ”; display: block; width: 60px; height: 5px; position: absolute;…

w3.css 항상 스크롤바 표시 CSS를 사용하여 스크롤바를 항상 표시하는 방법을 알아보자. 스크롤바를 강제로 표시/항상 표시하는 방법 수평 및 수직 스크롤바를 모두 표시하려면 다음 overflow: scroll;을 추가한다. 1단계) CSS 추가 body { overflow: scroll; /* Show scrollbars */ }   수직 스크롤바만 표시하거나 수평 스크롤바만 표시하려면 overflow-y 또는 overflow-x를 사용하자.   예제 body { overflow-y: scroll; /* Show vertical scrollbar */ overflow-x: scroll; /* Show horizontal scrollbar */ }

w3.css 스크롤바 숨기기 CSS로 스크롤바를 숨기는 방법을 알아보자. 스크롤바를 숨기는 방법 overflow: hidden;를 추가하여 가로 및 세로 스크롤바를 모두 숨긴다. 1단계) HTML 추가 body { overflow: hidden; /* Hide scrollbars */ }   세로 스크롤바만 숨기거나 가로 스크롤바만 숨기려면 overflow-y 또는 overflow-x를 사용한다.   예제 body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */ }   overflow: hidden을 선택하면 스크롤바의 기능도 제거된다는 점에 유의하자. 페이지 내부로 스크롤할 수 없다. 스크롤바 숨기기, 기능은 유지…

w3.css 사용자 정의 스크롤바 CSS를 사용하여 사용자 정의 스크롤바를 만드는 방법을 알아보자. ⭐ 사용자 정의 스크롤바는 Firefox 및 Edge 79 이전 버전에서는 지원되지 않는다. 사용자 정의 스크롤바를 만드는 방법 크롬, 엣지, 사파리, 오페라에서는 브라우저의 스크롤바 모양을 수정할 수 있는 비표준 ::-webkit-scrollbar 의사 요소를 지원한다. 다음 예에서는 회색 트랙/바 색상과 짙은 회색(#888) 핸들이 있는 얇은(너비 10px) 스크롤바를 만든다. 1단계) CSS 추가 /* width */ ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background: #f1f1f1; } /* Handle */ ::-webkit-scrollbar-thumb…

w3.css 브라우저 창 CSS CSS를 사용하여 브라우저 창 예제를 만드는 방법을 알아보자. 브라우저 창 1단계) HTML 추가 <div class=”container”> <div class=”row”> <div class=”column left”> <span class=”dot” style=”background:#ED594A;”></span> <span class=”dot” style=”background:#FDD800;”></span> <span class=”dot” style=”background:#5AC05A;”></span> </div> <div class=”column middle”> <input type=”text” value=”http://www.w3schools.com”> </div> <div class=”column right”> <div style=”float:right”> <span class=”bar”></span> <span class=”bar”></span> <span class=”bar”></span> </div> </div> </div> <div class=”content”> <h3>Browser Window</h3> <p>How to create a detailed browser window look with CSS.</p> </div> </div> 2단계) CSS 추가 body { font-family: Arial } *…

w3.css 전체 높이 요소 CSS를 사용하여 브라우저 창의 전체 높이에 맞게 요소를 늘리는 방법을 알아보자. 전체 높이 Div 1단계) HTML 추가 <div class=”full-height”>..</div> 2단계) CSS 추가 html, body { height: 100%; } .full-height { height: 100%; }