자바(JAVA)기반 안드로이드 웹&앱 개발 29일차 (CSS, 레이아웃, 요소배치, 글자생략, 반응형 웹)

다양한 레이아웃의 구성과 기능

수평, 중앙, One True 정렬 레이아웃

1) 수평정렬 레이아웃

(1) 자손에게 float 속성을 지정하고, 부모의 overflow 속성에는 hidden 키워드를 적용한다.

※ 수평정렬 레이아웃 예시

​

2) 중앙정렬 레이아웃

(1) 중앙 정렬하고 싶은 태그에 width 속성을 부여하고 margin 속성을 ‘0 auto’로 입력

※ 중앙정렬 레이아웃 예시

 

​

3) One True 레이아웃

(1) 행 구성하기 : #top, #middle, #bottom 공간 3개 분할

(2) 열 구성하기 : #middle 공간을 분할태그로 2개 분할

(3) 레이아웃 구성하기

.....- 부모 태그에 고정된 너비를 입력하기

.....- 수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용하기

......☞ width 속성과 heigh 속성을 지정하지 않고 overflow 속성에 hidden을 적용하면 유동

..........영역을 감싸므로 안된다.

.....- 자손 태그에 적당한 너비를 입력하고 float 속성을 적용하기

.....- 자손 태그의 너비 총합이 부모 너비가 될 때 가장 좋다.

※ One True 레이아웃 예시

 

​

2. 요소배치

.1) 절대 위치를 사용한 요소 배치

..(1) 자손의 position 속성에 absolute를 적용하려면 부모의 position 속성에 relative 적용

※ 절대 위치를 사용한 요소 배치 예시

 

​

.2) 요소를 중앙에 배치

..(1) 중앙 정렬하려는 div 태그의 position 속성을 absolute로 지정한다.

..(2) left 속성과 top 속성을 모두 50% 로 지정한다.

..(3) 중앙에 정렬하려는 div 태그의 margin-left 와 margin-top 속성에 음수를 입력한다.

..(4) 이때 입력하는 음수 값은 태그 너비와 높이의 정확히 반이어야 한다.

※ 요소를 중앙에 배치 예시

 

​

.3) 요소를 고정 위치에 배치

,,(1) 고정된 바를 만드는 방법

...- position 스타일 속성에 fixed를 적용한다.

...- left, top, right, bottom 속성에 값을 입력해 위치를 설정한다.

...- width, height 속성으로 크기를 설정한다.

※ 고정된 바를 만드는 방법 예시

 

​

3. 글자생략

※ 글자생략 ellipsis 예시

 

​

반응형 웹

반응형 웹 소개

.1) 웹 페이지 하나로 Desktop, 태블릿PC. 스마트폰에 맞게 디자인이 자동으로 반응해서

....변경되는 웹페이지를 의미한다.

.2) 반응형 웹페이지는 미디어 쿼리(media query)를 사용해 개발한다.

 

2. 반응형 웹을 위한 설정

.1) 뷰포트 설정

..(1) meta 태그는 웹 페이지에 추가 정보를 제공할 때 사용한다.

..(2) name 속성에 viewport가 입력된 meta 태그를 viewport meta 태그라고 한다.

<meta name=“viewport” content=“user-scalable=no,initial-scale=1,maximum-scale=1”>

※ viewport meta 태그 사용하기 예시

 

​

.2) 미디어 쿼리 설정

..(1) @media 규칙과 media 속성으로 사용할 수 있다.

..(2) @-규칙@-rule이란 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용하고,

......@로 시작한다.

..(3) media 속성은 link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만

......CSS 파일을 불러올 때 사용한다.

..(4) @media 규칙을 사용한 미디어 쿼리 사용하기

※ @ media 규칙을 사용한 미디어 쿼리 사용 예시

 

​

※ media 속성을 사용한 미디어 쿼리 사용 예시(스타일시트속 내용은 위 예제와 동일)

 

​

※ 스마트폰, 태블릿PC, 데스크톱 구분 예시(너비를 달리하면 색깔이 달라짐)

 

​

※ 화면 방향 전환(orientation 속성 사용)

 

3. 반응형 웹 패턴

.1) 너비가 큰 화면(데스크톱)에서는 메뉴가 왼쪽, 너비가 좁은 화면(모바일 장치)에서는 메뉴가 위쪽

☞ menu float : left, / HTML에서 menu, section 순 작성

.2) 너비가 큰 화면(데스크톱)에서는 메뉴가 오른쪽, 너비가 좁은 화면(모바일 장치)에서는 메뉴가 위쪽

☞ menu float : right, section float : left / HTML에서 menu, section 순 작성

.3) 너비가 큰 화면(데스크톱)에서는 메뉴가 왼쪽, 너비가 좁은 화면(모바일 장치)에서는 메뉴가 아래쪽

☞ menu float : left / HTML에서 section, menu 순 작성

.4) 너비가 큰 화면(데스크톱)에서는 메뉴가 오른쪽, 너비가 좁은 화면(모방리 장치)에서는 메뉴가 아래쪽

☞ menu float : right, section float : left / HTML에서 section, menu 순 작성

.5) HTML 태그 구성은 모바일 장치를 기준으로 한다.

.6) float 태그의 left와 right 를 활용해 적당한 위치에 놓아둔다.

※ .1) 예시 (데스크톱 메뉴 왼쪽, 모바일 메뉴 위쪽)