실시간TV∴영화∴드라마∴예능 CSS11 CSS Progress bars CSS 진행률 표시줄 디자인 입니다. 다양한 용도로 활용할수 있습니다. 2023. 11. 11. HTML / CSS / Javascript 코드 정리해 주는 사이트 1, Online JavaScript Beautifier : 사용자에게 맞게 코드를 정렬해주는 사이트 http://jsbeautifier.org/ Online JavaScript beautifier Beautify JavaScript, JSON, React.js, HTML, CSS, SCSS, and SASS beautifier.io 2, Cleancss : CSS 코드 정리 https://www.cleancss.com/css-beautify/ CSS Formatter Format your CSS to clean it up and beautify it. Make your CSS easier to read and validate it. www.cleancss.com 3, Tabifier http://too.. 2023. 9. 30. 티스토리 블로그 더보기 버튼 css로 꾸미기 스킨 편집 - html편집 CSS탭으로 이동하신 후, 가장 아래의 빈 공간에 아래의 코드를 추가하신 후 저장해 주시면 됩니다. .btn-toggle-moreless, .btn_more, .btn_less { background: #000; /*버튼 배경색*/ } .btn-toggle-moreless, .btn_more, .btn_less { z-index: 1; position: relative; display: inline-block; padding: 5px 7px; /*버튼 안쪽 패딩*/ border-radius: 8px; /*버튼 둥근 정도*/ margin-top: 5px; color: #fff!important; /*버튼의 더보기 글씨색. 하얀색입니다.*/ font-size: 14px!import.. 2023. 9. 26. 웹 페이지에서 JavaScript 와 PHP를 사용하여 모바일 디바이스와 데스크톱 컴퓨터를 구분하는 방법 JavaScript를 사용한 모바일 및 데스크톱 디바이스 구분 JavaScript를 사용하여 모바일 및 데스크톱 디바이스를 구분하는 경우, 사용자의 뷰포트 너비를 확인하여 구분할 수 있습니다. 아래는 JavaScript를 사용한 예제입니다. if (window.innerWidth 2023. 9. 26. 모바일 디바이스에서 화면 가로세로 변경 시 화면 크기 고정 CSS와 미디어 쿼리를 사용하여 반응형 웹 디자인을 구현할 수 있습니다. 다음은 화면 크기를 고정하는 간단한 예제입니다. 이 예제는 화면의 세로 및 가로 모드에서 모두 화면 크기를 고정합니다. @media 쿼리를 사용하여 화면 방향을 감지하고, 해당 방향에 따라 body 요소의 너비와 높이를 100%로 설정하고 overflow: hidden;으로 스크롤을 비활성화합니다. 이렇게 하면 사용자가 모바일 디바이스의 방향을 변경해도 페이지가 고정된 크기로 유지됩니다. 페이지의 내용은 고정된 크기 내에서 스케일링될 것입니다. 원하는 스타일 및 디자인에 따라 CSS를 조정할 수 있습니다. 2023. 9. 26. CSS (Cascading Style Sheets) 선택자 CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 1, .sidebar .tab-list .mysla 2, .sidebar.tab-list.mysla 3, .sidebar, .tab-list, .mysla 4, .sidebar > .tab-list > .mysla .sidebar .tab-list .mysla 이 선택자는 HTML 문서 내에서 다음과 같은 구조를 가진 요소를 선택합니다: .sidebar 클래스를 가진 요소 내부의 .tab-list 클래스를 가진 요소 내부의 .mysla 클래스를 가진 요소. 이 선택자는 중첩된 요소를 선택하는 데 사용됩니다. 즉, .sidebar 내부의 .tab-list 내부의 .mysla에 스타일을 적용하려면 이 선택자를 사용할 수 있습니다. ... 2023. 9. 24. 심플한 오디오 플레이어 HTML5 Audio CSS style 심플한 오디오 플레이어 입니다. 소스 2023. 9. 23. CSS 웹 페이지 터치 이벤트 -webkit-touch-callout:none; -webkit-user-select:none; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); 위의 CSS 코드는 모바일 웹 개발에서 사용되는 코드 일부로, 웹 페이지에서 터치 이벤트에 대한 특정 스타일 및 동작을 설정합니다. 이 코드를 각각 설명해보겠습니다. -webkit-touch-callout:none; 이 코드는 웹 페이지에서 글자나 이미지를 길게 터치했을 때 나타나는 기본 브라우저 메뉴를 비활성화합니다. 예를 들어, 글자나 이미지를 길게 눌렀을 때 "이미지 저장", "링크 복사"와 같은 메뉴가 표시되지 않도록 합니다. -webkit-user-select:none; 이 코드는 텍스트나 요소의 선택(드래그 및 복사).. 2023. 9. 23. Placeholder 포커스시 감추기, 글자색 변경 아래와 같이 css를 삽입함으로 이를 처리할수 있다. CSS Placeholder 포커스시 감추기 input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:tra.. 2023. 9. 21. CSS Button transitions HTML 삽입 미리보기할 수 없는 소스 소스 Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button 2023. 9. 19. 제이쿼리 CSS Digital Clock HTML 삽입 미리보기할 수 없는 소스 소스 2023. 9. 19. 이전 1 다음 반응형
