본문 바로가기
반응형

css124

[css] :checked 선택자를 이용한 토글 버튼 [css] :checked 선택자를 이용한 토글 메뉴 버튼 어제는 기본적인 토글 메뉴를 만들어 보았어요. css로 토글 메뉴 만들기(메뉴 열고 닫기) label 요소와, 체크박스, checked 선택자를 이용하여 메뉴 아이콘을 클릭하면 메뉴가 생성되고, 다시 클릭하면 메뉴가 사라지는 방식을 배웠습니다. 이번에는 토글 메뉴 버튼을 만들고, 전체적인 레이아웃까지 만들어 볼게요. A 화면 B 화면 C 화면 ▶전체 html ≡ Home ❘ Guest ❘ Noitce 본문 오른쪽 사이드바 footer 모두 지난 시간 배운 것을 응용했기 때문에 지난 강좌를 먼저 읽고 오셔야 이해하기 쉽습니다~ css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 지난 시간과.. 2015. 2. 11.
css로 토글 메뉴 만들기(메뉴 열고 닫기) css로 토글 메뉴 만들기(메뉴 열고 닫기) 미디어 쿼리를 이용해서, 반응형 웹사이트 만들기 연습해 보고 있습니다. 지난 시간에는 숨김 메뉴를 드러낼 때, hover 선택자로 마우스 오버할 때만 메뉴가 생성되었는데요... CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 오늘은 메뉴 아이콘을 클릭했을 때 메뉴가 보이고, 다시 한 번 더 클릭하면 사라지는 방식을 배워볼게요. 영어로 toggle menu(토글 메뉴)라고도 하며 자바스크립트나 jquery를 이용한 방법도 있는데, 오늘은 css로만 만들어 보겠습니다. html 소스 ≡ /*메뉴 아이콘*/ /*체크박스*/ /*메뉴*/ Home ❘ Guest ❘ Noitce .. 2015. 2. 10.
css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) css로 반응형 웹사이트(화면 축소시 메뉴 사라지고 아이콘 등장) 미디어 쿼리를 이용하여 반응형 웹사이트 만들기를 해 보고 있어요. 미디어 쿼리, @media query 이해하기 반응형 웹사이트(소스) 만들기 연습 CSS로 반응형 웹사이트(소스) 만들기: 사이드바가 본문 아래로 떨어지게 이번 시간엔 1. 화면 480px 이하로 축소하면, 상단 메뉴바가 사라지고 2. 메뉴 아이콘이 새로 등장하며 3. 아이콘을 클릭했을 때 다시 메뉴가 등장하는 방법 을 배워 볼게요. A 화면 B 화면 C 화면 A화면 만들기 전체 html 소스 ↺ /*메뉴 아이콘*/ /*메뉴*/ Home ❘ Guest ❘ Notice 본문 /*본문 영역*/ 오른쪽 사이드바 /*사이드바 영역*/ footer /*푸터 영역*/ 그럼 하나씩 살펴.. 2015. 2. 6.
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.
[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.
[CSS] @viewport rule [CSS] @viewport rule 지난 시간엔 meta viewport 태그를 배웠습니다 meta viewport (메타 뷰포트 태그) 사용법 head안에 사용하는 이런 것들 말이죠 잠깐 복습하면, 메타 뷰포트 태그(meta viewport)는 애플이 사파리 아이폰 브라우저를 위해 처음 개발했지만 이후 다른 브라우저들(오페라, 안드로이드, 페넥 브라우저)도 채택하여 사용하고 있습니다. 현재는 메타 뷰포트 태그가 널리 사용되고 있지만, 이 태그는 표준이 아니며, W3C에서 메타 뷰포트 태그의 기능들을 @viewport rule로 표준화하려는 시도를 하고 있습니다. (참조: CSS Device Adaptation ) @viewport rule는 현재 제안된 표준으로, 초안 단계입니다. 정식 표준이 되면 .. 2015. 1. 15.
반응형

티스토리툴바