웹 개발 의 Layout 레이아웃

레이아웃 종류:
페이지 레이아웃 의 몇 가지 방식 (정적 레이아웃, 흐름 식 레이아웃, 자가 적응 레이아웃, 응답 식 레이아웃, 탄력성 레이아웃)
사용 제안:
1. pc 엔 드 만 한다 면 정적 레이아웃 (너비 정) 이 가장 좋 은 선택 입 니 다.2. 이동 단 을 만 들 고 높이 와 요소 의 간격 에 대한 요구 가 높 지 않 으 면 탄성 레이아웃 (remy + js) 이 가장 좋 은 선택 입 니 다. css + js 1 부 조절 font - size 로 해결 합 니 다.3. pc, 이동 이 호 환 되 고 요구 가 높 으 면 응답 식 구 조 는 가장 좋 은 선택 입 니 다. 전 제 는 디자인 이 서로 다른 높이 와 너비 에 따라 서로 다른 디자인 을 하고 응답 식 은 미디어 조회 에 따라 서로 다른 구 조 를 하 는 것 입 니 다.
1. 정적 레이아웃 (static layout)
전통 적 인 웹 디자인, 웹 페이지 의 모든 요소 의 사 이 즈 는 모두 px 를 단위 로 사용 합 니 다.
1. 레이아웃 특징
브 라 우 저의 크기 가 구체 적 으로 얼마 든 지 간 에 웹 페이지 레이아웃 은 처음부터 코드 를 썼 을 때의 레이아웃 에 따라 표 시 됩 니 다.일반적인 pc 사 이 트 는 정적 (너비) 레이아웃 입 니 다. 즉, min - width 를 설정 한 것 입 니 다. 그러면:
1. 이 너비 보다 작 으 면 스크롤 바 가 나타 납 니 다.2. 이 너비 보다 크 면 내용 이 중간 에 배경 을 추가 하고 이런 디자인 은 pc 엔 드 에서 흔히 볼 수 있 습 니 다.
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=zh-cn
2. 디자인 방법
PC: 가운데 레이아웃, 모든 스타일 은 절대 너비 / 높이 (px) 를 사용 하여 Layout 를 설계 합 니 다. 화면 너비 가 조정 되 었 을 때 가로 와 세로 스크롤 바 를 사용 하여 가 려 진 부분 을 찾 습 니 다.
모 바 일 장치: 모 바 일 사 이 트 를 따로 만 들 고 하나의 레이아웃 을 따로 설계 하 며 wap. 또는 m. 브 라 우 저 사용자 에이전트 에 따라 모 바 일 단 을 식별 하고 방향 을 바 꿉 니 다.
PC 측 자체 적응 디자인 상세 정보 참조 Google 개발 문서
장점: 이런 레이아웃 방식 은 디자이너 와 CSS 작성 자 에 게 가장 간단 하고 호환성 문제 도 없다.
단점: 사용자 의 화면 크기 에 따라 다 르 게 표현 할 수 없다 는 것 은 분명 하 다.현재 대부분의 포 털 사이트, 대부분의 기업 의 PC 홍보 사 이 트 는 이런 레이아웃 방식 을 채택 하고 있다.픽 셀 사 이 즈 를 고정 시 키 는 웹 페이지 는 픽 셀 사이즈 모니터 와 일치 하 는 가장 간단 한 방법 이다.그러나 이런 방법 은 미래 웹 페이지 를 완전히 호 환 하 는 제작 방법 이 아니 므 로 우 리 는 알 수 없 는 장치 에 적응 하 는 방법 이 필요 하 다.
2. 자체 적응 레이아웃 (Adaptive Layout)
레이아웃 에 적응 하 는 특징 은 @ media 미디어 를 사용 하여 조회 하 는 것 입 니 다.
각각 다른 화면 해상도 로 레이아웃 을 정의 합 니 다. 즉, 여러 개의 정적 레이아웃 을 만 드 는 것 입 니 다.
모든 정적 레이아웃 은 화면 해상도 범위 에 대응 합 니 다.화면 해상 도 를 바 꾸 면 서로 다른 정적 부분 (페이지 요소 위치 가 바 뀌 었 음) 을 전환 할 수 있 지만 모든 정적 레이아웃 에서 페이지 요 소 는 창 크기 의 조정 에 따라 변화 하지 않 습 니 다.자가 적응 레이아웃 을 정적 레이아웃 의 시리즈 로 볼 수 있다.
1. 레이아웃 특징
화면 해상도 가 변 할 때 페이지 안의 요소 의 위 치 는 변 하지 않 고 크기 는 변 하지 않 습 니 다.
2. 디자인 방법
@ media 미디어 조 회 를 사용 하여 크기 와 미디어 의 장치 에 다른 스타일 로 전환 합 니 다.우수한 응답 범위 디자인 에서 적당 한 범위 안의 설비 에 가장 좋 은 체험 을 할 수 있 고 같은 설비 에서 실제 적 으로 고정된 구 조 를 할 수 있다.
3. 스 트림 레이아웃 (Liquid Layout)
스 트림 레이아웃 (Liquid) 의 특징 ("Fluid" 라 고도 함) 은 화면 요소 의 너비 가 화면 해상도 에 따라 조정 되 지만 전체 레이아웃 은 변 하지 않 습 니 다. 울타리 시스템 (격자 시스템) 을 대표 합 니 다.
웹 페이지 의 주요 구분 구역 의 사 이 즈 는 백분 수 (min - *, max - * 속성 과 조합 하여 사용) 를 사용 합 니 다. 예 를 들 어 웹 페이지 주체 의 폭 을 80% 로 설정 하고 min - width 는 960 px 입 니 다. 그림 도 유사 하 게 처리 합 니 다 (width: 100%, max - width 는 일반적으로 그림 자체 의 사이즈 로 설정 하여 늘 어 나 는 것 을 방지 합 니 다).
1. 레이아웃 특징
화면 해상도 가 변 할 때 페이지 에 있 는 요소 의 크기 는 변 하지만 레이아웃 은 변 하지 않 습 니 다. [화면 이 너무 크 거나 작 으 면 요소 가 제대로 표시 되 지 않 습 니 다]
2. 디자인 방법
% 백분율 로 폭 을 정의 합 니 다. 높이 는 대부분 px 로 고정 되 어 있 으 며, 시각 영역 (viewport) 과 부모 요소 의 실시 간 크기 에 따라 조정 하여 가능 한 한 각종 해상도 에 적응 할 수 있 습 니 다.
이러한 레이아웃 방식 은 웹 전단 개발 초기 역사상 서로 다른 사이즈 의 PC 화면 에 대응 하 는 데 사용 되 었 다. (그 때 는 화면 크기 의 차이 가 크 지 않 았 다)현재 의 모 바 일 개발 에 도 자주 사용 되 는 레이아웃 방식 이지 만 단점 이 뚜렷 하 다. 주요 한 문 제 는 화면 크기 가 너무 크 면 원래 디자인 에 비해 너무 작 거나 너무 큰 화면 에 정상적으로 표시 되 지 않 는 다 는 것 이다. 너비 가% 백분율 로 정의 되 지만 높이 와 문자 크기 등 은 대부분 px 로 고정 되 어 있 기 때문에 대형 화면의 핸드폰 에 표시 효 과 를 나타 낸다.일부 페이지 요소 의 너비 가 길 어 지지 만 높이, 문자 크기 는 원래 와 같 습 니 다 (즉, 이 물건 들 은 '흐름 식' 으로 변 할 수 없습니다). 디 스 플레이 가 매우 조 화 롭 지 않 습 니 다.
4. 응답 레이아웃 (Responsive Layout)
CSS 3 에 미디어 조회 기술 이 등장 하면 서 응답 식 디자인 이라는 개념 도 생 겼 다. 응답 식 디자인 의 목 표 는 모든 단말기 (각종 사이즈 의 PC, 핸드폰, 시계, 냉장고 의 웹 브 라 우 저 등) 에서 한 페이지 를 확보 하 는 것 이다.만 족 스 러 운 효 과 를 나 타 낼 수 있 습 니 다. CSS 작성 자 에 게 는 구현 에 있어 서 구체 적 인 기법 에 구 애 받 지 않 습 니 다. 그러나 스 트림 레이아웃 + 탄력 적 인 레이아웃 을 섞 은 다음 미디어 조회 기술 과 함께 사용 합 니 다. 각각 다른 화면 해상도 로 레이아웃 을 정의 하 는 동시에 모든 레이아웃 에서 스 트림 레이아웃 을 사용 하 는 이념, 즉 페이지 요소 의 폭 은 창 에 따라 조 정 됩 니 다.동작 이 적당 합 니 다. 즉, 여러 개의 유체 식 구 조 를 만 들 고 각각 화면 해상도 범위 에 대응 합 니 다. 응답 식 구 조 를 스 트림 구조 와 자가 적응 구조 디자인 이념 의 융합 으로 볼 수 있 습 니 다.
응답 식 은 거의 우수한 페이지 레이아웃 의 표준 이 되 었 다.
1. 레이아웃 특징
모든 화면 해상도 아래 에 요소 의 위치 와 크기 가 변 하 는 레이아웃 스타일 이 있 습 니 다.
2. 디자인 방법
미디어 조회 + 스 트림 레이아웃 입 니 다. 보통 @ media 미디어 조회 와 그리드 시스템 (Grid System) 을 사용 하여 상대 적 인 레이아웃 단위 와 결합 하여 레이아웃 을 합 니 다. 실제 적 으로 종합 응답 식, 흐름 등 상기 기술 은 CSS 를 통 해 단일 페이지 의 서로 다른 장치 에 서로 다른 스타일 의 기술 을 통칭 합 니 다.
장점: pc 와 이동 단 에 적응 하여 인내심 이 충분 하면 효과 가 완벽 합 니 다.
단점: (1) 미디어 조 회 는 유한 하 다. 즉, 매 거 할 수 있 고 주류 의 너비 에 만 적응 할 수 있다. (2) 충분 한 화면 크기 와 일치 하려 면 작업량 이 적지 않 고 디자인 도 여러 버 전이 필요 하 다.

                ：
"applicable-device" content="pc,mobile">
"Cache-Control" content="no-transform ">

5. 신축 레이아웃 (rem / em 레이아웃)
remy / em 차이: remi 는 html 요소 의 font - size 크기 에 비해 em 은 부모 요소 에 비해.
1. 레이아웃 특징
em 또는 remi 단 위 를 사용 하여 상대 적 인 레이아웃 을 진행 합 니 다. 상대 적 으로% 백분율 이 유연 하고 브 라 우 저의 글꼴 크기 조정 과 크기 조정 등 정상 적 인 디 스 플레이 를 지원 할 수 있 습 니 다. em 은 상대 적 으로 부모 요소 이기 때문에 홍보 되 지 않 았 습 니 다.[중국 사이트 에서 웹 페이지 를 제작 할 때 CSS 로 글꼴 크기 를 강제로 정의 하여 모든 사람 이 일치 하 는 효 과 를 볼 수 있 도록 합 니 다. 왕 이, 소 후 등 포 털 사 이 트 를 포함 한 대부분의 사이트 에서 절대 단위 px (픽 셀) 를 사용 합 니 다.그러나 사이트 의 용이 성 을 고려 하면 글꼴 크기 는 가 변 적 이 어야 한다. 일부 시력 이 좋 지 않 은 사람들 은 글꼴 을 확대 해 야 페이지 내용 을 잘 볼 수 있다. 그러나 대부분의 브 라 우 저 시장 을 차지 하 는 IE 는 px 를 단위 로 하 는 글꼴 크기 를 조정 할 수 없다. 외국 사람들 은 사이트 의 용이 성 을 매우 중시 하 며, 상당 수 외국 사이트 가 이미 사용 하고 있다.em 은 글꼴 단위 로 한다.
2. 디자인 방법
1. 이러한 레이아웃 의 특징 은 문 자 를 감 싸 는 각 요소 의 사 이 즈 는 em / rem 을 단위 로 하고 페이지 의 주요 구분 구역 의 사 이 즈 는 백분 수 나 px 를 단위 로 하 는 것 이다 ('흐름 식 레이아웃' 이나 '정적 / 고정 레이아웃' 과 같다).초기 브 라 우 저 는 전체 페이지 의 크기 를 비례 적 으로 조정 하 는 것 을 지원 하지 않 습 니 다. 웹 페이지 의 텍스트 크기 만 확대 하 는 것 을 지원 합 니 다. 이 경우 em / rem 단 위 를 사용 하면 패키지 문자 의 요 소 를 텍스트 크기 에 따라 크기 를 조정 할 수 있 습 니 다.
2. 브 라 우 저의 기본 글꼴 높이 는 보통 16px, 즉 1em: 16px 이지 만 1: 16 의 비율 은 계산 하기 어렵 습 니 다. 단위 em / rem 을 더욱 직관 적 으로 하기 위해 CSS 작성 자 는 페이지 와 노드 글꼴 을 62.5% 로 설정 합 니 다. 예 를 들 어 remi 로 글꼴 을 제어 할 때 루트 노드 html 의 글꼴 크기 를 설정 해 야 합 니 다. 브 라 우 저의 기본 글꼴 크기 는 16px * 62.5% = 10px 이기 때 문 입 니 다. 이렇게 1rem 은 10px 입 니 다.계산 이 편리 하 다.
3. em / rem 으로 사 이 즈 를 정의 하 는 또 다른 장점 은 들 여 쓰기 / 글꼴 단위 padding 또는 margin / 브 라 우 저 로 글꼴 사 이 즈 를 설정 하 는 경우 (em / rem 이 글꼴 크기 에 비해 동기 화 되 기 때 문) 입 니 다. 예 를 들 어 p {text - indent: 2em;}.
4. remi 단위 의 탄력성 구 조 를 사용 하여 이동 단 에서 도 인기 가 많 습 니 다.
사실 이동 단 에서 이른바 탄성 레이아웃 을 사용 하 는 것 은 무리 입 니 다. 이동 단 탄성 레이아웃 이 유행 하 는 이 유 는 결국 remi 단위 가 (화면 크기 에 따라) 페이지 의 각 요소 의 크기, 문자 의 큰 시간 을 조정 하 는 것 이 좋 기 때 문 입 니 다. 사실 vw, vh 등 후발 주자 단 위 를 사용 하면 완벽 한 스 트림 레이아웃 을 실현 할 수 있 습 니 다.(높이 와 문자 크기 가 모두 '흐름 식' 으로 변 할 수 있다) 탄력 적 인 구 조 는 더 이상 필요 하지 않다.
글 의 출처:https://www.cnblogs.com/zzym/p/9606575.html