Web
-
[반응형 웹 스터디] 뷰포트Web 2015. 10. 1. 04:01
뷰포트 화면에서 실제 내용이 표시되는 영역 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 함 width : 뷰포트 너비 설정 initial-scale : 초기 배율 설정 minimum-scale : 최소 축소 비율 설정, 기본값 0.25 maximum-scale : 최대 확대 비율 설정, 기본값 5.0 * minimum-scale / maximum-scale 속성을 1로 지정할 경우 user-scalable=yes 로 지정하더라도 확대나 축소할 수 없어진다. * 스마트 기기의 뷰포트 영역 확인 : http://dnsdk300.dothome.co.kr/viewport/ [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]
-
[반응형 웹 스터디] 미디어 쿼리 적용 방식 및 주의 사항Web 2015. 10. 1. 03:35
미디어 쿼리 적용 방법 1. 태그를 이용해 CSS 파일 연결하여 적용 ex) 다른 방법 2. 3. HTML 문서 내에 작성 : 태그 내에 직접 작성 4. 임포트 : CSS 파일 내에서 다른 CSS파일을 불러 오는 방식. ex.) @import url("불러올 CSS 파일 경로") all and (min-width:320px); 주의 사항 1. 띄어 쓰기 주의 : and 뒤에는 항상 공백 한 칸 2. min 사용 시 : 반드시 작은 순서대로 작성 , max는 반대로 큰 순서대로 작성 [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내용을 중심으로 정리 ]
-
[반응형 웹 스터디] 미디어 쿼리 기본 문법Web 2015. 9. 30. 12:20
미디어 쿼리 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3 속성 중 하나. 기본 문법 @media [only 또는 not] [미디어유형] [and 또는 , 콤마] (조건문) { 실행문 } @media 미디어 쿼리 문법 시작 [only 또는 not] Only : 미디어 쿼리를 지원하는 브라우저에서만 미디어 쿼리를 해석 not : ‘not tv’ 일 경우 tv를 제외한 모든 미디어 유형 * 익스플로러 6,7,8의 경우 지원하지 않기 때문에 only 키워드는 대부분 생략. 미디어 유형 : 생략 가능 all, print, screen, tv, projection, handheld, speech, aural, embossed, tty, Braille 미디어 유형은 생..
-
[반응형 웹 스터디] width와 max-width의 차이Web 2015. 9. 30. 11:20
width 100%로 설정할 경우 요소의 크기를 감싸고 있는 요소크기에 맞춰 100%로 유지 max-width 100%로 설정할 경우 요소의 기본 크기 이상으로는 조절되지 않음 예를 들어 ... 내부에 가로(width) 300px 크기의 이미지 두장을 각각 위치 시키고 html, css 속성을 다음과 같이 줄 경우 ... 결과는 다음 사진처럼 나온다는 말씀! 브라우저 width값의 90%를 차지하는 div 속에 각각 50% width값을 준 div 속 img요소들이 첫 번째 것은 해당 div크기에 맞춰 100%확장된 상태이고, 두번째 것은 img고유 width값인 300px를 넘지 않고 원래의 100%값을 유지하고 있는 것을 볼 수 있습니다. [ " Do it! 반응형 웹디자인 - 김운아 - " 학습 내..
-
[반응형 웹 스터디] 기본 개념 이해Web 2015. 9. 24. 20:19
● 반응형 웹 사용자의 환경 또는 특정 행동에 따라 '반응하는 웹' 쉽게 생각해서 요즘 pc, tablet, mobile 등 기기에 따라 보여지는 것이 달라지게 하는 것. ▶ 참고 사이트 http://mediaqueri.es ● 필요성 유지보수 간편 : 하나의 HTML / CSS 마케팅에 유리 : 웹사이트를 환경, 기기에 최적화된 구조로 변경하여 보여줌. 내용 전달 확실해짐. 접근이 용이해짐. 검색엔진 최적화 가능 : 주소를 하나로 통일 가능. 비용 감소. 검색엔진 집중도 상승 미래지향적 : 커브드 모니터 등..다양한 기기의 등장과 그에 대응할 수 있는 방법으로 인식. ▶ 해외 반응형 웹 사례 스키니 타이 http://skinnyties.com 보스턴 글로브 http://www.bostonglobe.co..