목록viewport (5)

투케이2K

107. (Web/FrontEnd) HTML meta tag 메타 태그 viewport 뷰포트 사용해 모바일 웹 zoom 줌 확대 , 축소 , 사이즈 고정

[개발 환경 설정]​개발 툴 : Edit++개발 언어 : html, css, js, jquery​ [소스 코드] ------------------------------------------------------------------------------------[사전) 속성 값 설명]------------------------------------------------------------------------------------1. width=device-width : 사용자가 실행한 디바이스의 넓이 값에 맞춘다2. initial-scale : 페이지 첫 로딩 시 줌 레벨 설정 값3. minimum-scale : 페이지 최소 줌 레벨 설정 값4. maximum-scale : 페이지 최대 줌 레벨 설..
FrontEnd 2024. 6. 26. 19:51
42. (html/css/javascript/jquery) viewport media 뷰포트 미디어 쿼리 반응형 기본 코드 작성

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저] ​ ​ ​[모바일] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ 1. viewport : 메타 태그로 반응형 뷰 포트 설정 실시 2. media : 실시간 반응형 뷰 포트 디스플레이 화면 크기 확인 3. min-wi..
FrontEnd 2021. 7. 12. 08:27
58. (javascript/자바스크립트) view port 뷰 포트, scroll 스크롤 참고한 객체 좌표값 구하기 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. getBoundingClientRect : view port 화면 기준으로 객체 좌표값을 구할 때 사용합니다 ..
JavaScript 2021. 6. 13. 11:12
11. (html/css/javascript/jquery) 기본 반응형 레이아웃 구조 생성 - viewport 뷰포트 , media 미디어 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저] ​ ​ ​[모바일] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크기 지정..
FrontEnd 2021. 5. 26. 13:27
10. (html/css/javascript/jquery) viewport 뷰포트 , media 미디어 사용해 반응형 모바일 구조로 레이아웃 변경 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ [결과 출력] ​ ​[브라우저 화면] ​ ​[모바일 화면] /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 지정 3. height : 세로 크..
FrontEnd 2021. 5. 25. 17:52
Prev 1 Next