w3.css 수직선 CSS를 사용하여 다양한 구분선을 만드는 방법을 알아보자. 수직선을 만드는 방법 1단계) HTML 추가 <style> .vl { border-left: 6px solid green; height: 500px; } </style> <div class=”vl”></div> 2단계) CSS 추가 페이지의 수직선을 가운데 정렬하는 방법 .vl { border-left: 6px solid green; height: 500px; position: absolute; left: 50%; margin-left: -3px; top: 0; }

w3.css 목록의 글머리 기호 색상 변경 CSS를 사용하여 목록의 글머리 기호 색상을 변경하는 방법을 알아보자. 글머리 기호 색상 변경 ::selection 선택기를 사용하여 기본 텍스트 선택 색상을 재정의한다. 1단계) HTML 추가 기본 목록을 만들자. <ul> <li>Adele</li> <li>Agnes</li> <li>Billy</li> <li>Bob</li> </ul> 2단계) CSS 추가 ::marker 선택기를 사용하여 목록 항목의 글머리 기호 색상을 변경한다. li::marker { color: red; }

w3.css 텍스트 선택 색상 변경 CSS를 사용하여 기본 텍스트 선택 색상을 재정의하는 방법을 알아보자. 텍스트 선택 색상을 변경하는 방법 ::selection 선택기를 사용하여 기본 텍스트 선택 색상을 재정의한다. 1단계) CSS 추가 ::-moz-selection { /* Code for Firefox */ color: red; background: yellow; } ::selection { color: red; background: yellow; }

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을 선택하면 스크롤바의 기능도 제거된다는 점에 유의하자. 페이지 내부로 스크롤할 수 없다. 스크롤바 숨기기, 기능은 유지…