더불어숲 숲을 그리다.

제가 사는 집의 베란다 창문 밖으로는 작은 산이 하나 보입니다. 멀리 있는 산이 아니라 바로 건물과 붙어있어서 좋은 점들이 많습니다. 우선은 산바람과 함께 풀냄새가 좋고요. 밤에는 귀뚜라미 소리와 함께 가끔은 뻐꾸기 소리도 들리기도 해요. 혼자 있을 때면 전설의 고향 분위기를 느낄 수 있죠. ^^ 얼마 전에는 뭔가 베란다 쪽에서 '딱딱 딱딱' 벽을 두드리는 듯한 소리가 나서 봤더니만 딱따구리인지 웬 새 한 마리가 벽을 쪼고 있는 게 아닙니까! 인기척에 날아가서 사진을 못 찍은 게 못내 아쉽더라고요. ㅠㅠ 또 온갖 새소리를 들을 수도 있습니다. 어떤 때는 새소리가 너무 시끄러울 정도라니까요! 그 뭔가 굉장히 시끄러운 소리를 내는 새가 있는데 여러 마리가 몰려와서 울면 허공에 대고 '조용히 좀 하자~'라는 ..

반응형 웹 - 미디어 쿼리를 사용해 사이트 구성하기 미디어 쿼리는 웹 문서 안에서 @media 구문 다음에 조건에 맞는 CSS 규칙을 직접 추가해 구현할 수도 있고 각 미디어 조건에 맞는 별도의 CSS 파일을 만들어 태그로 연결해 사용할 수도 있습니다. 1. 외부 CSS 파일 연결하기 외부 스타일 시트 파일로 따로 저장한 후 웹 문서에 연결하는 방법 1) 태그 사용하기 외부 스타일 시트 파일을 연결할 때 태그를 이용하는 방법을 가장 많이 사용합니다. 태그는 태그 사이에 삽입합니다. CSS 파일이 많고 대규모 사이트를 개발할 때는 @import 구문보다 태그를 주로 사용합니다. 사이트를 만들다 보면 CSS 파일이 상당히 많아지기 때문에 @import 구문보다 안정적이고 빠르기 때문에 태그를 사용하길 권합니..

반응형 웹 - 미디어 쿼리 2 1. 미디어 쿼리의 조건 미디어 쿼리는 특정 조건에 따라 적용할 CSS를 다르게 정의하므로 조건을 어떻게 체크할 것인지가 중요합니다. 미디어 쿼리에서 사용하는 조건에는 주로 화면 크기와 관련된 것들이 많습니다. 화면 크기를 체크해 크기에 따라 다른 CSS가 적용되도록 하는 것입니다. 1) 웹 문서의 가로 너비와 세로 높이 실제 웹 문서의 내용이 화면에 보이는 영역을 '뷰포트'라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있습니다. 이때 height(높이) 값은 미디어에 따라 달라지기 때문에 주의해야 합니다. screen이 아닌 미디어에서는 스크롤을 포함한 전체 문서를 height로 지정해야 하며 print에서는 한 페이지 높이를 기준으로 합니다. 가로..

반응형 웹 - 미디어 쿼리 1 1. 미디어 쿼리란? 미디어 쿼리(mediaqueri)는 CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해줍니다. 즉 미디어 쿼리를 이용한 사이트는 다른 기기로 접속할 때마다 레이아웃이 바뀌게 됩니다. 브라우저 창의 너비를 조절할 때마다 화면에 표시되는 칼럼 개수가 달라지며 브라우저 화면 크기에 따라 사이트 레이아웃이 바뀌도록 CSS를 작성하는 방법을 미디어 쿼리라고 합니다. 2. 미디어 쿼리 구문 미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해 줍니다. 미디어 쿼리 구문은 사이에 사용하며 대, 소문자를 구별하지 않습니다. 기본적으로 미디어 유형이 지정되어야 하고 필요할 경우, and 연산..

반응형 웹 - 가변 레이아웃과 가변 요소 1. 가변 글꼴 텍스트 크기를 픽셀(px) 단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때는 크기도 유동적으로 바뀌어야 합니다. 이것을 '가변 글꼴'이라고 합니다. 가장 많이 사용하는 단위는 em과 rem입니다. 1) em 단위 em 단위는 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px입니다.(1em=16px) 따라서 이미 px로 표시한 글자의 크기를 16px로 나누면 em 값으로 계산할 수 있습니다. em 단위로 작성된 글꼴도 실제로 브라우저 창에 표시될 때는 해당 기기에 맞춘 픽셀 크기로 계산되어 표시됩니다...

반응형 웹 - 가변 그리드 레이아웃 고정 그리드와 가변 그리드 웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템(grid system)'입니다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리합니다. 그리스 시스템이란 화면을 몇 개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있습니다. 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용됩니다. 그리드 시스템에서는 화면 너비를 몇 픽셀로 하는가에 따라 960픽셀로 고정하는 '960 그리드 시스템'이나 1200픽셀로 고..

반응형 웹 - 모바일 기기와 웹 디자인 반응형 웹 디자인 노트북이나 데스트톱 PC보다 스마트폰에서 웹에 접속하는 경우가 많아지면서 데스크톱 PC용 브라우저를 기본으로 만들어진 웹 사이트를 스마트폰에서 접속하면 매우 작은 글씨로 표시되는 문제가 생겼습니다. 따라서 모바일 기기용 사이트를 따로 제작하는 포털 사이트나 쇼핑몰들이 생겼지만 스마트폰이나 태블릿, 스마트 TV등 브라우저 환경이 다양해지는데 그때마다 웹 사이트를 별도로 제작하는 것은 쉬운 일이 아닙니다. 이런 필요에 의해 반응형 웹 디자인(responsive web design)이 개발되어 화면 요소들을 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현하게 되었습니다. 여러 기기에 맞는 사이트를 별도로 제작하지 않고 화면 크기..

오디오 & 비디오 재생하기 3 태그 - 비디오 화면에 자막 추가하기 HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각장애인용 자막을 표시하는 것이 기본입니다. 이런 자막은 청각장애인에게 도움이 될 뿐만 아니라 주변 소음이나 소리를 들을 수 없는 상황에서 비디오 내용을 이해하는 데도 많은 도움이 됩니다. HTML5에서는 태그를 이용해 외부 자막 파일을 연결할 수 있습니다. 기본형 : 1. 태그의 속성 1) kind 속성 - 자막의 종류를 지정 속성 값 설 명 subtitles 자막입니다. 소리를 켤 수 있지만 이해할 수 없는 경우, 다른 언어로 번역한 자막일 경우에 사용하면 비디오 화면에 표시됩니다.(기본 값) captions 캡션입니다. 청각장애인용 자막이거나 소리를 들을 수 없거나 켤 수 없..

오디오 & 비디오 재생하기 2 태그와 태그의 속성 태그와 태그에서 사용할 수 있는 속성은 거의 일치합니다. 1. width, height 속성 - 비디오 크기 조절 화면에 표시되는 비디오의 크기를 조절하고 싶다면 태그에 전체 비디오와 관련된 속성을 지정합니다. 2. controls 속성 - 컨트롤 막대 표시 미디어 파일에 컨트롤 막대를 함께 표시합니다. 속성 값은 따로 없으며 controls라는 속성만 입력하면 됩니다. 3. preload 속성 - 파일 다운로드 여부 preload 속성은 파일을 재생하기 전에 미디어 파일을 모두 다운로드할 것인지, 일부 정보만 다운로드 할 것인지 여부를 지정합니다. 속성 값 설 명 none 미디어 파일을 미리 다운로드하지 않고 사용자가 재생 버튼을 눌러야만 다운로드하기 ..