반응형 웹에서 중요한 레이아웃의 변형-가변그리드입니다.

이것을 각 화면(스마트폰 또는 PC화면해상도)변경에 따라 웹페이지가 변형을 해서 보는 사람이 이상하게 여기지 않게 해주는 것입니다.

그 방식을 '가변그리드'로 작업하면 그런 결과를 가져올 수 있습니다.

일반적으로 고정되 px값을 가변그리드로 변경할려면 %로 바꿔줘야 합니다.

(1) width 값 가변그리드 공식은..

(2) 가변 margin값을 구하는 공식

 (3) 가변 ppading적용값을 구하는 공식

글자크기(px)를 em단위로 변환하기

​

웹페이지를 만들때...보통 글자크기를 px(픽셀)단위로 하는데 모니터의 해상도를 기준으로 하므로 

유동형 레이아웃에서...정확하게 할려면 글자를 px로 나타내는 것보다 em으로 나타내는 것이 좋습니다.

em 이란? 글자 M(대문자)의 너비를 1em으로 하는 단위 입니다. 

1em 은 16px이라고 할 수 있습니다.

수식은 아래와 같습니다.

ex)  .textex { font-size:2.5em; font-family:굴림; }

미디어쿼리 페이지에 적용 방법...

CSS파일을 연결 해봅시다.

일단 각 조건별로 스타일시트 파일을 만들어서 저장한 후...

<link>태그나 @import문을 이용해서 불러오면 됩니다..

<link href="정의 된 css파일" rel ="stylesheet" type="text/css" media="미디어쿼리 조건"> 

ex)  <link href="css/screen.css" rel="stylesheet" type="text/css" media="screen">

link말고 @import를 사용할 때....

@import url(css 파일 경로) 미디어쿼리 조건

ex) @import url("css/tablet.css") screen and (min-width:321px) and (max-width:768px);
 <!-- 화면 너비가 321이상 768이하일 경우 tablet.css문서안에 포함시켜서(import)사용-->

웹문서에서 직접 구현하기.

<style media="미디어쿼리 조건"> 스타일 규칙들 </style> 

ex)

<style media="screen and (max-width:320px)">
   body { background-color:orange }
 </style>

 이 미디어쿼리는 디바이스(각종 웹을 볼 수 있는 기기들)들 마다의 화면크기를 고려해서 보여주는 방법을 해결해주는 것이므로
각각 기기들의 해상도를 고려해야 합니다.

아이폰3GS, 아이팟 3세대	320*480
아이폰4, 아이폰4s, 아이팟터치	640*960
아이폰5	640*1136
갤럭시S3, 노트2, 옵티머스LTE	720-*1280
갤럭시 노트1,	800*1280
아이패드	768*1024
옵티머스G	768*1280

뷰포트 맞추기...
미디어쿼리를 이용해 스마트폰의 뷰포트에 맞게 설정해도... 스마트폰화면에서 확인해보면 글씨가 작게 보입니다.
그 이유는...웹키트(webkit)기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px 이기 때문입니다.

이를 해결 하기 위해서는 메타(meta)태그를 이용해서 배율을 조정해야 합니다.

<meta name="viewport" content="width=device-width">

뷰포트 meta 속성

width	기본값은 device-width
height	기본값은 device-height
intial-scale	초기배율을 나타내며 기본값은 1이고, 1보다 큰값을 사용하면 확대된 페이지를 표시함.
user-scalable	사용자가 페이지를 확대,축소할 있는지의 여부를 지정...  기본값은 'yes', 'no'일경우 확대,축소 불가능...
minimum-scale	사용자가 축소할 수 있는 최소값을 지정함..기본값은 0.25이며,   가로값을 기준임
maxmum-scale	사용자가 확대할 수 있는 최대값.. 기본값은 5.0입니다.

*minimum-scale과 maximum-scale속성을 각각 1.0이라고 할때 user-scalable 을 yes라 해도 확대,축소가 안됩니다.

ex)

<meta name="vievport" content="width=device-width, user-scalable=yes, initial-scale=1.0, maximum-scale=3.0">

미디어 쿼리가 무엇인가? 

미디어쿼리는 CSS3 모듈중 하나로 PC, 스마트TV, 스마트폰, 태블릿등 여러 웹뷰어를 가지고 있는 미디어,
매체에 맞게 특정한 CSS스타일을 지정해주는(레이아웃이 바뀌는) 기능(방법)입니다.

W3C의 미디어쿼리 모듈 스팩 (http://www.w3c.org/tr/css3-mediaqueries) 를 참고해보세요.

미디어 쿼리의 구문

[ONLY | NOT] @media [미디어 유형] [AND조건 또는 쉽표(,)] { 실행문 ~~ } 

예)

@media screen and (min-width:200px) and (max-width:360px) { ~~~ }

해석해보면 - 미디어거 스크린이면서 최소너비가 200px 이고 

최대 너비가 360px일경우 css를 정의.... 이다.

미디어 쿼리 구문은 미디어 쿼리를 지원하지 않느 웹브라우저에서는 실행되지 않습니다.

IE(인터넷익스플로러)외엔 대부분 미디어 쿼리를 인식합니다.

'NOT tv'라고 지정하면 tv외에 모든 미디어를 말합니다.

'ONLY'는 미디어쿼리가 지원되는 브라우저에서만 해석됨을 말합니다.

all	모든 미디어 유형에서 사용할 CSS
print	인쇄장치에서 사용되는 CSS
screen	컴퓨터 스크린에서 사용되는 CSS
tv	음성,영상 동시출력 TV에서 사용되는 CSS
aural	음성 합성 장치(주로 화면을 읽어 소리로 출력해 주는 장치)
braille	점자 표시 장치에서 사용할 CSS를 정의함
handheld	패드처럼 들고다니는 장치 CSS
projection	프로젝터를 위한 CSS
tty	디스플레이 기능이 제한된 장치의 CSS (이런 장치에선 px단위 사용불가)
embossed	점자프린터 CSS

(*뷰포트 란?  : 실제 웹문서 내용이 화면에 보이는 영역) 

미디어쿼리를 사용하는 조건...

1) 가로와 세로 (화면크기) 

width, height	너비, 높이 (일반)
min-width, min-height	최소 너비,높이
max-width, max-height	최대 너비,높이

화면너비가 600px이상이고 900px일때...
@media all (min-width:600px) and (max-height:900px)

 min 접두사를 사용하는 조건문은  width값이 작은 순부터 작성하며...
 max접두사를 사용하는 조건문은  width값이 큰 수부터 작성하셔야 합니다.




 2) 단말기 브라우저의 창(너비,높이)

아이폰4의 해상도는 640*960 고 아이폰의 사파리 브라우저 너비는 320*480 임...
안드로이드폰 해상도는 480*800일때 브라우저는 320*533 임..
그러나 현재 많은 스마트폰의 크기가 커지고 다양해지므로 많은 크기가 있다...

device-width, device-height	단말기의 너비, 높이 (일반)
min-device-width, min-device-height	단말기의 최소 너비,높이
max-device-width, max-device-height	단말기의 최대 너비,높이

3) 화면 회전

스마트폰, 태블릿은 가로, 세로 형 화면회전시 회전에 맞춰 모양이 바뀝니다.
코딩 예)
@media all and (orientation:portrait) { ~~~ }
@mdiea all and (orientation:landscape) { ~~~ }

orientation:portrait	단말기 세로방향
orientation:landscape	단말기 가로방향

4) 화면 비율

브라우저의 화면 너비 값을 높이값으로 나눈 것입니다. 숫자값이나 계산식을 사용합니다.

aspect-ratio	화면비율(너비값/높이값)
min-aspect-ratio	최소 화면비율
max-aspect-ratio	최대 화면비율

(단말기 화면비율)

device-aspect-ratio	단말기 화면비율(너비값/높이값)
device-min-aspect-ratio	단말기 최소 화면비율
device-max-aspect-ratio	단말기 최대 화면비율

5) 색상당 비트수 
단말기에서 사용하는 최대 색상 비트수를 말함...

color:1 이면 최대 2가지 (2에1승)  , color:3 이면  비트 3개 (2에 3승)   

color	비트수
min-color	최소 비트수
max-color	최대 비트수

<선택자 종류>

번호	이름	표기방식
1	전체선택	* 를 사용, 전체 태그에 적용됩니다.
2	태그 선택자	html 태그, 각종 tag명 써서 적용 및 사용함.
3	class 선택자	html 태그 선택하여 이를 전체
4	id 선택자	id정의명에 '#'을 사용. 적용할 태그엔 id명을 정의(정의된 고유id태그에만 적용)
5	하위 선택자	예) ul li {~} : ul태그안에 있는 li태그들 선택
6	자식 선택자	예) #container > ul : id가 container태그안에 있는 자식 ul태그들 선택
7	인접형제 선택자	예) h1 + p {~} : h1태그 다음에 오는 p태그중 첫번째 p태그 선택
8	형제 선택자	예) h1 ~ p {~} : h1태그 다음에 오는 p태그들 선택
9	그룹 선택자	예) h1, p {~} : h1태그 와 p태그들 선택
10	속성 선택자	예1) a [target] {~} : a태그의 target속성 선택 예2) a [target="_blank"] {~} : 태그 속성중 target이 _blank 속성과 같은 곳에 스타일 적용. 예3) a [속성 ~= 값] 은 비교할값이 여러개일 경우 그중 하나만 일치해도 스타일을 적용합니다. 정확하게 일치하지 않을 경우 적용이 안됩니다. 예4) a [속성 ^= 값] 은 지정된 속성값에 대해서만 스타일을 적용합니다.

선택자를 이용해서 정확한 태그를 선택하여.. 관련 스타일을 적용할 수 있습니다.

 label 태그의 이것,저것 쓰임새(사용법)

얼마전까지도 웹표준이라는 말이 나오기전에는 label태그는 크게 사랑받지 못했었습니다.

'이거 뭐 보이지도 않는 태그인데 굳이 써서 뭐가 도움이 되겠어' 하는 투로..경시한 태그죠..

하지만 좀 더 웹표준화가 입에 오르면서 웹페이지는 태그의 의미와 쓰임새가 중요하게 되었습니다.

웹페이지(홈페이지)를 사용할때 시각 장애인은 링크를 이동할때나 입력항목이 나올때 'Tab'키를 눌러 이동합니다.

이동시 그 항목이 무슨 항목인지 어떤 입력사항이 필요한지를 시각 장애인에게 알려줘야 하는 것입니다.

그렇다면 label태그의 사용법에 대해 알아 봅시다.

우리가 많이 보는 아이디 입력창을 예로들면...아래와 같다.

이것을 html로 코딩해보면... 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이디 입력</title>
</head>

<body>

    <label> 아이디 : <input type="text" id="id"></label>

</body>
</html>

비밀번호 란도 만들어 보면...

여기서는 아이디와 비밀번호등을 묶어서 코딩을 하려면 ul태그로 묶어주는 것이 좋습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아이디,비밀번호 입력</title>
</head>

<body>
     <ul>
        <li><label> 아이디 : <input type="text" id="id"></label></li>
        <li><label> 비밀번호 : <input type="password" id="pwd"></label></li>
        <li><label> 비밀번호 확인 : <input type="password" id="pwd_ok"></label></li>
    </ul>
</body>
</html>

결과물 

물론 실제적으로 적용하려면 form태그로 감싸줘야 하며 css를 통해서 블릿을 없애줘야 합니다.

이런 폼에서 label태그를 사용하는 또다른 큰 이유는 라디오버튼 및 체크박스를 선택할 때

텍스트를 선택해도 선택할 수 있게 해주는 것입니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 라디오버튼, 체크박스</title>
</head>

<body>
<fieldset>
<legend> 제 2 외국어 </legend>
     <ul>
        <li><label><input type="radio" id="language" name="language" value="english"> 영어 </label></li>
        <li><label><input type="radio" id="language" name="language" value="japanese"> 일본어 </label></li>
        <li><label><input type="radio" id="language" name="language" value="chinese"> 중국어 </label></li>
    </ul>
</fieldset>
</body>
</html>

이렇게 결과물이 나옵니다. 텍스트를 클릭해도 선택이 된다는 것을 알 수 있습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 라디오버튼, 체크박스</title>
</head>

<body>
<fieldset>
<legend> 제 2 외국어 </legend>
     <ul>
        <li><label><input type="checkbox" id="language" name="language" value="english"> 영어 </label></li>
        <li><label><input type="checkbox" id="language" name="language" value="japanese"> 일본어 </label></li>
        <li><label><input type="checkbox" id="language" name="language" value="chinese"> 중국어 </label></li>
    </ul>
</fieldset>
</body>
</html>

이렇게 실질적으로 label의 쓰임새를 확인해 볼 수 있었습니다~

웹표준 및 웹호환성 진단하기 - W3C 프로그램

웹표준, 웹표준하지만 이거 작업시 참으로 개발자한테는 힘든 부분입니다.

인터넷 강국이라는 우리나라는 현재 XP와 익스플로러의 할아버지격들의 브라우저 버전들을

사용하는 분들이 많아서 인지 이를 맞춰줄려는 노력을 고스란히 개발자몫이니까요.

그래서 '내가 만든 홈페이지는 얼마나 웹표준과 호환성에 얼마나 맞나?'를 

알기위해서 프로그램으로 확인 두둥......

이것도 일이라는...쩝

KW3C : 한국정보화 진흥원에서 배포하는 프로그램 

KW3C 설치 배너 보이시죠? 거기 클릭하심 됩니다.

http://www.nia.or.kr/

설치전에...

 .net framework 4.0

 http://msdn.microsoft.com/ko-kr/vstudio/aa496123

java (윈도우용)

http://www.java.com/ko/download/chrome.jsp?locale=ko

설치하셔야 합니다.

자 그럼..

'진단도구' 다운로드 하시고

setup.exe 파일 클릭하시고 설치 시작~!!!

설치시작하고 실행해 보시면 아래와 같이 나옵니다.

img 태그와 figure 태그를 알아봅시다. - 이미지에 캡션 붙이기 

img태그는 말그대로 html4에서부터 있었던 웹페이지에 img를 올리는 태그입니다.

그렇다면 figure는 무엇인가??

이 figure태그는 이미지에 캡션을 생성시 필요한 태그입니다.

이미지에 figure를 태그를 넣은 아래 예제 소스를 확인해보세요.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img태그와 figure 태그</title>
</head>

<body>
<figure>
    <img src="images/facebook.jpg" alt="facebook" width="200" height="200">
    <img src="images/twitter.jpg" alt="twitter" width="200" height="200">
</figure>
</body>
</html>

figure태그는 img태그들을 묶어서 표현합니다.

이처럼 여러개의 이미지를 나열하는데 필요합니다. 이 소스의 결과물은 아래와 같습니다.

가로 정렬로 되어서 출력되었네요...

여기에 캡션을 넣어봅시다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>img태그와 figure 태그</title>
</head>

<body>
<figure>
    <img src="images/facebook.jpg" alt="facebook" width="200" height="200">
    <img src="images/twitter.jpg" alt="twitter" width="200" height="200">
    <figcaption>페이스북과 트위터 입니다.</figcaption>
</figure>
</body>
</html>

결과물은...

📁예제 다운로드

물론 캡션에 css를 적용하여 글씨의 색상이나 위치를 적용하면 이쁘게 나오겠죠.