Welcolme my Tutorial blog

퍼블리셔와 디자이너를 위한 사이트입니다.
동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

Welcolme my Tutorial blog

웹 표준 사이트 따라하기 튜토리얼 입니다.
유튜브 영상과 같이 보면서 따라하는 튜토입니다.

Welcolme my Tutorial blog

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.

안녕하세요!

현재는 베타버전입니다.

이 사이트는 코딩을 동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

에디터가 드리는 인사

티스토리 뷰

<!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>
	<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>







<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>










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

반응형 웹 사이트를 만들기 위한 가장 기본적이 미디어 쿼리 사용 예제입니다.

완성

공유하기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
태그보기

전체메뉴

질문하기
댓글
  • 프로필사진 KKS http://practice001.dothome.co.kr/responsive/layout2.html

    반응형 공부시작했습니다~!
    혹시 미디어쿼리 코딩하고 확인할때, 웹창 크기 마우스로 줄이고 키우고 하면서 확인하잖아요. 근데 동영상처럼 저는 자연스럽게 줄이고 키우면서 확인이 안되고, 마우스로 잡아서 줄인다음에 마우스를 떼야 확인이가능한데 이거 마우스설정을하는건가용??...
    2019.01.27 22:55 신고
  • 프로필사진 @webs 부라우저를 무엇을 사용하나요?? 2019.01.28 11:29 신고
  • 프로필사진 KKS 크롬사용하고 있어요! 2019.01.28 13:35 신고
  • 프로필사진 @webs 따로 설정하는건 없습니다. 기본 성질이 그렇게 되어 있는데~~~ 그 부분은 저도 잘 모르겠네요~ 혹시 다른 브라우저도 그런가요? 2019.01.28 14:12 신고
  • 프로필사진 KKS 다른 브라우저도 똑같네요 ㅠ 좀 불편하기는 하지만 이상은 없으니 괜찮을거같아요! 감사합니다^^ 2019.01.28 14:20 신고
  • 프로필사진 @webs 혹시 f12 누르고 toggle device toolbar 이거 누른거 아닌가요? 대상 선택하는 셀렉트 메뉴 옆에 잇는거요~~~ 그거 누르면 화면 크기에 따라 나오는데요~~~ 2019.01.28 14:39 신고
  • 프로필사진 KKS https://www.youtube.com/watch?v=vOCfobElxkQ&feature=youtu.be

    ㅠㅠ.. 큰문제는 아니였는데 해결해주시려고 하셔서 영상으로 올려봅니당.. 끌고당길때 스무스하지않은게 문제점이였어용... 이상한걸 물어봐가지고.. 죄송합니다 ㅠ
    2019.01.28 15:19 신고
  • 프로필사진 @webs 그러네요~~~ 죄송하지만 이 원인은 잘 모르겠네요~~ 혹시 왜 그런지 발견하시면 알려주세요^^ 2019.01.29 14:31 신고
댓글쓰기 폼