반응형 레이아웃의 첫걸음 예제소스 정보
반응형웹 반응형 레이아웃의 첫걸음 예제소스
관련링크
본문
데모 - http://demo.widgets.co.kr/?c=77/79/94
반응형 웹의 개념을 정식으로 표현 하면 "반응형웹 기법을 기반으로 디자인한 다양한 디바이스(PC, 태블릿, 스마트폰, 스마트TV 등)를 대응하는 웹 서비스" 입니다.
반응형이란 개념이 생기고 부터 많은 플레임웍과 이를 탑재한 CMS들이 출시되고 있습니다.
처음 접하는 분들은 이 플레임워크와 이를 기반으로 한 서비스들을 보면서 막연히 개념 자체를 어렵게 느낄 수도 있습니다.
실제로 실무자들 중 연차가 좀 되는 분들도 이 부분에 대해서 노력하지 않으면 기피하는 경향을 보였습니다.
아래 소스는 경력 6년차 디자이너가 반응형 코딩을 처음 접할 때 입문 교육용으로 만든 소스입니다.
저는 실무 위주의 스스로 학습 권유자라 디테일하진 않고 가장 기초가 되는 부분을 가장 쉽게 교육하려고 노력합니다.
아... 아니 교육을 잘 못하는거라고 표현해야 하겠습니다.
참 쉬운데 그게 설명이 안되요 크흠...
이 글도 그래서 써보는 거랍니다 ..... ㅡㅡ
part1.0이며 이는 정말 가장 기초적인 동작을 담았습니다.
부라우저 크기에 따른 미디어 쿼리 동작 파트입니다.
part1.0 부터 part3.0 까지 교육 후 혼자서 습득해 갈 개념을 가지게 되었습니다.
부라우저 크기에 따른 미디어 쿼리 동작, 미디어 쿼리에서 동작하는 요소들, 반응형 웹을 위한 요소 활용법
이렇게 3개의 파트입니다.
지금처럼 간단한 예제만으로도 도움이 되신다면 파트 3까지 시간을 두고 올려드리겠습니다.
자, 일단 이 반응형 웹이라는게요 동작에 대한 개념을 좀더 자세히 설명을 하고 싶어도 정말 설명할게 없는 것입니다.
배우실때 소스 중 살펴보실 부분은 단 하나 @media (maqx-width.... 이부분 뿐인데 이것만 있으면 됩니다.
@media 이 부분을 보고 미디어 쿼리라고 합니다.
그리고 그 뒤에 나오는 괄호"(...)"안에 들어있는 max-width, min-width 부분을 쿼리값이라 합니다.
이부분을 간단하게 말하면 "부라우저 크기가 미디어 쿼리의 값에 해당할때 그안에 있는 CSS를 적용한다"
이게 끝입니다.
이게 반응형 웹의 전부라고 보셔도 되요.
막 상자가 날라다니고 배너가 숨겨지고 어쩌고 ㄷ ㅏ필요 없어요!
그런 동작은 반응형 웹 안의 동작요소들에 속하는데 일반 CSS와 동일합니다.
반응형 웹용 CSS가 따로 있는게 아니에요!
일단 보시고 3가지만 사용해보시죠.
너비,높이,배경색상 이렇게 말입니다.
가시적으로 변하는게 보이려면 이 3가지는 있어야 입문자가 이해를 할 수 있는것 같았습니다.
그밖에 왠만한 속성은 다 먹히지만, 있어보이는 비주얼을 위해서는 검색을 좀 해보시길 권장합니다.
뭐랄까 슈웅~, 쉬잉~, 슉~ 이런것들? 폰트크기부터 배경색 배너위치,크기 등등 많습니다.
이바닦은 검색능력이 곧 실력이에요.
잡설이 길었는데 소스 보고 데모페이지 보면 딱 알 수도 있습니다.
//index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.test{
position:relative;
margin:auto;
/* 이기 바로 초간단 애니메이션 */
/* left, top, margin, max-height, background-color 등등이 요 3줄로 스르륵~ 변하게 된다.*/
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
/* 이기 바로 초간단 애니메이션 끝*/
}
.test .icon1{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
.test .icon2{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
/* 이기 바로 미디어쿼리들 */
@media (max-width: 320px) {
.test{
height:200px;
background-color:blue;
margin:10px;
}
}
@media (min-width: 401px) and (max-width: 640px) {
.test{
height:250px;
background-color:red;
margin:20px;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.test{
height:300px;
background-color:gray;
margin:30px;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.test{
height:400px;
background-color:green;
margin:50px;
}
}
@media (min-width: 1201px) {
.test{
height:600px;
background-color:#000;
margin:100px;
}
.test .icon1{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:yellow;
}
.test .icon2{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:pink;
}
}
/* 이기 바로 미디어쿼리들 끝 */
</style>
</head>
<body>
<div class='test'>
<div class='icon1'></div>
<div class='icon2'></div>
</div>
</body>
</html>
데모 - http://demo.widgets.co.kr/?c=77/79/94
반응형 웹의 개념을 정식으로 표현 하면 "반응형웹 기법을 기반으로 디자인한 다양한 디바이스(PC, 태블릿, 스마트폰, 스마트TV 등)를 대응하는 웹 서비스" 입니다.
반응형이란 개념이 생기고 부터 많은 플레임웍과 이를 탑재한 CMS들이 출시되고 있습니다.
처음 접하는 분들은 이 플레임워크와 이를 기반으로 한 서비스들을 보면서 막연히 개념 자체를 어렵게 느낄 수도 있습니다.
실제로 실무자들 중 연차가 좀 되는 분들도 이 부분에 대해서 노력하지 않으면 기피하는 경향을 보였습니다.
아래 소스는 경력 6년차 디자이너가 반응형 코딩을 처음 접할 때 입문 교육용으로 만든 소스입니다.
저는 실무 위주의 스스로 학습 권유자라 디테일하진 않고 가장 기초가 되는 부분을 가장 쉽게 교육하려고 노력합니다.
아... 아니 교육을 잘 못하는거라고 표현해야 하겠습니다.
참 쉬운데 그게 설명이 안되요 크흠...
이 글도 그래서 써보는 거랍니다 ..... ㅡㅡ
part1.0이며 이는 정말 가장 기초적인 동작을 담았습니다.
부라우저 크기에 따른 미디어 쿼리 동작 파트입니다.
part1.0 부터 part3.0 까지 교육 후 혼자서 습득해 갈 개념을 가지게 되었습니다.
부라우저 크기에 따른 미디어 쿼리 동작, 미디어 쿼리에서 동작하는 요소들, 반응형 웹을 위한 요소 활용법
이렇게 3개의 파트입니다.
지금처럼 간단한 예제만으로도 도움이 되신다면 파트 3까지 시간을 두고 올려드리겠습니다.
자, 일단 이 반응형 웹이라는게요 동작에 대한 개념을 좀더 자세히 설명을 하고 싶어도 정말 설명할게 없는 것입니다.
배우실때 소스 중 살펴보실 부분은 단 하나 @media (maqx-width.... 이부분 뿐인데 이것만 있으면 됩니다.
@media 이 부분을 보고 미디어 쿼리라고 합니다.
그리고 그 뒤에 나오는 괄호"(...)"안에 들어있는 max-width, min-width 부분을 쿼리값이라 합니다.
이부분을 간단하게 말하면 "부라우저 크기가 미디어 쿼리의 값에 해당할때 그안에 있는 CSS를 적용한다"
이게 끝입니다.
이게 반응형 웹의 전부라고 보셔도 되요.
막 상자가 날라다니고 배너가 숨겨지고 어쩌고 ㄷ ㅏ필요 없어요!
그런 동작은 반응형 웹 안의 동작요소들에 속하는데 일반 CSS와 동일합니다.
반응형 웹용 CSS가 따로 있는게 아니에요!
일단 보시고 3가지만 사용해보시죠.
너비,높이,배경색상 이렇게 말입니다.
가시적으로 변하는게 보이려면 이 3가지는 있어야 입문자가 이해를 할 수 있는것 같았습니다.
그밖에 왠만한 속성은 다 먹히지만, 있어보이는 비주얼을 위해서는 검색을 좀 해보시길 권장합니다.
뭐랄까 슈웅~, 쉬잉~, 슉~ 이런것들? 폰트크기부터 배경색 배너위치,크기 등등 많습니다.
이바닦은 검색능력이 곧 실력이에요.
잡설이 길었는데 소스 보고 데모페이지 보면 딱 알 수도 있습니다.
//index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.test{
position:relative;
margin:auto;
/* 이기 바로 초간단 애니메이션 */
/* left, top, margin, max-height, background-color 등등이 요 3줄로 스르륵~ 변하게 된다.*/
transition: 0.8s;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
/* 이기 바로 초간단 애니메이션 끝*/
}
.test .icon1{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
.test .icon2{
position:absolute;
height:50px;
width:50px;
top:50px;
left:50px;
background-color:#fff;
}
/* 이기 바로 미디어쿼리들 */
@media (max-width: 320px) {
.test{
height:200px;
background-color:blue;
margin:10px;
}
}
@media (min-width: 401px) and (max-width: 640px) {
.test{
height:250px;
background-color:red;
margin:20px;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.test{
height:300px;
background-color:gray;
margin:30px;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.test{
height:400px;
background-color:green;
margin:50px;
}
}
@media (min-width: 1201px) {
.test{
height:600px;
background-color:#000;
margin:100px;
}
.test .icon1{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:yellow;
}
.test .icon2{
position:relative;
height:50px;
width:100%;
top:0px;
left:0px;
background-color:pink;
}
}
/* 이기 바로 미디어쿼리들 끝 */
</style>
</head>
<body>
<div class='test'>
<div class='icon1'></div>
<div class='icon2'></div>
</div>
</body>
</html>
데모 - http://demo.widgets.co.kr/?c=77/79/94
추천
0
0
댓글 0개