본문 바로가기

TUTORIAL


반응형 사이트 만들기(2019)

02. 반응형 웹 사이트 만들기(2019) - 미디어 쿼리

(2019/02) 반응형 사이트 만들기 - 미디어 쿼리

반응형 웹 사이트를 만들기 위한 가장 기본적이 미디어쿼리 사용 예제입니다. 영상을 보면서 같이 따라하세요^^

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>미디어쿼리</title>
	<style>
		body {background: #b71c1c; color: #fff;}
		h1::before {content: '1. '}
		h1::after {content: ' - 기본'}

		/* 화면 너비가 0 ~ 1280px : 데스크탑 */
		@media (max-width: 1280px){
			body {background: #880e4f;}
			h1::before {content: '2. '}
			h1::after {content: ' - 1025px ~ 1280px'}
		}

		/* 화면 너비가 0 ~ 1024px : 데스크탑 */
		@media (max-width: 1024px){
			body {background: #4a148c;}
			h1::before {content: '3. '}
			h1::after {content: ' - 961px ~ 1024px'}
		}

		/* 화면 너비가 0 ~ 960px : 노트북 */
		@media (max-width: 960px){
			body {background: #311b92;}
			h1::before {content: '4. '}
			h1::after {content: ' - 769px ~ 960px'}
		}

		/* 화면 너비가 0 ~ 768 : 타블렛 */
		@media (max-width: 768px){
			body {background: #4a148c;}
			h1::before {content: '5. '}
			h1::after {content: ' - 577px ~ 768px'}
		}

		/* 화면 너비가 0 ~ 576 : 모바일 */
		@media (max-width: 576px){
			body {background: #004D40;}
			h1::before {content: '6. '}
			h1::after {content: ' - 0px ~ 576px'}
		}
	</style>
</head>
<body>
	<h1>미디어쿼리(MediaQuery)</h1>
	<p>미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.</p>
    <p>@media only all and (조건문) {실행문}</p>
    <ul>
        <li>@media : 미디어 쿼리가 시작됨을 표시합니다.</li>
        <li>only :  미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)</li>
        <li>all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
            <ul>
                <li>all : 모든 미디어 유형에서 사용할 CSS를 정의합니다.</li>
                <li>print : 인쇄 장치에서 사용할 CSS를 정의합니다.</li>
                <li>screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다.</li>
                <li>aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다.</li>
                <li>tv : TV에서 사용할 CSS를 정의합니다.</li>
                <li>handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의합니다.</li>
                <li>projection : 프로젝트를 위한 사용할 CSS를 정의합니다.</li>
            </ul>
        </li>
        <li>and : 앞과 두의 조건을 나타냅니다.(생략가능)</li>
        <li>(조건문) : 해당 조건을 설정 할 수 있습니다.</li>
        <li>(실행문) : 조건에 따른 실행을 설정합니다.</li>
    </ul>
</body>
</html>




























































<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>미디어쿼리</title>
</head>
<body>
	<h1>미디어쿼리(MediaQuery)</h1>
	<p>미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술입니다.</p>
    <p>@media only all and (조건문) {실행문}</p>
    <ul>
        <li>@media : 미디어 쿼리가 시작됨을 표시합니다.</li>
        <li>only :  미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)</li>
        <li>all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
            <ul>
                <li>all : 모든 미디어 유형에서 사용할 CSS를 정의합니다.</li>
                <li>print : 인쇄 장치에서 사용할 CSS를 정의합니다.</li>
                <li>screen : 컴퓨터 스크린에서 사용할 CSS를 정의합니다.</li>
                <li>aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의합니다.</li>
                <li>tv : TV에서 사용할 CSS를 정의합니다.</li>
                <li>handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의합니다.</li>
                <li>projection : 프로젝트를 위한 사용할 CSS를 정의합니다.</li>
            </ul>
        </li>
        <li>and : 앞과 두의 조건을 나타냅니다.(생략가능)</li>
        <li>(조건문) : 해당 조건을 설정 할 수 있습니다.</li>
        <li>(실행문) : 조건에 따른 실행을 설정합니다.</li>
    </ul>
</body>
</html>


























































body {background: #b71c1c; color: #fff;}
h1::before {content: '1. '}
h1::after {content: ' - 기본'}

/* 화면 너비가 0 ~ 1280px : 데스크탑 */
@media (max-width: 1280px){
    body {background: #880e4f;}
    h1::before {content: '2. '}
    h1::after {content: ' - 1025px ~ 1280px'}
}

/* 화면 너비가 0 ~ 1024px : 데스크탑 */
@media (max-width: 1024px){
    body {background: #4a148c;}
    h1::before {content: '3. '}
    h1::after {content: ' - 961px ~ 1024px'}
}

/* 화면 너비가 0 ~ 960px : 노트북 */
@media (max-width: 960px){
    body {background: #311b92;}
    h1::before {content: '4. '}
    h1::after {content: ' - 769px ~ 960px'}
}

/* 화면 너비가 0 ~ 768 : 타블렛 */
@media (max-width: 768px){
    body {background: #4a148c;}
    h1::before {content: '5. '}
    h1::after {content: ' - 577px ~ 768px'}
}

/* 화면 너비가 0 ~ 576 : 모바일 */
@media (max-width: 576px){
    body {background: #004D40;}
    h1::before {content: '6. '}
    h1::after {content: ' - 0px ~ 576px'}
}

























  • KKS 2019.01.27 22:55 댓글주소 수정/삭제 댓글쓰기

    http://practice001.dothome.co.kr/responsive/layout2.html

    반응형 공부시작했습니다~!
    혹시 미디어쿼리 코딩하고 확인할때, 웹창 크기 마우스로 줄이고 키우고 하면서 확인하잖아요. 근데 동영상처럼 저는 자연스럽게 줄이고 키우면서 확인이 안되고, 마우스로 잡아서 줄인다음에 마우스를 떼야 확인이가능한데 이거 마우스설정을하는건가용??...

  • KKS 2019.01.28 13:35 댓글주소 수정/삭제 댓글쓰기

    크롬사용하고 있어요!

    • 따로 설정하는건 없습니다. 기본 성질이 그렇게 되어 있는데~~~ 그 부분은 저도 잘 모르겠네요~ 혹시 다른 브라우저도 그런가요?

    • KKS 2019.01.28 14:20 댓글주소 수정/삭제

      다른 브라우저도 똑같네요 ㅠ 좀 불편하기는 하지만 이상은 없으니 괜찮을거같아요! 감사합니다^^

    • 혹시 f12 누르고 toggle device toolbar 이거 누른거 아닌가요? 대상 선택하는 셀렉트 메뉴 옆에 잇는거요~~~ 그거 누르면 화면 크기에 따라 나오는데요~~~

  • KKS 2019.01.28 15:19 댓글주소 수정/삭제 댓글쓰기

    https://www.youtube.com/watch?v=vOCfobElxkQ&feature=youtu.be

    ㅠㅠ.. 큰문제는 아니였는데 해결해주시려고 하셔서 영상으로 올려봅니당.. 끌고당길때 스무스하지않은게 문제점이였어용... 이상한걸 물어봐가지고.. 죄송합니다 ㅠ

  • rodi 2019.06.05 00:45 댓글주소 수정/삭제 댓글쓰기

    강의 좋습니다. 1강 완료하고, 2강도 시작했습니다.