디기딩~디기딩~? 제대로된 HTML과 CSS를 이해를 위한 스터디! 초보 개발자도 잘하고 싶다 퍼블리싱!!
S68 스터디를 참여한 dimanche는 무엇을 느꼈을까요?
오늘의 스터디!
스터디에서 사용되는 책의 표지를 보았습니다.
모던 웹사이트 디자인의 정석 HTML5 & CSS3 Design Book
출처 : http://wikibook.co.kr/modern-web-design-book/
표지의 그림과 제목 위에 조금 작은 글씨로 적혀있는게 보이십니까?
HTML5&CSS3로 만들고 반응형 웹 디자인까지 고려한.
저는 반응형 웹이라는 것을 들어본 적 있지만, 그 것이 무엇인지 제대로 알고 있지 않았습니다. 단순히, 기기 화면의 크기에 맞춰 배치를 이랬다 저랬다 바꾸는 것이라고만 생각했습니다. 아마도 많은 사람들도 저와 같지 않을까요?
이제 반응형 웹이 무엇인지와 어떻게 사용하는지에 대해 공부해보겠습니다.
반응형 웹은 도대체 무엇에 반응하는 걸까요? 바로 display area와 device에 반응하는 것입니다.
display area란 브라우저 안에서 스크롤 바, 네비게이션 바, 틀 등을 제외하고 순수하게 html이 표현되는 공간을 말합니다.
device는 html 문서를 보게될 장치를 말합니다. 우리는 pc로 볼 수도 있고, 핸드폰으로 볼 수도 있고, 태블릿을 사용하기도 하죠.
빨간박스 : device 영역 / 파란박스 : display area
즉, display area와 어떤 device를 사용하느냐에 따라 유동적인 레이아웃을 볼 수 있도록 하는 것이 반응형 웹입니다.
그럼 어떻게 반응하게 만들까요? 그게 바로 오늘 스터디의 내용이었습니다.
반응형 웹
사이트가 반응하여 그에 적합한 디자인을 보여준다는 것은 예~~~~~~전부터 있었다고 합니다. 따라서 HTML5나 CSS3를 사용하지 않고도 충분히 반응형 웹사이트는 제작 가능하단 것입니다.
미디어 타입(media type)이라는 기능으로 어떤 매체를 사용하는지에 따라 각각 다른 스타일 시트를 적용하게 하는 것이 있습니다.
미디어 타입에는 all, aural, braille, embossed, handheld, print, projection, screen, speech, tty, tv이 있습니다. 너무 많아.. 이렇게 여러가지의 미디어 타입을 제공하고 있지만, 미디어 타입만으로 사용하는 device의 특성을 정확히 파악해 알맞은 스타일을 적용시키기는 어려웠다고 합니다.
그래서 CSS3에서는 이러한 미디어 타입을 개선해 더 구체적인 조건에서 필요한 스타일을 적용할 수 있도록 확장했고, 이 것이 미디어 쿼리(media query)입니다. 현재 CSS3에서 사용하는 미디어 타입에는 all, print, screen, speech를 사용하고 있습니다.
이제 4가지 미디어 타입은 어떤 의미를 가졌는지 살짝 살펴보도록 하겠습니다. (참고 : MDN 문서)
- all : 모든 장치에 적합
- print : 인쇄물(paged material) 및 인쇄 미리보기 모드에서 화면 상에 보이는 문서를 위해 계획됨
- screen : 주로 컬러 컴퓨터 화면을 위해 계획됨
- speech : 음성 합성기(speech synthesizer)를 위해 계획됨
이제 반응형 웹과 미디어 타입에 대해 알게되었습니다. 이제는 반응을 시키기 위해 미디어 쿼리를 어떻게 작성하는지 알아봅시다!
미디어 쿼리
미디어 쿼리는 아래와 같은 문법에 맞게 미디어 타입과 여러가지 속성을 통해 구체적인 조건을 지정합니다.
@media (not | only) (mediatype) and (조건) {실행문}
- @media : 미디어 쿼리의 시작
- not : 뒤에 오는 모든 조건을 부정
- only : 미디어 쿼리를 지원하는 사용자만 해석하도록 함
- mediatype : all은 모든 기기가 해석, 나머지는 각각의 기기일 때 해석하도록 함
- 조건 : 미디어쿼리의 속성을 사용해 조건을 줌
이제 미디어 쿼리를 문법을 알았으니 미디어 쿼리의 속성을 살펴보도록 하겠습니다.
미디어 쿼리에서 사용할 수 있는 여러가지 속성들을 media feature라고 합니다. media feature에는 대표적으로 8가지가 있습니다.
(1) width, height : 너비와 높이
(min- | max-) + (device-) + (width | height) : length + unit(px)
(2) aspect-ratio : 가로세로 비(가로/세로)
(min- | max-) + (device-) + aspect-ratio : radio
(3) orientation : 방향
orientation : portrait | landscape
*portrait(세로방향), landscape(가로방향)를 의미하지만 추상적인 개념으로 해석이 달라질 수 있음
(4) resolution : 출력 장치의 픽셀 밀도
resolution : value + (dpi | dpcm)
(5) color : 출력 장치의 컬러 컴포넌트 당 비트 수
(min- | max-) + color + (-index) : no value | number
(6) monochrome : 출력 장치의 흑백 프레임 버퍼 내 픽셀 당 비트
(min- | max-) + monochrome : no value | number
(7) scan : 출력 장치의 주사(scanning) 방법
scan : progressive | interlace
(8) grid : 격자(grid) 방식 사용
grid : 0 | 1
이렇게만 쓰면 ‘이걸 뭐 어떻게 쓰는건지..’ 감이 잘 오지않습니다. 그래서 몇 가지 미디어 쿼리 예제를 해석해 보도록 하겠습니다. (참고 : http://naradesign.net/wp/2012/05/30/1823/)
- @media (max-width:768px) → display area 너비가 768px 이하일 때
- @media (min-width:768px) and (max-width:1024px) → display area 너비가 768px 이상 1024px 이하일 때
- @media (min-width:1025px) → display area 너비가 1025px 이상일 때
- @media not all and (min-width:768px) and (max-width:1024px) → 너비가 768px 이상 그리고 1024px 이하가 아닐 때
- @media all and (aspect-ratio:5/4) → 너비가 5, 높이가 4 비율일 때
- @media all and (orientation:portrait) → 높이가 너비에 비해 상대적으로 클 때
- @media all and (resolution:96dpi) → 1인치당 96개의 사각형 화소를 제공할 때
- @media all and (min-color-index:256) → 출력 장치가 256 이상 색을 지원할 때
- @media all and (monochrome:0) → 출력 장치가 흑백이 아니면 실행
- @media tv and (scan:progressive) → 초당 60회 수준의 고화질 스캔 방식 TV일 때
- @media all and (grid:1) → 출력 장치가 그리드 방식일 때
오호! 이제 좀 해석이 되는 것 같습니다. 그런데….. 위의 예제에 쓰인 and는 뭘까요????
이것은 하나의 미디어 쿼리에 여러개의 조건을 쓰기위해 사용되는 것 입니다. and 외에도 or 그리고 comma(,)도 있습니다.
and는 앞과 뒤의 조건을 모두 만족해야한다는 의미이고, or와 comma(,)는 앞과 뒤 중 하나만 만족해도된다는 의미를 가졌습니다.
이제 미디어쿼리에 대해 공부를 했으니, 책의 예제 이미지가 해석될까요?!!
모던 웹사이트 디자인의 정석 HTML5 & CSS3 Design Book 55페이지
미디어 쿼리에 따라 요소들의 배치가 변하는게 보이는 듯합니다!! 이제 반응형은 그냥 막 다 할 수 있을 거 같네요^^
지금이 순간이 꿈이라면.
네…. 알고 있어요…… 레이아웃도 아직 제대로 못해요……쳇
3회차 끝나고 난 뒤 빠바밤~ 혼자서 책상에 앉아~
제가 이 스터디를 하기 전 이 책을 공부한 적이 있습니다. 그 때 아마 일주일이 조금 더 넘는 정도 걸렸던거 같습니다.
거의 하루에 한 chapter 정도 읽고 예제를 실습했습니다.
지금은 스터디 3주차. 총 여섯개의 chapter에서 1장을 공부 중입니다. 느린가요?
제가 혼자 공부할 때에 비하면 엄청 느릴 속도일 것입니다.
예전에 저는 이 어려운 내용을 어떻게 빨리 볼 수 있었을까요?
지금 스터디를 듣고 있는 저는 한장의 범위도 되지 않는 내용을 공부하는 것이 왜 이렇게 어려울까요?
예전에 저는 이렇게 방대한 내용이 담긴 1장부터 모르는 것이 많았음에도 의문을 던지지 않았습니다.
책의 예제를 따라 쳐보고 ‘오~ 이제 할 줄 알아!’라고 착각하고 있었던 것이 분명합니다.
그래서 이것이 착각인지 아닌지 확인할 수 있는 방법을 실장님께서는 알려 주셨습니다. 책의 코드를 보지않고, 이미지만을 보고 똑같이 구현할 수 있어야한다고.
스터디를 참여하고 글로 정리를 해보며 이제서야 좀 더 자세히 공부할 수 있는 것을 기회로 삼아 착각에 빠지지 않고 제대로된 공부를 해야할 것입니다.
—S68 스터디 3회차 스터디 자료 공유(클릭! 클릭!)
스터디 교안 링크
스터디 영상 1/2
스터디 영상 2/2
dimanche | bsidesoft 신입사원
좋은 개발자가 뭔지도 모르고 좋은 개발자가 되고 싶은 초보 개발자입니다.
회사에서는 열심히 교육받고 발전하는 운 좋은 개발자로 일하고 있습니다.
recent comment