PC 모니터 크기에 맞춘 웹 페이지를 다른 디바이스에 적용할 수 있는 방법은?

 

디바이스별 해상도

 

모니터

  1. 19인치 화면(표준 비율): 1280 x 1024 픽셀
  2. 20인치 화면(표준 비율): 1600 x 1200 픽셀
  3. 22인치 화면(와이드스크린): 1680 x 1050 픽셀

휴대폰

  1. 아이폰X : 1125x2436픽셀
  2. 갤럭시S10+ : 1440x3040픽셀
  3. V50 : 1440x3120픽셀

 

태블릿PC

  1. iPad Mini: 768x1024픽셀
  2. iPad Pro(10.5inch):1668 x 2224픽셀

만약 웹에서 구현하는 픽셀의 크기를 1440x3040을 기준으로 만들게 된다면 갤럭시나 V50에서는 보기 편하겠지만 

보다 모니터나 iPad Pro에서는 작게보여 옆에 여백이 많이 남을 것이고,

보다 작은 iPad Mini에서는 내용이 잘려서 보일 것입니다.

 

해결 방법은 view port라는 메타태그로 화면에 맞게 페이지를 축소 할 수 있습니다.

 

하지만 viewport로 디바이스에 크기에 맞게 페이지가 나오더라도

아래와 같이 방대한 양의 컨텐츠가 있으면 가독성이 안좋습니다.

이런경우 css3과 미디어 쿼리를 사용하면 화면의 크기에 맞는 레이아웃을 지정해 줄 수 있습니다.

 

@media (max-width: 400px){

     width: 500px;

}  최대 너비가 400px일 때 스타일 적용

 

이런식으로 말이죠!

 

방식을 이용해 반응형 레이아웃에 필요한 css파일을 따로 만들어 링크를 걸어 두면 반응형 웹페이지를 쉽고 빠르게 만들  수 있습니다. 

 

아래는 감사하게도 오픈해주신 반응형 웹 오픈소스입니다. 공개해주신 블로거님께 감사인사를 올립니다. 

 

https://m.blog.naver.com/PostView.nhn?blogId=cyclo80916&logNo=220780530391&proxyReferer=https%3A%2F%2Fwww.google.com%2F

 

40가지 반응형 웹사이트 오픈소스

파일첨부합니다. https://html5up.net/ 도움이 되셨다면 댓글하나 부탁드려요.

blog.naver.com

 

'미니프로젝트 > 유기견 웹사이트' 카테고리의 다른 글

반응형 웹 만들기  (0) 2019.07.12

1.사용자 생성

  • sys->다른 사용자->마우스 오른쪽 클릭->사용자생성

 

  • 사용자 이름, 비밀번호 작성

 

 

  • 기본 테이블 스페이스: USERS
  • 임시 테이블 스페이스:TEMP 

  •  테이블 스페이스{

DBMS가 저장되어 있는 파일을 의미함.  Oracle 11g edition에서는 /usr/lib/oracl/xe/oradata/XE/ 디렉토리에 기본 테이블스페이스가 저장됨.   }

출처:http://www.dbguide.net/db.db?cmd=view&boardUid=26445&boardConfigUid=9&boardIdx=21&boardStep=1

  • 데이터베이스 권한 설정 : 부여된 롤-->connect 권한이부여됨,기본값 체크/ resource  권한이부여됨,기본값 체크

 

  • 적용 클릭->방금 만든 사용자가 없어도 당황하지 말자
  • 메뉴 맨 위에 왼쪽에 초록색 +버튼 클릭
  • 접속이름 작성
  • 사용자 생성시 작성했던 사용자 이름과 비밀번호 입력
  • 테스트 클릭
  • 왼쪽 아래에 "상태:성공" 나오면 접속, 실패뜨면 사용자 이름과 비밀번호를 확인해보자.

2.테이블 생성

  • 사용자 생성을 마쳤다면 왼쪽 메뉴에 추가한 사용자가 있을것이다. +버튼을 눌러 펼쳐보자
  • 바로 아래에 테이블 우클릭하고 새테이블 

  • 테이블 작성 후 확인하면 생성된다.

'Oracle' 카테고리의 다른 글

[Oracle] 사용자 생성 및 Table 만들기  (0) 2019.06.05

팀프로젝트로 유기견 사이트를 재설계하기로 했다. 

뭣도 모르는 상태에서 시작하는 거지만 아직 아무것도 모르기 때문에 80%는 성공한 거 같다.

일단 사이트맵은 아래와 같다

 

사이트맵

 

메인페이지에 로그인 회원가입과 게시판 메뉴 4가지가 있고, 로그인을 무조건 해야 게시판을 볼 수 있다.

 

팀 프로젝트의 유기견 홈페이지 사이트의 차별점은 분양업체가 글을 올릴 수 없다는 점이다.

오로지 유기견들의 분양 문화를 지양하기 위해 만든 기능이다.

 

임시보호 중인 유기견을 '임시보호 중입니다' 게시판에 올리게 되면 한달뒤에는 자동으로 입양합니다 페이지로 넘어가게 된다. 그리고 '분양/입양합니다' 게시판에는 글쓰기 기능을 넣지 않았다.

 

 

아무튼 사이트 맵을 바탕으로 페이지 레이아웃을 만들었고, 거기 들어 있는 정보를 바탕으로 데이터 베이스 설계를 해보았다. 

 

 

aquerytool로 설계한 ERD

ERD 툴은

http://aquerytool.com/ 웹 툴을 사용하였다. 테이블도 쉽게 그릴수 있어서 편하게 그릴 수 있었다.

 

데이터 베이스를 설계하기 위해서는 개념->논리>물리 모델링 순서를 따라 설계했다.

 

1.개념적 설계: 속성 파악, 각 페이지에 어떤 속성들이 들어가있는지 정리함.

 

2.논리적 설계: 속성들을 DB와 웹페이지 개발자 입장에서 속성들을 봤을 때 정보를 어떻게 관리할지 파악함.

 

3.물리적 설계: 어떻게하면 데이터를 쉽고 빨리 찾아올 수 있는지 테이블을 합치고 쪼개고 조인하는 작업을 함.

 

 

개인적으로 저자는 이렇게 순서를 쪼개서 하지 않고 생각의 흐름대로 했다. 

1. 사이트 맵을 먼저 파악하고, 각 페이지가 어떻게 연결 되어있는지 먼저 파악했다.

 

2.그 후 회원가입에 있는 정보를 MEMBER테이블에 넣었고, MEMBER테이블과 BBS테이블을 ID를 외래키로 연결시켰다.

처음 설계할때는 BBS 메뉴를 하나의 테이블로 생각하고 BBS 테이블만 4개를 만들었었는데 데이터가 중복이었고, 굉장히 비효율적이라는 생각이 들어 카테고리 항목을 넣어 하나로 합쳤다. 

 

3.BBS 테이블이 거의 부모 테이블이고 Comment, 파일, 유기견, 입양자/분양자로 자식테이블 형태로 테이블을 쪼갰는데 그 이유는 첫번째는 기능면에서의 분리, 두번째는 개별로 읽어올 필요가 있다고 판단되서 이다. 

 

4. 첨부 파일 테이블은 웹페이지 코딩을 할 때 경로를 함께 저장해줘야하는데 이때 파일 이름과 경로를 함께 저장해두면 편하기 때문에 파일 이름과 경로+파일 이름 두개를 저장하기 위해서는 따로 테이블을 만들었다. BBS 테이블에 합쳐도 되지 않나? 이런 생각이 들기도 하지만 파일을 개별로 불러 쓸 수 있는 상황이 있을까봐 아직도 고민하고 있는 부분이다. 

 

5.자유게시판을 제외하고는 유기견의 정보가 다 들어가기 때문에 유기견테이블을 만들었다. 이유는 게시판을 옮겨다닐때마다 유기견 정보를 새로 작성하면 불편하기 때문에 기존에 작성한 유기견정보에 고유번호를 부여해 저장할 수 있게 따로 테이블을 만들었다.

 

6.입양자 분양자 테이블은 고민을 많이 했었다. 입양자와 분양자 게시글이 연결되어있어야 해서 슈퍼키를 사용했다. 

 

데이터 베이스를 처음 설계해보는거라 어디가 부족한지 잘 모르겠고, 효율적인지도 잘 모르겠어서 총체적으로 잘 모르겠다. 하지만 이것저것 생각하면서 설계한거에 큰 점수를 주고 싶다.

+ Recent posts