본문 바로가기
반응형

전체 글331

반응형 웹사이트(소스) 만들기 연습 반응형 웹사이트 만들기 연습(소스) 지난 시간에 미디어 쿼리 문법을 배웠습니다. [css] 미디어 쿼리, @media query 이해하기 간단한 연습 문제를 내 봤는데, 풀어 보셨는지요? 문제는 A화면에서, 480px 이하로 화면이 축소될 경우 B화면으로 바뀌는 미디어 쿼리를 작성하는 것이었습니다. (컴퓨터, 스마트폰 화면일 경우) A 화면 B 화면 우선 A 화면부터 작성해 보겠습니다~ html Home Guest Noitce 오른쪽 사이드바 본문 footer #side를 #contents 앞에 두었는데, B화면에서 #side가 먼저 오도록 하기 위함입니다. css #nav, #footer, #side {background-color:#FFE08C;} /*메뉴,사이드바,푸터 배경색 설정*/ #nav{ma.. 2015. 2. 5.
[css] 미디어 쿼리, @media query 이해하기 [css] 미디어 쿼리, @media query 이해하기 오늘은 반응형 웹에서 자주 사용하는 미디어 쿼리 문법을 배워 보겠습니다. 미디어 쿼리는 장치에 따라 각기 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등, 반응형 웹페이지를 작성할 때 유용한 구문입니다. ▶ @media 브라우저 지원 ie9+, chrome 21+, firefox 3.5+, safari 4.0+, opera 9+ ▶ 미디어 쿼리 사용법 미디어 퀴어리 구문은 css에 내부에 삽입하는 방법과, 링크로 연결하는 방법이 있습니다. css 내부에 삽입하기 링크로 연결할 때 *test.css 파일 안에는 위 미디어쿼리 구문이 들어가야 합니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) ▶ 미디.. 2015. 2. 3.
[css3] repeating gradient (반복형 그레디언트) [css3] repeating gradient (반복형 그레디언트) 반복형 그레디언트는, 그레디언트를 반복 패턴으로 보여줍니다. 선형 그레디언트는, 반지름형 그레디언트 모두 반복 패턴으로 만들 수 있습니다. 두 강좌 먼저 읽고 오시면 이해하기 쉬울 거예요~ gradient (linear-gradient) 사용법 gradient (radial-gradient) ☆repeating-linear-gradient 반복형 선형 그라디언트 linear-gradient 문법과 비슷합니다. 최소 2가지 이상의 색상을 선택하고, 색상의 위치도 지정할 수 있습니다. ▶예 #linear1{background:repeating-linear-gradient(white, yellow 20px, green 40px);} linea.. 2015. 1. 29.
[css] gradient (radial-gradient) [css] gradient (radial-gradient) 지난 시간에 linear-gradient(선형 그레디언트)를 배웠습니다. [css3] gradient (linear-gradient) 사용법 오늘은 반지름형 그라디언트 입니다. 이전 강좌를 미리 보고 오셔야 이해가 더 쉬울 거예요. 선형 그레디언트가 일직선의 그레이디언트를 만들었다면, 반지름형 그레디언트는 반지름이나 타원형, 원형 형태의 그레디언트를 만들 때 사용합니다. radial gradients 반지름형 그레디언트 반지름형 그레디언트는 그레디언트 중앙을 축으로 반지름을 그립니다. 그레디언트를 만들려먼 최소 두 가지 색상을 지정해야 합니다. [색상 선택] color-stop 색상 지정은 linear-gradient와 동일한 방식으로 합니다. .. 2015. 1. 28.
[css3] gradient (linear-gradient) 사용법 [css3] gradient (linear-gradient) 사용법 그동안 미루어 두었던 gradient 속성 어렵다고 자꾸 미루다 보니, 영엉 못 쓸 거 같아서 조금씩 다루어 보려고 해요^^ 예전에 어느 모임에 갔다가, 초등 꼬마가 발표하는 걸 들었는데 코끼리를 냉장고에 넣는 법에 관한 이야기였어요. 코끼리를 한 번에 집어넣으려고 하면 못 넣지만, 조금씩 잘라서 넣으면 다 들어갈 수 있다는 얘기입니다. 좀 잔인한 이야기 같지만^^, 이 이야기의 교훈은 아무리 어렵게 느껴지는 일도 조금씩 나누어 하면, 어느새 다 할 수 있다는 깊은 뜻이 담겨 있습니다^^ 그래서 정말 하기 싫고, 어려운 일이 생기면 이 우화를 떠올려 봐요. 그런 의미에서, gradient에 대한 완벽한 글을 쓰기보다는, 제가 이해한 것만.. 2015. 1. 27.
구스타프 클림트가 그린 초상화 구스타프 클림트가 그린 초상화 임신 4개월로 접어들면서 태교를 조금씩 하려 하고 있어요. 요즘에는 관심만 기울이면, 인터넷이나 책에서 태교 정보를 손쉽게 찾아볼 수 있어 이런 시기에 태어나는 것도 참 복인 듯 싶습니다 얼마 전에는 임신 앱을 다운 받았는데, 태교 정보도 같이 나와 있어요 예부터 우리나라에서는 칠태도라고 해서 태교의 덕목들이 있었다는데 칠태도란 '임산부가 지켜야 할 일곱 가지 덕목'을 말합니다 그 중에 인상적인었던 구절, 제4도는 아이를 가졌을 때는 조용히 앉아 아름다운 말을 듣고 성현의 문구를 외우며 시를 읽거나 쓰고, 품위 있는 음악을 들어야 한다는 것입니다. 더불어 나쁜 말은 듣지 말고, 나쁜 일은 보지 말며, 나쁜 생각을 품지 말라고 했습니다 제6도는 임신 3개월부터는 아이의 성품이.. 2015. 1. 21.
[html5] figure 태그, figcaption 태그 [html5] figure 태그, figcaption 태그 책이나 잡지에서 이미지, 차트 등이 나올 때 이를 설명하는 문구와 함께 소개됩니다. figure 요소는 이처럼 사진, 도표, 삽화, 오디오, 비디오, 코드 등을 담는 컨테이너 역할을 하는 태그이고, figcaption 요소는 이에 대한 설명하는 문구를 담는 태그 입니다. figcaption 요소는 선택적이며, figure 요소 안에 사용합니다 (내용 앞 뒤로 올 수 있음) figcaption 요소는 figure 요소에서 한 번만 사용할 수 있으며 figure 안에는 여러 가지의 자식 요소(img, code 등)을 포함할 수 있습니다. ▷ 브라우저 지원 ie 9.0+, chrome 6.0+, firefox 4.0+, safari 5.0+, oper.. 2015. 1. 20.
IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge") IE 문서 모드란(meta http-equiv="x-ua-compatible" content="IE=edge" ) 오늘은 메타 태그 중 아래 코드에 대해 알아보겠습니다. content="IE=edge"는 IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서 모드입니다.(IE6부터 IE11까지) 문서 유형 (document type) 선언과 함께 사용해야 유효합니다. /*가장 최신의 웹표준을 지원하는 HTML5 DOCTYPE을 추천함 */ DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML) IE11에서는, 문서 모드가 곧 퇴화될 것이며 앞으로 사용되지 말아야할 것으로 규정합니다. 현재로서, IE11는 edge mode가 추천하는 문서 모드입니다. 참조: .. 2015. 1. 16.
[CSS] @viewport rule [CSS] @viewport rule 지난 시간엔 meta viewport 태그를 배웠습니다 meta viewport (메타 뷰포트 태그) 사용법 head안에 사용하는 이런 것들 말이죠 잠깐 복습하면, 메타 뷰포트 태그(meta viewport)는 애플이 사파리 아이폰 브라우저를 위해 처음 개발했지만 이후 다른 브라우저들(오페라, 안드로이드, 페넥 브라우저)도 채택하여 사용하고 있습니다. 현재는 메타 뷰포트 태그가 널리 사용되고 있지만, 이 태그는 표준이 아니며, W3C에서 메타 뷰포트 태그의 기능들을 @viewport rule로 표준화하려는 시도를 하고 있습니다. (참조: CSS Device Adaptation ) @viewport rule는 현재 제안된 표준으로, 초안 단계입니다. 정식 표준이 되면 .. 2015. 1. 15.
[html5] main 태그 [html5] main 태그 main 요소는 문서의 주요한 내용을 담는 태그입니다. 과 같은 역할 문서에서 main은 하나 이상 있어선 안 되며, 페이지 당 한 번 사용할 수 있습니다. 사이드바, 네비게이션 링크, 저작권 정보에 있던 내용을 main에서 반복해서 사용할 수 없습니다. 또한 main은 article , aside, footer, header, nav의 자손이어선 안 됩니다. main 요소가 문서 영역을 구분짓는 용도로 사용하진 않기 때문. ▶브라우저 지원 ie 지원하지 않음, chrome 6.0+, firefox 4.0+, safari 5.0+, opera 11.1+ main 요소를 ie에서 지원할 때까지 "main" ARIA role 추가하는 것도 좋습니다. 내용 *ARIA role이란?.. 2015. 1. 14.
반응형