반응형 웹사이트의 기본코드 소스

반응형 웹사이트가 어떻게 작동이 되는지 기본적인 코드를 알려드리도록 할께요.

먼저 반응형 웹사이트가 어떤건지 알아야겠죠?

반응형 웹사이트에 대해서 아직 잘 모르신다면 아래 글을 한번 보시구요.^^

http://sourcemarket.co.kr/index.php/responsive-website

 

먼저 반응형을 어떻게 구현할지 알려드릴께요.

위 글에서 보면 인터넷창, 웹사이트에 접속하는 기기의 화면크기에 따라서 웹사이트 레이아웃이나 이미지, 텍스트크기가 변하게 해야하겠죠?

그럼 스크린 가로 사이즈에 따라서 어떤명령을 실행할지 지정해주는 코드가 있어야겠죠?

그것이 바로 미디어쿼리입니다.

CSS에서 작동을 하는거구요.

코드는

@media screen and (사이즈) {

적용시킬 CSS

}

위 코드만 있으면 반응형 웹사이트를 만들 수 있습니다.

그럼 위 코드에서 사이즈 부분에 들어갈 코드는 무엇일까요?

max-width나 min-width 가 들어가게 됩니다.

max-width를 사용하게 되면 max-width에 입력하는 사이즈보다 작을 경우 “적용시킬 CSS”가 실행됩니다.

min-width를 쓰게되면 min-width에 입력되는 사이즈 이상일 경우 “적용시킬 CSS”가 실행됩니다.

예로 보여드릴께요.

@media screen and (max-width: 1000px) {

body {

width: 100%;

}

}

이렇게 코드를 작성하면 스크린 사이즈가 1000px 이하일 경우 body태그의 가로사이즈를 100%로 만들어라 입니다.

그렇다면 다른예로

@media screen and (min-width: 1000px) {

body {

width: 1000px;

}

}

이렇게 작성한다면 스크린 가로크기가 1000px 이상이 되면 body태그의 width를 1000px로 만들라는 얘기입니다.

이렇게 글로 배우는것 보다는 한번 해보시는게 좋겠죠?

기본적인 반응형 html, css 코드를 만들어 볼께요.

— HTML 부분 —

<html>

<head></head>

<body>

<div class=”a”></div>

<div class=”b”></div>

<div class=”c”></div>

</body>

</html>

 

— CSS 부분 —

.a {

display: inline-block;

width: 200px;

height: 200px;

background-color: red;

}

.b {

display: inline-block;

width: 200px;

height: 200px;

background-color: blue;

}

.c {

display: inline-block;

width: 200px;

height: 200px;

background-color: black;

}

@media screen and (max-width: 700px) {

.a, .b, .c {

width: 100%;

}

}

 

 

실행해보시면 아주 기본적인 반응형 웹사이트의 원리를 이해할 수 있을꺼에요.

이걸 활용해서 다양한 반응형 웹사이트를 만들 수 있습니다.

위 코드 중에서 궁금한게 있으시다면 하단 CONTACT로 질문해주세요.

답글 남기기