Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

안녕하세요!

현재는 베타버전입니다.

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

에디터가 드리는 인사

티스토리 뷰

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
	<style>
        * {margin: 0; padding: 0;}
        body {background-color: #e3f2fd;}
		
        #wrap{width: 1200px; margin: 0 auto;}
        #header {width: 100%; height: 100px; background-color: #b2defe;}
        #banner {width: 100%; height: 400px; background-color: #7ecbfd;}
        #content1 {width: 100%; overflow: hidden;}
        #content1 .nav {float: left; width: 30%; height: 500px; background-color: #43b5fc;}
        #content1 .article_right1 {float: left; width: 70%; height: 250px; background-color: #00a5fb;}
        #content1 .article_right2 {float: left; width: 70%; height: 250px; background-color: #0096fa;}
        
        #content2 {overflow: hidden;}
        #content2 .article_box1 {float: left; width: 33.3333%; height: 300px; background-color: #0088ec;}
        #content2 .article_box2 {float: left; width: 33.3333%; height: 300px; background-color: #0076d9;}
        #content2 .article_box3 {float: left; width: 33.3333%; height: 300px; background-color: #0064c6;}
        
        #content3 {overflow: hidden; padding: 5%; background-color: #00a6fc;}
        #content3 .article_square1 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
        #content3 .article_square2 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
        #content3 .article_square3 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
        #content3 .article_square4 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
        #footer {width: 100%; height: 100px; background-color: #43b5fc;}
        
        /* 화면 너비 0 ~ 1200px */
        @media (max-width: 1240px){
            #wrap {width: 100%;}
            #content2 .article_box1 {width: 50%;}
            #content2 .article_box2 {width: 50%;}
            #content2 .article_box3 {display:none}
            
            #content3 .article_square1 {width: 31.333%;}
            #content3 .article_square2 {width: 31.333%;}
            #content3 .article_square3 {width: 31.333%;}
            #content3 .article_square4 {display: none;}
		}
        
        /* 화면 너비 0 ~ 768px */
        @media (max-width: 768px){
            #content2 .article_box1 {width: 100%;}
            #content2 .article_box2 {width: 100%;}
		}
        
        /* 화면 너비 0 ~ 480px */
        @media (max-width: 480px){
            #content1 .nav {width: 100%; height: 200px;}
            #content1 .article_right1 {width: 100%; height: 200px;}
            #content1 .article_right2 {width: 100%; height: 200px;}
            
            #content3 .article_square1 {width: 98%; border-radius: 5px;}
            #content3 .article_square2 {width: 98%; border-radius: 5px;}
            #content3 .article_square3 {width: 98%; border-radius: 5px;}
		}
    </style>
</head>
<body>
	<div id="wrap">
		<header id="header"></header>
		<section id="banner"></section>
		<section id="content1">
			<nav class="nav"></nav>
			<article class="article_right1"></article>
			<article class="article_right2"></article>
		</section>
		<section id="content2">
			<article class="article_box1"></article>
			<article class="article_box2"></article>
			<article class="article_box3"></article>
		</section>
		<section id="content3">
			<article class="article_square1"></article>
			<article class="article_square2"></article>
			<article class="article_square3"></article>
			<article class="article_square4"></article>
		</section>
		<footer id="footer"></footer>
	</div>
</body>
</html>










<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
</head>
<body>
	<div id="wrap">
		<header id="header"></header>
		<section id="banner"></section>
		<section id="content1">
			<nav class="nav"></nav>
			<article class="article_right1"></article>
			<article class="article_right2"></article>
		</section>
		<section id="content2">
			<article class="article_box1"></article>
			<article class="article_box2"></article>
			<article class="article_box3"></article>
		</section>
		<section id="content3">
			<article class="article_square1"></article>
			<article class="article_square2"></article>
			<article class="article_square3"></article>
			<article class="article_square4"></article>
		</section>
		<footer id="footer"></footer>
	</div>
</body>
</html>













<style>
* {margin: 0; padding: 0;}
body {background-color: #e3f2fd;}

#wrap{width: 1200px; margin: 0 auto;}
#header {width: 100%; height: 100px; background-color: #b2defe;}
#banner {width: 100%; height: 400px; background-color: #7ecbfd;}
#content1 {width: 100%; overflow: hidden;}
#content1 .nav {float: left; width: 30%; height: 500px; background-color: #43b5fc;}
#content1 .article_right1 {float: left; width: 70%; height: 250px; background-color: #00a5fb;}
#content1 .article_right2 {float: left; width: 70%; height: 250px; background-color: #0096fa;}

#content2 {overflow: hidden;}
#content2 .article_box1 {float: left; width: 33.3333%; height: 300px; background-color: #0088ec;}
#content2 .article_box2 {float: left; width: 33.3333%; height: 300px; background-color: #0076d9;}
#content2 .article_box3 {float: left; width: 33.3333%; height: 300px; background-color: #0064c6;}

#content3 {overflow: hidden; padding: 5%; background-color: #00a6fc;}
#content3 .article_square1 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
#content3 .article_square2 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
#content3 .article_square3 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
#content3 .article_square4 {float: left; width: 23%; margin: 1%; height: 200px; border-radius: 5%; background-color: #0076d9;}
#footer {width: 100%; height: 100px; background-color: #43b5fc;}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 1240px){
    #wrap {width: 100%;}
    #content2 .article_box1 {width: 50%;}
    #content2 .article_box2 {width: 50%;}
    #content2 .article_box3 {display:none}

    #content3 .article_square1 {width: 31.333%;}
    #content3 .article_square2 {width: 31.333%;}
    #content3 .article_square3 {width: 31.333%;}
    #content3 .article_square4 {display: none;}
}

/* 화면 너비 0 ~ 768px */
@media (max-width: 768px){
    #content2 .article_box1 {width: 100%;}
    #content2 .article_box2 {width: 100%;}
}

/* 화면 너비 0 ~ 480px */
@media (max-width: 480px){
    #content1 .nav {width: 100%; height: 200px;}
    #content1 .article_right1 {width: 100%; height: 200px;}
    #content1 .article_right2 {width: 100%; height: 200px;}

    #content3 .article_square1 {width: 98%; border-radius: 5px;}
    #content3 .article_square2 {width: 98%; border-radius: 5px;}
    #content3 .article_square3 {width: 98%; border-radius: 5px;}
}
</style>











07. 반응형 웹 사이트 만들기(2019) - 반응형 레이아웃 유형5

반응형 레이아웃 연습 예제입니다.

완성

공유하기

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

전체메뉴

질문하기
댓글
  • 프로필사진 geon http://smiling88.dothome.co.kr/layout2/layout7.html

    항상 잘 보고 있습니다 감사합니다^^; 질문있는데요,
    문제의 css 코드는 25번 , 27번째고..
    #section2의 article을 first-child, last-child로 선택하여서 백그라운드를 입히려고 했는데요,
    먼저 작성한 적용되지 않았던 CSS는..
    #section2 article{float: left; width: 70%; height: 250px; }
    #section2 article:first-child{background: #42a5f5;}
    #section2 article:last-child{background: #2196f3;}
    구요..
    어차피 section2의 article갯수는 2개 라서 굳이 first는 사용 하지 않아도 되지만 안되니까 궁금하네요
    2019.01.14 14:13 신고
  • 프로필사진 @webs first-child는 태그가 무슨 태그인지 구별하지 못합니다. 그래서 여기서 첫번째 자식은 <nav>가 되는 거구요~~ 그럼 아티클에서 첫 번째 자식을 선택하려면 first-of-type를 쓰시면 될거예요^^ 2019.01.15 10:26 신고
  • 프로필사진 geon 자세한 설명 감사합니다!
    first-child와 first-of-type의 차이점을 검색해보고 차이점을 공부했습니다. ㅠ
    감사합니다 ^^
    2019.01.16 22:06 신고
  • 프로필사진 KKS http://practice001.dothome.co.kr/responsive/layout7_1.html

    항상 유익한 강의 감사합니다^^
    실무에서도 시맨틱태그를 많이사용하나요? div로 짤때는 id나 class이름만 주면되는데,
    시맨틱태그는 적응이 안되서그런지 section을 써야할지 article을 써야할지, section에 id나 class주는게 어색하네요ㅠ
    2019.01.30 15:35 신고
  • 프로필사진 @webs 사실 실무에서는 아직도 시멘틱 보다는 div를 많이 쓰고 있습니다. 저도 강의 때문에 쓰고 있지만 어색함은 없어질 것입니다. 현재 익스도 9이상을 맞추면 되기 때문에 시멘틱을 쓰는게 웹 표준을 준수하는 방법중에 하나이기 때문에 쓰는 걸 추천합니다. 조금만 쓰시면 익숙해질 것입니다. 2019.02.03 12:28 신고
댓글쓰기 폼