목록반응형 (8)

투케이2K

54. (ios/swift) auto lauout (오토 레이아웃) - constraints 가로 크기 반응형 지정

[개발 환경 설정] ​ 개발 툴 : XCODE 개발 언어 : SWIFT [방법 설명] ​ ​ ​
IOS 2021. 11. 21. 16:54
64. (html/css/javascript/jquery) 커스텀 css : 반응형 모바일 설문 조사 화면 제작 실시

[개발 환경 설정] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [외부 css 저장 폴더 경로] ​ [소스 코드] ​ [1] 이 브라우저 사용을 만족하십니까? 매우 만족 만족 보통 불만족 매우 불만족 [결과 출력] [html , css 분리 코드 파일 첨부] [전체 통합 코드 파일 첨부] [외부 css , js 파일 적용 참고] ​ https://blog.naver.com/kkh0977/222449805186 63. (html/css/javascript/jquery) 외부 css , js 파일 생성 및 호출 방법 정의 - link , script [개발 환경 설정] 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [css 파일 생성 및 ..
FrontEnd 2021. 7. 29. 18:10
50. (html/css/javascript/jquery) 부트스트랩 (bootstrap) 반응형 그리드 레이아웃 만들기 - container , col , grid, h 높이

[ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery [소스 코드] ​ col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 col-md-4 col-md-8 col-sm-3 col-sm-3 col-sm-3 col-sm-3 [결과 출력] ​ ​ [요약 설명] ​ 1. 컨테이너는 CSS에서 배운것 처럼 화면구성요소들을 묶기 위한 틀 입니다 2. 컨테이너는 보통 태그들을 중첩해 사용하는 형식을 취하며 부트스트랩도 동일합니다 3. container : 반응형으로 동작하며 고정폭을 가지고 있습니다 (자동 마진 크기를 가지고 있습니다) 4. container-fluid : viewport 전체 폭을 모두 차지하는 컨테이너..
FrontEnd 2021. 7. 19. 16:14
38. (html/css/javascript/jquery) 반응형 tab 탭 화면 기능 구현 - display 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] ONE TWO THREE FOUR /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [CSS 요소 설명] 1. font-family : 폰트 표시 형태 스타일 지..
FrontEnd 2021. 6. 25. 08:23
7. 반응형 디자인 시 모바일 참고 사이즈 확인

/* =========================== */ [ 참고 사이트 ] /* =========================== */ ​ /* =========================== */ [사이트 주소] ​ https://viewportsizer.com/devices/ Viewport Size by Device / Phone Screen Dimensions | Viewport Sizer Tool Use our handy guide for viewport dimensions by device here. All phone screen dimensions listed including popular models for Samsung and Apple iPhone. viewportsizer.c..
참고 사이트 2021. 6. 2. 10:46
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
29. 크롬 (chrome) 브라우저에서 반응형 모바일 디자인 형태 확인 방법

/* =========================== */ [ 설명 ] ​ 1. 크롬 브라우저에서 반응형 모바일 디자인 시 기기별 표시되는 디자인 형태를 확인할 수 있는 방법입니다 /* =========================== */ ​ /* =========================== */ [사용 방법] 1. 크롬 (chrome) 브라우저 실행 > [F12] 단축키 버튼을 누릅니다 ​ ​ ​ ​ 2. 상단에 표시된 [device toolbar] 버튼을 클릭합니다 ​ ​ 3. 상단에 있는 [디바이스 종류]를 선택 하신 후 > 반응형 모바일 형태를 확인합니다 ​ /* =========================== */
IT정보 & IT소식 2021. 4. 8. 08:03
Prev 1 Next