728x90 Front-end/HTML&CSS37 그누보드 모바일 버전 해제하고 반응형 웹으로 사용하는 방법 그누보드에 기껏 반응형 CSS로 작업 해놨더니 모바일 디바이스에서는 못생긴 그누보드 모바일 웹으로 연결 됐다. ㅂㄷㅂㄷ.. 여기서 PC버전으로 들어가도 이상한 뱌율로 보인다. 이 문제는 config 설정 변경을 통해 해결할 수 있다. 1. public_html의 config.php 파일을 연다. 2. use_mobile을 검색해 'G5_USE_MOBILE' 부분을 찾는다. 3. 모바일 홈페이지를 사용하지 않기위해 true->false로 변경해준다. 그러면 이렇게 PC사이트를 기준으로 반응형 스타일이 적용되어 보인다. 그리고 head.sub.php 파일에서 2023. 7. 22. [CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18. 반응형 웹사이트 미디어쿼리 브레이크포인트 잡을 때 참고사항 반응형 웹에 흔하게 쓰이는 브레이크포인트를 챗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. [HTML] Unsplash 랜덤 이미지(무료) src로 불러오기 코드를 이용해 예쁜 상업용 무료 이미지가 가득한 Unsplash의 이미지를 랜덤으로 불러올 수 있다.새로고침하면 이미지가 바뀜. img의 src에 "https://source.unsplash.com/random/?원하는검색어"를 넣어주면 된다.영어 기반 사이트라 영어로 입력해야 많은 결과를 얻을 수 있다. 아래의 이미지는https://source.unsplash.com/random/?seoul" /> 의 결과값이다.seoul을 검색했을 때 나오는 이미지가 랜덤으로 로드된다. 2024-11-07 추가 위 방법은 더이상 작동하지 않습니다엑박이 떠서 찾아보니 source.unsplash.com은 API 사용자에게만 제공되는 것 같아요 2023. 4. 21. [CSS] 스크롤바 scrollbar CSS 스타일링 수정하기 스크롤바는 스크롤바의 부모 요소::-webkit-scrollbar {}를 통해 수정할 수 있다. 예를 들어 페이지 전체의 스크롤바면 body::-webkit-scrollbar{}이다. 스크롤바 선택자는 세부적으로 ::-webkit-scrollbar — 스크롤바 전체. ::-webkit-scrollbar-button — 스크롤바의 버튼 (한 번 누를 때마다 위아래로 한 줄씩 오르내리는 위아래 화살표). ::-webkit-scrollbar-thumb — 드래그할 수 있는 스크롤 손잡이. ::-webkit-scrollbar-track — 흰색 막대 위에 회색 바가 존재할 경우의 스크롤바의 트랙(진행 표시줄). ::-webkit-scrollbar-track-piece — 손잡이에 의해 덮이지 않은 트랙(진행 표.. 2023. 4. 20. [HTML/CSS] ul li에 이미지 사용할 경우 list-style 들여쓰기 맞추기 ul li 구조로 마크업을 하면 li의 텍스트가 여러줄이 되도 들여쓰기가 (지금 이 문단처럼) 자동으로 들어간다. list-item의 마커 타입이 disc,square 등 꽤나 다양하다고 해도 한계가 있기 때문에 보통은 ul {list-style: none;}으로 초기화 시키고 커스텀 이미지를 li 태그 안에 사용할 때가 많다. 이 경우 아래 이미지의 파란선처럼 텍스트 들여쓰기가 맞지않다. 한줄이면 상관없지만 여러줄이면 들여쓰기가 맞지않아 거슬린다. 특히 기관 홈페이지 작업하면 십중팔구는 들여쓰기 맞춰달라고 요청이 들어온다. ul의 list-style에 url을 이용하여 마커를 이미지로 변경할 수도 있지만 사이즈나 위치 등 자유로운 수정이 어렵다. 그래서 이렇게 li 태그 안에 img를 넣어 사용하게 된.. 2023. 4. 18. [HTML/CSS] CSS로 텍스트 여러줄에 여백 있는 밑줄을 만드는 여러가지 방법 (multi line underline) 글에 밑줄을 치는 방법은 기본적으로 text-decoration: underline;이 있다. 하지만 가끔 글씨랑 밑줄간격이 너무 가까워서 간격을 벌리고 싶을 때! 위의 기본 underline 속성에서는 쉽지 않음 아래에 나온 5,6번이 기본 underline속성에서 밑줄 포지션이랑 offset을 수정하여 결과를 만든 케이스인데, 호환성이 매우 떨어져서 사용하지 않는게 좋다. (최신 버전의 크롬 브라우저로만 사용하는 웹사이트가 아니라면..!) 아래 텍스트 중 글자와 밑줄 사이에 여백이 있는 게 몇 개인가요? 밑줄이 보이시나요? 밑줄이 보이시나요? 밑줄이 보이시나요? 이와 같이 3개라면 아래 속성들이 호환되는 브라우저를 사용하고 계십니다. 텍스트에 밑줄을 주는 방법과 여백을 주는 방법을 알아보자 *사용된 .. 2023. 3. 30. 이전 1 2 3 4 5 다음 728x90
