본문 바로가기

CSS🔧/반응형20

아이폰 전화번호/숫자 css 링크 색 변경 ios 전화번호 / 숫자 입력시 css로 지정한 컬러가 적용되지않는다 또 ios 버전에 따라 숫자만 적용되는 것도 있고 전화번호만 먹는 애도있고.. (망할 아이폰) css head에 코드입력 전화번호 / 문자 링크적용시 정상작동 확인 010-123-1234 010-123-1234 참고링크 https://youngkeol.tistory.com/99 2022. 11. 16.

04_display grid flex 는 한방향 레이아웃 (한방향) 익스 일부 먹음 grid 두방향 레이아웃 (가로 세로 둘다가능) 좀더 복잡한 행렬구조 (표) 구현 가능 익스에서 아예 안먹음 *병합구조에서 사용하기 편하다 grid-template-rows grid-template-columns (칸의개수) .container { grid-template-columns: 200px 200px 500px; /* grid-template-columns: 1fr 1fr 1fr */ /* grid-template-columns: repeat(3, 1fr) */ /* grid-template-columns: 200px 1fr */ /* grid-template-columns: 100px 200px auto */ grid-template-ro.. 2022. 11. 14.

모바일 포인트컬러 주는 방법 html or :root 익스사용불가 html 도 같이 사용되나 태그로 사용하지않기때문에 지양 :root는 html을 의미한다 변수명을 꼭 사용 --변수명 ex) --txt-point01 / --txt_point01 css common 공통에 지정 font-face 아래 :root 넣기 :root { /* css변수 */ --txt-point01:#962639; } css liyout 시트에 적용 .main_app_banner .txt_wrap strong { color:var(--txt-point01); } var 사용 2022. 11. 11.

모바일 html,css초기셋팅 user-scalable=no 빼면 확대가능 속성값초기값특징 width {1,2} 독자적 속성에 따름. device-width라는 값을 넣는 것이 가능하다. height {1,2} 독자적 속성에 따름 device-height라는 값을 넣는 것이 가능하다. user-scalable no 또는 yes yes 사용자가 브라우저의 확대축소를 가능하게 할 것인지 정의. initial-scale 1부터 10 1 초기 확대값 minimum-scale 0부터 10 .25 최소 확소값 initial-scale 0부터 10 1.6 최대 확대값 https://nuli.navercorp.com/community/article/1132729 css 초기화코드 주석처리 해제 /* 반응형, 모바일에서 모든요소의 패딩,선을 크기안에.. 2022. 11. 7.

모바일 max-width: 100% 초기화코드 max-width: 100% 이미지의 크기를 원본만큼만 더이상 커지지 않는다 기본은 100% 채운다 높이는 필요에 따라 고정되어있음 /* 모바일, 반응형에서 이미지가 원본보다 커지지않게함 */ img {max-width: 100%;} 2022. 11. 7.

CSS Flex Flex 정의 display:flex - 익스 10이하에서 안됨, ie11에서 여러가지 버그이슈가 있지만 대응가능 - float보다 유연하게 레이아웃 배치 가능 - 모바일, 반응형 레이아웃에서 주로 사용 - 요소의 순서변경등 레이아웃의 변화가 많을경우 편함(flex-direction, flex-wrap, order) - ie11 지원이 2022년 6월에 종료되며 앞으로 개발되는 신규사이트들은 ie11 크로스브라우징을 하지않는경우가 늘어나고있음 - 좌우, 상하 배치하는 모든 레이아웃에 사용가능 - 수직정렬시 flex사용하면 쉽게 가능(align-items:center) display:flex 이슈 - flex로 컬럼레이아웃 잡을경우 좌우 여백 주면 flex아이템은 크기가 줄어듬(flex-shrink:1이므.. 2022. 11. 7.

모바일 환경으로 접속하기 / 모바일 크로스브라우징 1. 크롬웹스토어: user agent switcher로 user agent를 변경(ios: iphone 6로 변경) 2. url에 www -> m(ex m.naver 등등) m으로 바꾼다. - m이 서버의 루트폴더명이며 그냥 접속이 되는 경우 3. user agent를 모바일로 변경한뒤 구글로 검색한후 접속 그래도 안되면 스마트폰을 접속 모바일 크로스브라우징 필수! - 개발시: pc크롬 - 안드로이드 크롬, 아이폰 사파리(가장이슈가많음) (아이폰의크롬과 .안드로이드 크롬 다 다름) - 네이버앱 삼성인터넷은 크로미언기반의 브라우저(크롬과 거의 동일) 안드로이드 환경에 삼성인터넷이 있지만 기반은 크롬이다. 갤럭시 하위버전 S8 기준 모바일 화면 SCREEN SIZE6.2 INCH 화면의 대각선 길이 RES.. 2022. 11. 7.

반응형 모바일이란? 모바일 버전에 익스는 없음 - display : flex, grid - float 없음 float 개념이 없기때문에 flex 필수! 사용법 익히기 사이트개발방식 - 적응형 - 반응형 데스크탑과 모바일사이트를 따로 개발 데탑, 타블렛, 모바일등 모든 디바이스에 맞춰서 하나의 소스로 개발 ex. 기능이 많은 사이트(네이버, 쇼핑몰,은행사이트 등) ex. 데탑과 모바일의 구성을 따로 최적화해야할 경우(아산병원) ex. 쇼핑몰 등 기능이 매우많은 경우를 제외하고 모두 반응형으로 개발되는 추세 (일반적인 회사 사이트) DB컷의 10개 중 8개는 이미 반응형 익스 반영 안하는 추세 곧 100% 반응형제작되는 추세 유지보수 측면에서 반응형이 활용도가 높다 이유는 데탑용/모바일 2개 만드는것보다 반응형 한번으로 유지보.. 2022. 11. 7.

이전 1 2 다음

티스토리툴바