본문 바로가기
728x90
반응형

분류 전체보기166

그누보드 모바일 버전 해제하고 반응형 웹으로 사용하는 방법 그누보드에 기껏 반응형 CSS로 작업 해놨더니 모바일 디바이스에서는 못생긴 그누보드 모바일 웹으로 연결 됐다. ㅂㄷㅂㄷ.. 여기서 PC버전으로 들어가도 이상한 뱌율로 보인다. 이 문제는 config 설정 변경을 통해 해결할 수 있다. 1. public_html의 config.php 파일을 연다. 2. use_mobile을 검색해 'G5_USE_MOBILE' 부분을 찾는다. 3. 모바일 홈페이지를 사용하지 않기위해 true->false로 변경해준다. 그러면 이렇게 PC사이트를 기준으로 반응형 스타일이 적용되어 보인다. 그리고 head.sub.php 파일에서 2023. 7. 22.
[HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24.
[CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22.
[CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18.
윈도우10 VPN 개노답 오류 해결하기 - 원격 서버가 응답하지 않기 때문에 컴퓨터에서 VPN 서버로 네트워크 연결을 할 수 없습니다. 원격 서버가 응답하지 않기 때문에 컴퓨터에서 VPN 서버로 네트워크 연결을 할 수 없습니다. 컴퓨터와 원격 서버 사이에 있는 네트워크 장치(예: 방화벽, NAT, 라우터 등) 중 하나가 VPN 연결을 허용하도록 구성되어 있지 않기 때문일 수 있습니다. 관리자나 서비스 공급자에게 문의하여 문제를 일으키는 장치를 확인하십시오. VPN 접속 정보도 맞고, 맥북에서는 해당 VPN 연결 잘만 됐는데 윈도우 10에서만 죽어라 안됐다. 검색해서 레지스트리 편집기에 컴퓨터\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\PolicyAgent AssumeUDPEncapsulationContextOnSendRule 값 2 이런거 추가도 해보고 개발자분들께 도움을 청했는데 모두.. 2023. 6. 14.
반응형 웹사이트 미디어쿼리 브레이크포인트 잡을 때 참고사항 반응형 웹에 흔하게 쓰이는 브레이크포인트를 챗GPT에게 물어봤다. 통계적으로 3개의 최고의 브레이크포인트가 몇이냐 물어봤더니 자기는 실시간 통계를 알지못하지만 업계에서 통상적으로 쓰이는 것이라며 알려주었다. 그런데 개인적으로 요즘은 1920x1080 PC가 대부분이며, 아이패드 프로는 1366x1024 (아마도?), 갤탭은 그보다 높은 해상도도 있다. 딱 세가지로만 나누기엔 웹 뷰포트가 너무 다양화되었다. 768도 아이패드미니 해상도임. 아이패드 에어는 820이라는 점. 2023년 전세계 데스크톱 해상도 통계를 살펴보자 https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide Desktop Screen Resolution Stats Wor.. 2023. 6. 1.
[HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23.
[javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22.
[chatGPT] 챗지피티한테 코딩 배우기 2탄 (실패) ~지난 이야기~ '마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다. 그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다. 그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다.' . . 그리하여 챗지피티를 통해 풀스크린 페이지가 아닌 경우에도 이 효과를 사용하기 위한 챗지피티 여정이 시작되었다. https://selinak.tistory.com/61 여러분 그거 아십니까? 정답은 멀리 있지않습니다. 존나 멀리있습니다. 넝담..이고 정답은 등잔밑에 있었답니다. 챗지피티한테 물어가며 열차례 넘게 질답을 반복하며 코드 시행착오(라 부르고 삽질이라 읽음)을 거쳤는데 아무리 해도 내가 원하.. 2023. 5. 10.
728x90
반응형

티스토리툴바