본문 바로가기
반응형

It66

CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 미디어쿼리를 이용한 반응형 웹사이트 만들기 연습해 보고 있어요. 지난 강좌를 읽고 오셔야 이해가 쉽습니다. [css] 미디어 쿼리, @media query 이해하기 반응형 웹사이트(소스) 만들기 연습 오늘은 지난 시간에 낸 연습 문제, 화면이 480px 이하로 축소될 때 본문 바로 밑으로 사이드 바가 떨어지게 만들어 보겠습니다. 또 480px 이하일 때, 사이드바를 없애는 법과, IE6,7,8에서 미디어쿼리를 적용하는 방법도 알아 볼게요 [소스 작성 순서] A 화면 만들기 -> B 화면 만들기 A 화면 B 화면 A화면 만들기 어제 배운 소스를 그대로 활용해서 몇 가지만 수정하면 됩니다. html Home Guest Noitce 본문.. 2015. 2. 6.
반응형 웹사이트(소스) 만들기 연습 반응형 웹사이트 만들기 연습(소스) 지난 시간에 미디어 쿼리 문법을 배웠습니다. [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.
[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.
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.
meta viewport (메타 뷰포트 태그) 사용법 meta viewport(메타 뷰포트 태그) 사용법 얼마 전에 meta 태그 사용법이란 글을 썼는데 [html] meta 태그 사용법 위 글에서 다루지 못한(빠진) 것들을 다루어 보려고 해요. 힌트를 주신 admin 님께 감사합니다.^^ 오늘 다룰 부분은 meta viewport(메타 뷰포트 태그) 입니다. 웹페이지 소스를 보면 간혹 head 에 이런 meta 구문을 보신 적이 있으실 거예요. meta viewport 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트(viewport) 크기 조절을 위해 만들었습니다. (뷰포트에 대한 설명은 본문 참조) meta viewport 태그는 W3C 명세에는 없지만,(따라서 표준이 아님) iOS 장치(아이폰 운영체제 브라우저 safari)가 널리.. 2015. 1. 9.
웹사이트 운영자라면 알아야할 html, css 상식 웹사이트 운영자라면 알아야할 html, css 상식 크리스마스는 잘 보내셨나요? 저는 25일에 광명 이케아 갔다가 엄청 고생하고 왔습니다 ㅎㅎ 생각보다 가는 대중 교통 편이 너무 복잡하더라구요. 결국 택시 타고 갔는데, 입구에서 30~40분을 기다리고, 레스토랑에서 20분 정도 기다리고 나오면서 길 못찾아 헤매고, 건물 안은 사람들이 미어 터집니다. 그럼에도 가볼만은 했다고 생각은 하지만.... 다음엔 사람 없을 때 가고 싶네요. 며칠 남지 않은 12월, 사람들 많은 데 가서 고생하지 마시고, 조용하고 한적한 곳에서 지난 일을 관조하는 것도 좋을 것 같습니다. 오늘은 연말 결산으로, 지금까지 써온 글 중에 사이트(티스토리, 블로그, 까페 포함) 운영자라면 알아두어야 할 html, css 상식을 다루어 볼.. 2014. 12. 26.
반응형

티스토리툴바