스타일4 웹 페이지에서 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. 티스토리 블로그 "나의 링크" 활성화해서 사이드바에 추가하기 티스토리 블로그 관리자 사이트의 왼쪽 메뉴에 보면 "나의 링크"가 있고 이곳에 몇몇 패밀리 사이트나 관심있는 사이트를 등록할 수 있는데 정작 스킨에 따라 이 링크를 표시할 수 있는 방법이 알려져 있지 않은 경우가 많습니다. 티스토리 스킨가이드에도 어떻게 사용해야 하는지 특별한 설명이 없습니다. 아래처럼 "나의 링크" 치환자 (s_link_rep)를 스킨편집/HTML편집에서 사이드바 엘리먼트에 추가해 주면 됩니다. 추천 링크 이렇게 하면 사이드바 메뉴에 추천 링크가 나타나고 이것을 적절히 css 스타일 을 사용해 디자인 하면 됩니다. 2023. 9. 22. 이전 1 다음 반응형