Type something to search...
to navigateto selectESC to close

14 레이아웃

정보

📢 이미지다운로드

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction

01. float

정보

💡 float 주의점

  1. 상속X
  2. 동위의 형제요소에 적용됨
  3. float 은 해제 하지 않으면 다음 요소의 배치가 틀어짐
  4. float:left 를 사용 했을때 clear:left 해제
  5. float:right 를 사용 했을때 clear:right 해제
  6. clear:both 양쪽방향 모두 해제 float:left

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
   <h1>금 연<br>일 지</h1>
12
   <p><strong>첫날</strong>은 담배 냄새가 나지 않아서 좋았고, 다음 날은 <strong>눈</strong>이 맑아진 것 같아 좋았고 그 다음 날은 <strong>아들</strong>에게 당당하게 담배 피우지 말라고 말할 수 있어서 좋았다. 개인적인 기호를 법적으로만 관리할 수도 없는 것이고 금연을 일사불란하게 실행한다는 것은 말도 안되는 일이지만, 애연가들 덕분에 그들과 더불어 원치 않게 죽어가는 많은 사람들의 넋은 누가 달래야 할 것인가...</p>
13
</body>
14
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>float</title>
6
    <style type="text/css">
7
      h1,p{
8
        margin: 0;
9
        padding: 0;
10
      }
11
      h1{
12
        float:left;
13
        margin:5px 10px 5px 0;
14
        padding:3px 10px;
15
        font-size: 200%;
16
        background: brown;
17
        color:#fff;
18
      }
19
      p{
20
        width:500px;
21
        text-align: justify;
22
        color:darkgreen;
23
      }
24
      p strong{
25
        font-size: 120%;
26
      }
27
    </style>
28
  </head>
29
  <body>
30
    <h1>금 연<br />일 지</h1>
31
    <p>
32
      <strong>첫날</strong>은 담배 냄새가 나지 않아서 좋았고, 다음 날은
33
      <strong>눈</strong>이 맑아진 것 같아 좋았고 그 다음 날은
34
      <strong>아들</strong>에게 당당하게 담배 피우지 말라고 말할 수 있어서
35
      좋았다. 개인적인 기호를 법적으로만 관리할 수도 없는 것이고 금연을
36
      일사불란하게 실행한다는 것은 말도 안되는 일이지만, 애연가들 덕분에 그들과
37
      더불어 원치 않게 죽어가는 많은 사람들의 넋은 누가 달래야 할 것인가...
38
    </p>
39
  </body>
40
</html>

1-2. float:right

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
    <h3>써니초록농장 - 연꽃과 함께 포근하고 건강하게...</h3>
12
    <div class="toomany">
13
        <div class="lotus">
14
            <img src="img/lotus.png" width="100%" alt="연꽃">
15
            <p>쌍떡잎식물 미나리아재비목 연꽃과 연꽃속의 여러해살이 식물. 부용(芙蓉)이라고도 부른다.</p>
16
        </div>
17
        <p> 꽃말은 소외된 사랑.<br>
18
        연꽃(Nelumbo)과 수련(Nymphaea)은 학술적 기준으로 목 단위가 완전히 다릅니다. 흔히 생각하는 연꽃은 프로테아목 연꽃과이고 수련은 수련목 수련과입니다. 인도가 원산지인 연꽃은 연못 위에 둥둥 떠 있는 수생식물이라는 이미지만 떠올리기 쉽지만, 실은 논이나 늪지의 진흙 속에서도 자라고 관상용뿐만 아니라 식용, 약용으로 쓰이기도 해서 연의 줄기인 연근은 반찬으로 자주 이용됩니다. 이런 까닭으로 가끔 여름철 농촌에 가면 벼 대신에 연꽃을 대량으로 재배하는 곳을 찾을 수 있는데 꽃도 아름답고 향기도 좋아서 축제도 자주 열립니다.<br>
19
        이집트 원산인 수련과의 구별법은, 연꽃은 잎과 꽃이 모두 수면 위로 튀어나와 있지만 수련은 잎과 꽃이 모두 수면에 바짝 붙어 있고, 연꽃 씨앗은 생명력이 대단한데, 오래된 연꽃이 발아한 사례도 있습니다.<br>
20
        전라북도 전주에 큰 연꽃 연못이 있고 중앙에 전망대도 있습니다. 자세히 들여다보면 빨려 들어갈 수 있으니 주의 요망! 서울에는 봉원사나 조계사 등 연꽃 축제가 열리는 시즌이 있습니다.</p>
21
    </div>
22
</body>
23
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>float</title>
6
    <style type="text/css">
7
      * {
8
        margin: 0;
9
        padding: 0;
10
      }
11
      h3 {
12
        padding: 10px 70px 10px;
13
        border-bottom: 1px dotted #aaa;
14
        color: #357;
15
      }
16
      .toomany {
17
        width: 75%;
18
        max-width: 600px;
19
        margin:20px;
20
        text-align: justify;
21
      }
22
      .lotus{
23
        float: right;
24
        width:150px;
25
        padding:10px;
26
        border:1px solid #aaa;
27
        margin-left: 20px;
28
      }
29
    </style>
30
  </head>
31
  <body>
32
    <h3>써니초록농장 - 연꽃과 함께 포근하고 건강하게...</h3>
33
    <div class="toomany">
34
      <div class="lotus">
35
        <img src="img/lotus.png" width="100%" alt="연꽃" />
36
        <p>
37
          쌍떡잎식물 미나리아재비목 연꽃과 연꽃속의 여러해살이 식물.
38
          부용(芙蓉)이라고도 부른다.
39
        </p>
40
      </div>
41
      <p>
42
        꽃말은 소외된 사랑.<br />
43
        연꽃(Nelumbo)과 수련(Nymphaea)은 학술적 기준으로 목 단위가 완전히
44
        다릅니다. 흔히 생각하는 연꽃은 프로테아목 연꽃과이고 수련은 수련목
45
        수련과입니다. 인도가 원산지인 연꽃은 연못 위에 둥둥 떠 있는
46
        수생식물이라는 이미지만 떠올리기 쉽지만, 실은 논이나 늪지의 진흙
47
        속에서도 자라고 관상용뿐만 아니라 식용, 약용으로 쓰이기도 해서 연의
48
        줄기인 연근은 반찬으로 자주 이용됩니다. 이런 까닭으로 가끔 여름철 농촌에
49
        가면 벼 대신에 연꽃을 대량으로 재배하는 곳을 찾을 수 있는데 꽃도
50
        아름답고 향기도 좋아서 축제도 자주 열립니다.<br />
51
        이집트 원산인 수련과의 구별법은, 연꽃은 잎과 꽃이 모두 수면 위로
52
        튀어나와 있지만 수련은 잎과 꽃이 모두 수면에 바짝 붙어 있고, 연꽃 씨앗은
53
        생명력이 대단한데, 오래된 연꽃이 발아한 사례도 있습니다.<br />
54
        전라북도 전주에 큰 연꽃 연못이 있고 중앙에 전망대도 있습니다. 자세히
55
        들여다보면 빨려 들어갈 수 있으니 주의 요망! 서울에는 봉원사나 조계사 등
56
        연꽃 축제가 열리는 시즌이 있습니다.
57
      </p>
58
    </div>
59
  </body>
60
</html>

1-3 문제

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7


8
    }
9
</style>
10
</head>
11
<body>
12
    <h1>나의 아름다운 정원</h1>
13
    <p>사람들이 선호하는 꽃들은 어떤 것들일까.. <br>
14
     아마 스스로에게 <strong>자신감을 북돋워 주는</strong> 표정 있는 꽃들일 것이다. </p>
15
  <ul class="gallery">
16
     <li><h3>튜울립</h3>
17
        <p>너무 화려하지 않으며 고귀한 느낌을 가지고 있다. 붉은 색이 단연 으뜸이며 한 송이만 있어도 빼어나다.</p></li>
18
     <li><h3>제비꽃</h3>
19
        <p>드물게 푸른색을 띠고 있으며 작지만 시원해 보이는 어린 꽃이라고 할 수 있다. 여럿이 함께 있을 때 더욱 아름답다.</p></li>
20
     <li><h3>호박꽃</h3>
21
           <p>색도 모양도 화려하며 이름과 걸맞지 않게 아름다운 꽃으로 매우 완숙한 이미지를 풍기는 꽃이다.</p></li>
22
     <li><h3>해바라기</h3>
23
        <p>태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에 속하며 송이가 적어야 제격이다.</p></li>
24
  </ul>
25
</body>
26
</html>

1-4 clear-1

정보

💡 float 은 해제 하지 않으면 다음 요소의 배치가 틀어짐

문제상황1 - 형제요소**

** 😢😢😢😢문제 상황 발생 스샷😢😢😢

float 으로 레이아웃을 배치후 다음 요소에 clear 를 하지 않으면 문제 발생함

😊😊 형제 요소 간 float 해제하기 → 다음 요소에 clear !!

✨ clear 속성 과 값의 사용법

  1. clear:left ⇒ float:left 를 사용 했을때 해제
  2. clear:right ⇒ float:right 를 사용 했을때 해제
  3. clear:both ⇒ 양쪽방향 모두 해제

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7
    body { margin: 20px 30px; max-width: 800px;}
8
    p { padding: 10px; text-align: justify; font-size: 13px; }
9
    .skate { float: left; width: 38%; background: #ddd; }
10
    .football { float: right; width: 55%; background: #ddd; }
11
</style>
12
</head>
13
<body>
14
    <div class="skate">
15
        <p>우리의 자랑 스포츠의 꽃 김은호 선수의 요즘 행보에 대해 일부의 사람들이 불만을 토로하고 있다. 그녀의 주류광고가 문제 된 것인데 그렇다면 김은호는 미성년자도 아닌데 왜 주류광고에 나오면 안 되고 다른 스타들은 되는... 이런 우스운 경우가 있을 수 있을까? 다른 스타들도 김은호처럼 소중한 우리의 스타고 김은호도 다른 사람들처럼 인형이 아닌 성인의 한 사람인데 말이다.</p>
16
    </div>
17
    <div class="football">
18
        <p>스포츠스타 박지수는 스타라는 말이 좀 퇴폐적으로 여겨지던 시절 그 말을 완전히 깨끗이 세척해서 원래 뜻 그대로 만들어 놓은 사람이다. 사람이 어쩌면 저렇게 참될 수 있을까 라고 생각하게 한 장본인. 그의 과거와 현재의 행동거지를 보며 노력과 지성의 결정체라고 감탄해 마지않던 행복한 기억을 되살린다. 어떤 약보다도 강하고 부작용 없는 정신강장제가 되어준 진정한 스타인 그를 존경하지 않을 사람이 있을까, 과연!!!</p>
19
    </div>
20
    <div class="olympic">
21
        <p>이번 올림픽은 기록에 남을 '판정번복 올림픽'이 될 것  같다. 김지훈 선수의 어이없는 실격을 바로잡기 위한 이의 제기가 이렇게 많은 말도 안 되는 판정번복의 길을 열어주다니 이래서 올림픽의 판정번복은 거의 없었나 보다. 이 일을 기뻐해야 할까 슬퍼해야 할까.. 아무도 억울하지 않은 진정한 판정이 올림픽에서만이라도 보여지기를... </p>
22
    </div>
23
</body>
24
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>float</title>
6
    <style type="text/css">
7
      body {
8
        margin: 20px 30px;
9
        max-width: 800px;
10
      }
11
      p {
12
        padding: 10px;
13
        text-align: justify;
14
        font-size: 13px;
15
      }
16
      .skate {
17
        float: right;
18
        width: 38%;
19
        background: #ddd;
20
      }
21
      .football {
22
        float: right;
23
        width: 55%;
24
        background: #ddd;
25
      }
26
**      .olympic{
27
        clear:both;
28
        background: #cff;
29
      }**
30
    </style>
31
  </head>
32
  <body>
33
    <div class="skate">
34
      <p>
35
        우리의 자랑 스포츠의 꽃 김은호 선수의 요즘 행보에 대해 일부의 사람들이
36
        불만을 토로하고 있다. 그녀의 주류광고가 문제 된 것인데 그렇다면 김은호는
37
        미성년자도 아닌데 왜 주류광고에 나오면 안 되고 다른 스타들은 되는...
38
        이런 우스운 경우가 있을 수 있을까? 다른 스타들도 김은호처럼 소중한
39
        우리의 스타고 김은호도 다른 사람들처럼 인형이 아닌 성인의 한 사람인데
40
        말이다.
41
      </p>
42
    </div>
43
    <div class="football">
44
      <p>
45
        스포츠스타 박지수는 스타라는 말이 좀 퇴폐적으로 여겨지던 시절 그 말을
46
        완전히 깨끗이 세척해서 원래 뜻 그대로 만들어 놓은 사람이다. 사람이
47
        어쩌면 저렇게 참될 수 있을까 라고 생각하게 한 장본인. 그의 과거와 현재의
48
        행동거지를 보며 노력과 지성의 결정체라고 감탄해 마지않던 행복한 기억을
49
        되살린다. 어떤 약보다도 강하고 부작용 없는 정신강장제가 되어준 진정한
50
        스타인 그를 존경하지 않을 사람이 있을까, 과연!!!
51
      </p>
52
    </div>
53
    <div class="olympic">
54
      <p>
55
        이번 올림픽은 기록에 남을 '판정번복 올림픽'이 될 것 같다. 김지훈 선수의
56
        어이없는 실격을 바로잡기 위한 이의 제기가 이렇게 많은 말도 안 되는
57
        판정번복의 길을 열어주다니 이래서 올림픽의 판정번복은 거의 없었나 보다.
58
        이 일을 기뻐해야 할까 슬퍼해야 할까.. 아무도 억울하지 않은 진정한 판정이
59
        올림픽에서만이라도 보여지기를...
60
      </p>
61
    </div>
62
  </body>
63
</html>

1-5 clear-2

정보

💡

문제상황2 - 자식요소**

** 😢😢😢😢문제 상황 발생 스샷😢😢😢

😊😊 부모 자식 간 float 해제하기

✨ ** 5가지 방법 !! **

  1. 부모 요소에 width, height 지정

  2. 부모의 크기가 가변적으로 변형안됨

  3. float 된 자식 요소의 마지막에 빈 요소를 추가하고 clear:both 를 줌

  4. *코드가 길어져서 불편함

    1. 부모요소에 :after 를 추가하고 clear 적용
    2. 부모마다 선언해야 해서 불편
1
.부모요소::after{
2
        content:'';
3
        clear: both;
4
        display: block;
5
      }
  1. 🥇 clear 속성을 가진 전용 클래스를 선언하고 해당 요소에 적용
1
p{float:left}
2
.cf::after{
3
        content: '';
4
        clear: both;
5
        display: block;
6
      }
1
<div class="mydrink cf">
2
  <p class="greentea"></p>
3
  <p class="coffee"></p>
4
<div>
  1. 🥇 부모에 overflow 적용
  2. 세로 스크롤이 있는 박스에는 사용할 수 없음
1
.mydrink{overflow:auto;}
  1. float 된 요소의 형제를 float 시킴

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7
.mydrink {
8
        max-width: 800px; padding: 30px;
9
        border: 5px solid #bbb; background: #eee;
10
    }
11
  h1 { margin: 0 0 10px; text-align: center; }
12
  p {
13
        box-sizing: border-box; padding: 15px 25px;
14
        text-align: justify; background: rgba(255,255,255,0.8);
15
    }
16
  .greentea { float: left; width: 47%; border: 3px solid green; }
17
  .coffee { float: right; width: 47%; border: 3px solid #a50; }
18
</style>
19
</head>
20
<body>
21
  <div class="mydrink">
22
    <h1>녹차와 커피</h1>
23
    <p class="greentea">
24
  녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한 차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.</p>
25
    <p class="coffee">
26
  커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터 커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서 향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지 않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.</p>
27
  </div>
28
</body>
29
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="utf-8" />
5
    <title>float</title>
6
    <style type="text/css">
7
      .mydrink {
8
        /* max-width: 800px; */
9
        /* height: 500px; */
10
        padding: 30px;
11
        border: 5px solid #bbb;
12
        background: #eee;
13
      }
14
      h1 {
15
        margin: 0 0 10px;
16
        text-align: center;
17
      }
18
      p {
19
        box-sizing: border-box;
20
        padding: 15px 25px;
21
        text-align: justify;
22
        background: rgba(255, 255, 255, 0.8);
23
      }
24
      .greentea {
25
        float: left;
26
        width: 47%;
27
        border: 3px solid green;
28
      }
29
      .coffee {
30
        float: right;
31
        width: 47%;
32
        border: 3px solid #a50;
33
      }
34
      /* .mydrink div{
35
        clear: both;
36
      } */
37
      /* .mydrink::after{
38
        content:'';
39
        clear: both;
40
        display: block;
41
      } */
42
      .cf::after{
43
        content: '';
44
        clear: both;
45
        display: block;
46
      }
47
      .mydrink{
48
        overflow: auto;
49
        overflow: hidden;
50
      }
51
    </style>
52
  </head>
53
  <body>
54
    <div class="mydrink cf">
55
      <h1>녹차와 커피</h1>
56
      <p class="greentea">
57
        녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄
58
        모르는 사람들은 티백들을 모두 뜯어 주전자에 넣고 끊이기도 하는데 강한
59
        차의 향기도 견디기 힘들겠지만 보관도 힘들고 그때그때 방금 끓인 듯한 맛을
60
        느끼지 못하게 되며 진한 카페인 덕에 밤에 잠들기도 힘들 것이다.
61
      </p>
62
      <p class="coffee">
63
        커피는 독한 향을 좋아하는 사람도 매우 좋아하며 심한 경우 태어나기 전부터
64
        커피를 마신 듯 강한 중독 증세를 보이는 경우가 많다. 심지어 원두를 씹어서
65
        향에 자신을 담그는 사람도 있고 설탕, 시럽 등 다른 조미를 절대로 허락하지
66
        않는 오직 커피맛만을 고집하는 마니아들이 늘고 있다.
67
      </p>
68


69
    </div>
70


71
  </body>
72
</html>
 

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7


8
</style>
9
</head>
10
<body>
11
    <div class="contents">
12
      <ul class="lnb">
13
        <li><a href="#">warming up</a></li>
14
        <li><a href="#">Reflection 안무</a></li>
15
        <li><a href="#">Take me as I am 안무</a></li>
16
        </ul>
17
      <p class="playing">
18
        - 피에로 처럼 머리 왼쪽으로 반동 그다음 바로 선다.
19
      - 태옆 풀린 인형처럼 무릎과 두 팔 앞으로 구부린다.
20
      - 펴면서 왼쪽으로 몸과 고개 까딱.
21
      - 오른팔만 ㄴ자로 들었다가 반대로 떨어뜨린 다음 내림.
22
      - 머리 바로, 오른 무릎 바로, 다음 허리 바로.
23
      - 앞으로 나가며 오른팔이 왼팔 감쌌다가 오른팔부터 들어 담 넘기
24
      - 뛰어 내리기
25
      - 왼쪽 다리로 낮은 담 넘기
26
      - 나무 아래로 나가기
27
      - 두 손으로 위에서 아래로 숲 헤치고 나가기.
28
      - 두 손으로 왼쪽에서 오른쪽으로 숲 헤치기.
29
      - 밧줄 잡고 노 젓기
30
    </p>
31
  </div>
32
</body>
33
</html>
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>float</title>
6
<style type="text/css">
7
    li{ list-style-type: none; }
8
    .contents { max-width: 800px; background: #ddd; overflow: auto; }
9
    .lnb {
10
        float: left; width: 25%; padding: 10px;
11
        box-sizing: border-box;
12
    }
13
    .lnb li a { color: darkblue; }
14
    .playing {
15
        float: right; width: 75%;
16
        padding: 10px; border-left: 1px solid #ccc;
17
        box-sizing: border-box; }
18
</style>
19
</head>
20
<body>
21
    <div class="contents">
22
      <ul class="lnb">
23
        <li><a href="#">warming up</a></li>
24
        <li><a href="#">Reflection 안무</a></li>
25
        <li><a href="#">Take me as I am 안무</a></li>
26
        </ul>
27
      <p class="playing">
28
        - 피에로 처럼 머리 왼쪽으로 반동 그다음 바로 선다.
29
      - 태옆 풀린 인형처럼 무릎과 두 팔 앞으로 구부린다.
30
      - 펴면서 왼쪽으로 몸과 고개 까딱.
31
      - 오른팔만 ㄴ자로 들었다가 반대로 떨어뜨린 다음 내림.
32
      - 머리 바로, 오른 무릎 바로, 다음 허리 바로.
33
      - 앞으로 나가며 오른팔이 왼팔 감쌌다가 오른팔부터 들어 담 넘기
34
      - 뛰어 내리기
35
      - 왼쪽 다리로 낮은 담 넘기
36
      - 나무 아래로 나가기
37
      - 두 손으로 위에서 아래로 숲 헤치고 나가기.
38
      - 두 손으로 왼쪽에서 오른쪽으로 숲 헤치기.
39
      - 밧줄 잡고 노 젓기
40
    </p>
41
  </div>
42
</body>
43
</html>

01. 레이아웃01

정보

💡 #wrap width:500px;

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>layout</title>
8
    <style>
9
      * {
10
        margin: 0;
11
        padding: 0;
12
      }
13
      #wrap {
14
        width: 500px;
15
        background: gray;
16
      }
17
      #header {
18
        background: red;
19
      }
20
      #container {
21
        background-color: rgb(159, 168, 248);
22
      }
23
      #container nav {
24
        float: left;
25
        width:100px;
26
        background: #fff000;
27
      }
28
      #container nav li{
29
        float:left;
30
        list-style: none;
31
        background-color: blue;
32
      }
33
      #container section {
34
        float: left;
35
        width: 300px;
36
      }
37
      #container aside {
38
        float: left;
39
        width:100px;
40
        background: #00ff95;
41
      }
42
      #footer {
43
        background-color: aqua;
44
      }
45
      .clear::after {
46
        content: "";
47
        display: block;
48
        clear: both;
49
      }
50
    </style>
51
  </head>
52
  <body>
53
    <div id="wrap">
54
      <header id="header">header</header>
55
      <div id="container" class="clear">
56
        <nav></nav>
57
        <section>section</section>
58
        <aside>aside</aside>
59
      </div>
60
      <footer id="footer">footer</footer>
61
    </div>
62
  </body>
63
</html>
 

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>layout</title>
8
    <style>
9
      * {
10
        margin: 0;
11
        padding: 0;
12
      }
13
      #wrap {
14
        width: 500px;
15
        background: gray;
16
      }
17
      ul {
18
        list-style: none;
19
      }
20


21
      #header {
22
        background: red;
23
      }
24
      #header h1 {
25
        float: left;
26
      }
27
      #header ul {
28
        float: right;
29
      }
30
      #header ul li {
31
        float: left;
32
      }
33
      #header ul li a {
34
        padding: 10px;
35
        background: yellow;
36
        display: block;
37
      }
38
      #container {
39
        background-color: rgb(159, 168, 248);
40
      }
41
      #container nav {
42
        float: left;
43
        width: 100px;
44
        background: #fff000;
45
      }
46
      #container nav li {
47
        float: left;
48
        list-style: none;
49
        background-color: #970c80;
50
        margin:0 3px;
51
      }
52
      #container section {
53
        float: left;
54
        width: 300px;
55
      }
56
      #container aside {
57
        float: left;
58
        width: 100px;
59
        background: #00ff95;
60
      }
61
      #footer {
62
        background-color: aqua;
63
      }
64
      .clear::after {
65
        content: "";
66
        display: block;
67
        clear: both;
68
      }
69
    </style>
70
  </head>
71
  <body>
72
    <div id="wrap">
73
      <header id="header" class="clear">
74
        <h1>Logo</h1>
75
        <ul>
76
          <li><a href="">test</a></li>
77
          <li><a href="">test</a></li>
78
          <li><a href="">test</a></li>
79
          <li><a href="">test</a></li>
80
        </ul>
81
      </header>
82
      <div id="container" class="clear">
83
        <nav>
84
          <ul>
85
            <li><a href="">m1</a></li>
86
            <li><a href="">m1</a></li>
87
            <li><a href="">m1</a></li>
88
          </ul>
89
        </nav>
90
        <section>section</section>
91
        <aside>aside</aside>
92
      </div>
93
      <footer id="footer">footer</footer>
94
    </div>
95
  </body>
96
</html>

02. 레이아웃02

정보

💡 ****

  • 전체 박스의 크기
  • #wrap h 550 w 700
  • header h 100 w 700
  • footer h 50 w 700
  • main h 400 w 700 작은박스 한개의 크기는 100x100

정보

💡

1. html 코딩순서

  1. #wrap>(header+main+footer)
  2. main>#left.fl+#center.fl+#right.fl
  3. #left.fl>.box1_1.bg1*4
  • .bg1의 값을 bg2로 수정한다.
  1. #right>.box1_1.bg1*2+.box2_1.bg3
  2. #center>.box2_5.bg3*2
  • .bg3 중 한개를 bg4로 수정

2. css 코딩순서

  1. 상위 요소 순으로 크기 지정
  • #wrap
  • header
  • main
  • footer
  1. 두번째 뎁스 요소의 크기지정
  • #left.fl
  • #center.fl
  • #right.fl
  1. 세번째 뎁스 요소 크기지정
  • .box1_1
  • .box2_1
  • .box2_5
  1. 배경색 지정
  • .bg1
  • .bg2
  • .bg3
  • .bg4

테두리를 추가하시오.

너비 600px

1
10 Useful Things You Can Learn In Les Than 10 Minutes
2
How To Win A Fight — In a fight, non experienced…

02. position

정보

👁️‍🗨️ 요소를 좌표로 배치하는 position

  1. 사용가능 속성값
  2. static : 기본
  3. relative : 상대좌표 → 자기 자신의 좌측상단
  4. absolute : 절대좌표 → 브라우저 좌측상단
  5. **sticky : **스크롤시 고정
  6. fixed : 고정
  7. top, left, right, bottom 으로 위치값지정
  8. z-index 로 깊이지정
  9. z-index 는 값이 클수록 먼저보임

정보

💡 부모에 static 이 아닌 다른 position 속성값을 넣으면 absolute인 자식은 부모요소 기준으로 배치됨

2-1-시작코드

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="UTF-8" />
6
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8
  <title>poistion</title>
9
  <style>
10
    * {
11
      margin: 0;
12
      padding: 0;
13
      box-sizing: border-box;
14
    }
15


16
    .container {
17
      height: 300px;
18
      width: 500px;
19
      border: 3px solid #000;
20
    }
21


22
    .box {
23
      width: 100px;
24
      height: 100px;
25
    }
26


27
    .box:nth-child(1) {
28
      background-color: red;
29
    }
30


31
    .box:nth-child(2) {
32
      background-color: green;
33
    }
34


35
    .box:nth-child(3) {
36
      background-color: blue;
37
    }
38
  </style>
39
</head>
40


41
<body>
42
  <h2>Lorem ipsum dolor amet</h2>
43
  <div class="container">
44
    <div class="box"></div>
45
    <div class="box"></div>
46
    <div class="box"></div>
47
  </div>
48
  <h2>Lorem ipsum dolor amet</h2>
49
</body>
50


51
</html>

2-2-absolute

2-3-relative

2-2의 문제 해결

2-4-overflow로 해결하기

2-5-sticky

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
  <title>Positions</title>
9
  <style>
10
    .container {
11
      background-color: orangered;
12
      width: 700px;
13
      height: 600px;
14
    }
15


16
    .box {
17
      width: 350px;
18
      height: 100px;
19
      font-size: 25px;
20
      color: #fff;
21
    }
22


23
    .box-1 {
24
      background-color: green;
25
    }
26


27
    .box-2 {
28
      background-color: royalblue;
29
    }
30


31
    .box-3 {
32
      background-color: grey;
33
    }
34


35
    /* sticky: 스크롤이 되면 부모의 높이가 화면에 보일때 까지 자기자리에서 고정됨*/
36
  </style>
37
</head>
38


39
<body>
40
  <div class="container">
41
    <div class="box box-1">Box 1</div>
42
    <div class="box box-2">Box 2</div>
43
    <div class="box box-3">Box 3</div>
44
  </div>
45
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque cumque sapiente libero corporis ab molestias quod laboriosam nemo quasi placeat, atque illo quo soluta blanditiis sed quos. Neque placeat quis corrupti blanditiis, ut, ratione earum nesciunt voluptates, totam nulla est iusto nobis non quod! Sapiente, ex labore assumenda veniam ipsa placeat ab, sint, ad quod architecto libero accusantium cum minima repellat voluptatem maiores inventore praesentium. Laboriosam libero veritatis temporibus unde illo quidem sint vel, amet, omnis porro, doloribus sapiente cupiditate est. Numquam eveniet beatae dolorem consequatur, tempora eum ullam aliquam culpa iste minus sit reiciendis, qui incidunt, voluptate totam praesentium odio. Distinctio sapiente quasi soluta eveniet autem in! Expedita explicabo vero esse! A, quam cumque excepturi nobis repellendus ducimus natus maiores sint! Expedita, sequi unde labore dolore consectetur quod ut magnam veniam corrupti eum reprehenderit quibusdam sunt culpa quisquam neque suscipit beatae. Quaerat doloribus aliquam eum perspiciatis facilis, ad labore et laudantium non tenetur dolores repellat dolorem cum fugiat fugit numquam est eveniet ut. Omnis reprehenderit cum ratione quis inventore tempora, veniam excepturi deserunt autem neque, eum assumenda vel totam corporis natus ducimus. Expedita odio facere perferendis porro laborum necessitatibus velit. Placeat repellendus dolore veniam maiores rem quos suscipit aliquid nam impedit asperiores doloremque exercitationem aspernatur alias porro iste quas magnam molestiae delectus cupiditate cum deleniti, in architecto! Ducimus quis blanditiis autem at tempore eaque! Quos similique nam totam atque, necessitatibus, quo beatae vero, eos veritatis molestiae praesentium amet! Quis consectetur assumenda temporibus nulla eveniet exercitationem quos iste impedit ea, nihil possimus distinctio qui eos sapiente, similique itaque? Reiciendis illo sed praesentium sapiente optio, et distinctio aliquam explicabo eos facilis eaque tempora amet provident suscipit enim autem dolorum molestias maiores iste, accusantium inventore ea doloremque sequi repudiandae. Obcaecati quidem beatae nihil veniam quod praesentium impedit pariatur, cumque explicabo ab deserunt a repudiandae. Fugit consequuntur optio repellendus fugiat atque? Odio cumque obcaecati ex voluptas a voluptates delectus distinctio consequuntur, minima eligendi commodi, architecto unde dolores atque at ab praesentium eum exercitationem minus debitis nisi natus. Nesciunt saepe doloribus earum quos quam modi tempora a molestias voluptas dolorem, illum, eligendi voluptates quibusdam, laboriosam provident quis suscipit dolores ab incidunt odio eos eaque! Nobis, cumque vero? Consequatur perferendis quia debitis soluta saepe deserunt voluptatem reiciendis ducimus nemo amet nobis laudantium animi ab quae cumque laboriosam delectus tempore tenetur suscipit itaque modi, doloremque, ipsum voluptate! Quasi quibusdam veritatis natus asperiores praesentium delectus explicabo quia culpa, iusto, nisi, dolorem non laudantium exercitationem accusamus sequi odit velit dolor repudiandae aperiam. Accusantium sit modi sint repellendus exercitationem placeat inventore minima reprehenderit quos, obcaecati dolores maxime eum ducimus consectetur ut cupiditate non accusamus optio culpa voluptatibus in omnis a. Facere excepturi accusamus itaque quis aliquid reiciendis quo. Esse nemo maiores, sequi, quidem deleniti in nostrum possimus ipsa quaerat facere corrupti exercitationem ducimus inventore dolor odio porro hic doloribus architecto accusamus minus soluta molestias neque! Officiis excepturi veniam alias nihil ad optio quas deserunt. Soluta culpa saepe, earum error dolorum autem recusandae necessitatibus optio dignissimos blanditiis excepturi laborum non. Alias officiis eius expedita perferendis aut mollitia temporibus aperiam necessitatibus facere accusamus cum quo, quas veritatis. Velit quasi ipsam accusamus, quisquam animi, mollitia minima veniam maxime ut soluta fuga alias illo ducimus officia facilis dolore! Voluptate a itaque optio beatae culpa ipsam sint laborum obcaecati voluptatum eaque, repellat dolorem perferendis. Quisquam, illo sit. Beatae esse totam excepturi iure reiciendis odio cupiditate incidunt dolor explicabo earum quam, dicta rerum corrupti quas veniam ratione libero autem iste alias nam aliquid? Sapiente perferendis beatae adipisci ab perspiciatis est incidunt molestias, accusantium repudiandae delectus quibusdam nihil odit placeat tenetur architecto eos consectetur ipsam impedit tempora nulla autem. Libero enim possimus officiis corporis aut, incidunt cumque? Unde, rerum sed saepe, cumque nesciunt ea ut voluptas corrupti nihil, inventore odit enim nam fugit commodi aspernatur soluta exercitationem sapiente necessitatibus iusto illo reprehenderit placeat esse expedita eos. Libero molestias inventore dolor, magni tempora iste corrupti quam tenetur reiciendis ad neque incidunt voluptatem voluptatibus. Doloremque consequuntur reiciendis ullam consectetur rerum sit inventore maxime? Enim voluptatibus esse necessitatibus. Laboriosam nulla non libero, beatae eius nam praesentium est excepturi corporis porro nostrum voluptates fugit blanditiis ipsam quis nobis. Dignissimos, voluptas ipsam. Molestias pariatur quibusdam dicta esse consequatur quasi nam fugit, itaque enim a velit accusantium perspiciatis quam? Iure debitis corrupti quae consequatur nam officiis dolores veniam alias facere in blanditiis labore non officia aut, culpa tempora distinctio omnis animi? Asperiores, exercitationem pariatur doloremque itaque vero voluptate quis blanditiis sapiente. Aut mollitia qui nisi iste dicta vero. Totam, accusantium voluptate laudantium id ipsam dolores eius cumque facilis dolore, ex vel! Eos nostrum numquam quos officia magni error! Provident laboriosam ratione consequatur ad fugit perferendis nulla similique, dolore eligendi asperiores dolores praesentium saepe eum sed unde quisquam. Sint veniam nemo at officiis doloremque facilis animi voluptates exercitationem aperiam, placeat itaque laborum, esse reiciendis ipsum repellat nisi officia est blanditiis? Soluta harum tempore laudantium nobis et ipsam quasi sapiente corporis debitis nostrum adipisci quibusdam numquam, temporibus laboriosam nisi ratione ipsum aut quis molestias dolorum tempora? Nobis rerum nam porro saepe alias, esse odio blanditiis aut explicabo sed ducimus ratione temporibus aspernatur perspiciatis ad. Temporibus id, architecto suscipit quam ducimus non officiis. Placeat molestias, laudantium possimus sunt quae delectus unde, earum odit, culpa nulla neque natus! Iure accusamus ipsa eum necessitatibus, nesciunt animi veritatis quia repellendus incidunt! Rerum optio expedita nisi, veritatis tenetur aliquid enim distinctio at aliquam laborum laboriosam, similique vero, beatae commodi dolores mollitia. Ab voluptatibus corporis, praesentium atque facilis quae impedit magni facere distinctio deleniti veritatis dicta recusandae, eum enim ipsum odit illum repudiandae sint. Voluptatum enim voluptates aperiam, iste aliquid earum sit aspernatur fugiat eveniet doloribus quas nobis quos sed maxime adipisci omnis blanditiis ducimus molestias neque hic corporis, ipsam eum veniam. Laboriosam necessitatibus, repellat eius, maiores tempora magnam ex eligendi non animi dicta atque, deleniti ipsum explicabo. Reprehenderit fugiat provident incidunt corporis ducimus blanditiis unde nihil quidem accusamus sit vel dolorum earum deserunt, quod ullam consequuntur optio, error nobis delectus! Odio expedita possimus, eveniet omnis ullam doloremque quas exercitationem vel officia enim ipsa, reprehenderit nihil maiores dicta quaerat eligendi sequi veritatis nulla, pariatur animi velit! Perferendis, dolorum cum. Nobis consequuntur sed obcaecati neque nostrum accusamus deleniti, dignissimos libero qui! Quisquam reprehenderit harum sunt perferendis quos enim minus laborum, id debitis fuga dolore, nisi, ex veritatis? Fugiat dignissimos id, corporis at labore aut vero blanditiis quibusdam tenetur veniam, nisi dolores libero ea. Quam perferendis distinctio saepe quasi facilis quas expedita officia similique ducimus necessitatibus, quidem dolores aspernatur, laborum sequi natus pariatur consequatur assumenda. Unde cum aut eius cumque suscipit aliquid numquam aliquam quisquam. Libero non repudiandae distinctio beatae illum. Corporis et fuga vero deleniti at corrupti deserunt, aspernatur officia. Dignissimos veniam consequatur, perspiciatis quidem corrupti, ab id quia obcaecati maxime incidunt accusantium iusto asperiores similique omnis voluptatem et. Possimus blanditiis incidunt, repellat cupiditate dolor totam nemo iste iusto ex nihil fugiat laborum mollitia veritatis illo esse ratione officia saepe. In quo laudantium dolores nam dignissimos dolore voluptate! Non, molestiae alias sit aut excepturi ipsam minus laudantium temporibus dolore id voluptate repellendus vero, quasi dolor consequuntur eius voluptatum explicabo nesciunt ab tempore minima incidunt? A quam ratione consectetur! Iure necessitatibus modi facilis tempore, consequuntur adipisci et. Vitae natus exercitationem ipsa, expedita vel ea nemo nam sed, dignissimos eum debitis accusamus? Quasi, tenetur nesciunt eius eveniet libero ut earum modi, soluta architecto facere neque mollitia quisquam eos similique doloribus ratione quis provident corrupti ab quod, non sunt. Itaque aperiam ullam quam, aspernatur necessitatibus quidem possimus! Perspiciatis sint adipisci eius blanditiis, dolor minus eveniet pariatur doloribus. Deleniti esse quod suscipit repellendus facilis, commodi quo, dolorem pariatur tempora tenetur, culpa earum dolorum. Explicabo iure delectus eos quo dignissimos officia voluptate sunt accusantium quas rem iusto reprehenderit, quaerat molestias at obcaecati, officiis id voluptatibus ratione nulla. Cupiditate voluptatum itaque eos! Blanditiis, reprehenderit non praesentium atque deleniti beatae provident quam unde aliquam natus ab quibusdam, quos impedit ipsum iure! Eius facilis, expedita magni veniam odit aspernatur reprehenderit ea ad deleniti officia suscipit labore iusto. Accusamus quasi vero tempore voluptatibus facilis magnam delectus reprehenderit est, consectetur expedita! Laboriosam, voluptates! Necessitatibus a quia doloremque autem, quisquam illo nulla inventore dolor velit non sequi voluptatem consequatur quos minima facere quae alias. Repellat debitis fuga aliquam quo ducimus placeat suscipit voluptatibus fugit harum enim delectus quaerat ab dolorum expedita adipisci est ea, illo ad laboriosam optio earum molestiae perspiciatis. Numquam officiis eius quidem quibusdam doloribus vitae placeat quod eos. Deserunt excepturi exercitationem quibusdam, dolor minus quasi facere impedit ipsum sequi necessitatibus expedita odio aut aliquam. Ipsam iusto maiores soluta culpa delectus explicabo. Itaque quod earum asperiores. Facere dolor veritatis dolorem dolores, sint, atque amet quisquam, cum illum eius architecto earum. Consequatur numquam recusandae rerum ab commodi perferendis. Eaque aut maxime minima voluptatem error optio non alias at, eos ab tempora quibusdam asperiores ad facere sequi laboriosam sunt fugiat, odit, earum labore eligendi quasi hic. Unde molestias dolor fuga dolorum labore, consectetur natus eos, consequatur aliquam similique quas hic itaque placeat reiciendis a architecto voluptatem accusamus ducimus! Alias quibusdam ad illo impedit. Maxime assumenda nam consectetur dolor, architecto neque eos quaerat veniam eius recusandae odio id earum optio sunt fugit officiis necessitatibus possimus. Inventore voluptate hic doloribus ex et dolores ipsum dolore delectus cum sunt sed, placeat saepe. Dolore veniam illum nisi perspiciatis blanditiis ullam tempore reiciendis. Aperiam provident facilis, non enim iure soluta atque fuga similique numquam beatae iusto qui. Reprehenderit commodi quibusdam nobis veritatis excepturi eveniet dicta, nemo ullam explicabo mollitia eos dolores pariatur? Quia dolorum sit molestiae laborum ab itaque alias dolores est pariatur dignissimos. Eos nihil eligendi magni laboriosam omnis incidunt labore eaque debitis sint, explicabo maiores rerum atque maxime rem. Ad voluptas eligendi assumenda, perferendis possimus architecto beatae fuga id vitae obcaecati illum molestias sapiente quia aspernatur odit soluta rerum nam cum in mollitia ab accusantium. Nulla earum error quia? Natus quibusdam quidem modi aliquid repellendus, ratione unde soluta ea accusantium nisi sunt, impedit accusamus! Repellat repudiandae rem similique maiores consectetur laborum impedit pariatur facere hic natus alias earum aliquam tenetur laboriosam obcaecati ipsum iusto consequatur itaque, at nulla, reprehenderit atque fuga voluptatem ipsa. Facere aliquam sit consequatur blanditiis suscipit autem nisi repellat, sapiente corrupti modi esse velit iure? Nobis omnis inventore aspernatur sit obcaecati fugit eius fuga exercitationem ipsam animi recusandae unde possimus reiciendis voluptatem accusantium amet eos, aliquam nesciunt voluptas itaque sint, atque, iusto architecto. Temporibus, animi vel obcaecati quam sint quisquam reiciendis mollitia alias, labore fugit vitae minima in dolore? Doloremque distinctio quidem in quae magnam nisi sequi itaque tempora eaque ab. Laboriosam, voluptatibus modi ratione sint, beatae quas nulla, quasi eveniet at tenetur laborum odio? Earum error, minus iusto ex iste debitis facere maiores eum vero voluptatum laboriosam incidunt amet libero modi tempora reprehenderit, a aliquam mollitia voluptatibus sequi tempore natus maxime similique. Eius accusamus officia voluptatum voluptatibus eos obcaecati quod quae et quia numquam, ab saepe minus. Et porro quam soluta voluptatum. Dolorum fugit vero atque minima sit voluptates. Error repellendus exercitationem beatae qui dolorem minus, repudiandae praesentium voluptates officia explicabo quos ratione deserunt animi at nisi reprehenderit consequatur alias illo distinctio libero. Tempora dolorum corrupti cupiditate ut quisquam consequuntur excepturi consequatur quod sequi quaerat, at velit explicabo deleniti, eveniet assumenda et libero officiis quasi facere quia laudantium odio. Aliquam optio unde adipisci quo aut totam. Delectus commodi soluta voluptate enim magnam, placeat molestias, nobis fugiat tempora rem facere culpa repudiandae eum dicta laboriosam. Temporibus, tempora dolores? Laborum ipsum magnam, sed repudiandae assumenda inventore a, quidem nisi consectetur dignissimos voluptas? Nemo sit rem hic ipsam aliquam suscipit incidunt impedit, quidem quisquam aut! Vel maiores ducimus fugit facere a, doloremque tempore? Minus, corporis vitae. Tempore recusandae error reiciendis veritatis ducimus nulla esse laudantium aliquid earum, unde eligendi, in accusantium aut ullam quis, doloribus excepturi. Accusantium, odit deleniti mollitia expedita eaque facilis, minima inventore recusandae ullam est illo velit adipisci maxime exercitationem consequuntur necessitatibus ex ad error! Iste unde reiciendis tenetur accusamus nemo aperiam, possimus aspernatur porro qui! Consequatur, ea! Cum, fugit. Iure repellendus dolores incidunt in excepturi tempore, possimus reprehenderit nisi fugiat. </p>
46
</body>
47


48
</html>

2-6-fixed

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
8
  <title>Positions</title>
9
  <style>
10
    .container {
11
      background-color: orangered;
12
      width: 700px;
13
      height: 600px;
14
    }
15


16
    .box {
17
      width: 350px;
18
      height: 100px;
19
      font-size: 25px;
20
      color: #fff;
21
    }
22


23
    .box-1 {
24
      background-color: green;
25
    }
26


27
    .box-2 {
28
      background-color: royalblue;
29
    }
30


31
    .box-3 {
32
      background-color: grey;
33
    }
34


35
    /* sticky: 스크롤이 되면 부모의 높이가 화면에 보일때 까지 자기자리에서 고정됨*/
36
  </style>
37
</head>
38


39
<body>
40
  <div class="container">
41
    <div class="box box-1">Box 1</div>
42
    <div class="box box-2">Box 2</div>
43
    <div class="box box-3">Box 3</div>
44
  </div>
45
  <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque cumque sapiente libero corporis ab molestias quod laboriosam nemo quasi placeat, atque illo quo soluta blanditiis sed quos. Neque placeat quis corrupti blanditiis, ut, ratione earum nesciunt voluptates, totam nulla est iusto nobis non quod! Sapiente, ex labore assumenda veniam ipsa placeat ab, sint, ad quod architecto libero accusantium cum minima repellat voluptatem maiores inventore praesentium. Laboriosam libero veritatis temporibus unde illo quidem sint vel, amet, omnis porro, doloribus sapiente cupiditate est. Numquam eveniet beatae dolorem consequatur, tempora eum ullam aliquam culpa iste minus sit reiciendis, qui incidunt, voluptate totam praesentium odio. Distinctio sapiente quasi soluta eveniet autem in! Expedita explicabo vero esse! A, quam cumque excepturi nobis repellendus ducimus natus maiores sint! Expedita, sequi unde labore dolore consectetur quod ut magnam veniam corrupti eum reprehenderit quibusdam sunt culpa quisquam neque suscipit beatae. Quaerat doloribus aliquam eum perspiciatis facilis, ad labore et laudantium non tenetur dolores repellat dolorem cum fugiat fugit numquam est eveniet ut. Omnis reprehenderit cum ratione quis inventore tempora, veniam excepturi deserunt autem neque, eum assumenda vel totam corporis natus ducimus. Expedita odio facere perferendis porro laborum necessitatibus velit. Placeat repellendus dolore veniam maiores rem quos suscipit aliquid nam impedit asperiores doloremque exercitationem aspernatur alias porro iste quas magnam molestiae delectus cupiditate cum deleniti, in architecto! Ducimus quis blanditiis autem at tempore eaque! Quos similique nam totam atque, necessitatibus, quo beatae vero, eos veritatis molestiae praesentium amet! Quis consectetur assumenda temporibus nulla eveniet exercitationem quos iste impedit ea, nihil possimus distinctio qui eos sapiente, similique itaque? Reiciendis illo sed praesentium sapiente optio, et distinctio aliquam explicabo eos facilis eaque tempora amet provident suscipit enim autem dolorum molestias maiores iste, accusantium inventore ea doloremque sequi repudiandae. Obcaecati quidem beatae nihil veniam quod praesentium impedit pariatur, cumque explicabo ab deserunt a repudiandae. Fugit consequuntur optio repellendus fugiat atque? Odio cumque obcaecati ex voluptas a voluptates delectus distinctio consequuntur, minima eligendi commodi, architecto unde dolores atque at ab praesentium eum exercitationem minus debitis nisi natus. Nesciunt saepe doloribus earum quos quam modi tempora a molestias voluptas dolorem, illum, eligendi voluptates quibusdam, laboriosam provident quis suscipit dolores ab incidunt odio eos eaque! Nobis, cumque vero? Consequatur perferendis quia debitis soluta saepe deserunt voluptatem reiciendis ducimus nemo amet nobis laudantium animi ab quae cumque laboriosam delectus tempore tenetur suscipit itaque modi, doloremque, ipsum voluptate! Quasi quibusdam veritatis natus asperiores praesentium delectus explicabo quia culpa, iusto, nisi, dolorem non laudantium exercitationem accusamus sequi odit velit dolor repudiandae aperiam. Accusantium sit modi sint repellendus exercitationem placeat inventore minima reprehenderit quos, obcaecati dolores maxime eum ducimus consectetur ut cupiditate non accusamus optio culpa voluptatibus in omnis a. Facere excepturi accusamus itaque quis aliquid reiciendis quo. Esse nemo maiores, sequi, quidem deleniti in nostrum possimus ipsa quaerat facere corrupti exercitationem ducimus inventore dolor odio porro hic doloribus architecto accusamus minus soluta molestias neque! Officiis excepturi veniam alias nihil ad optio quas deserunt. Soluta culpa saepe, earum error dolorum autem recusandae necessitatibus optio dignissimos blanditiis excepturi laborum non. Alias officiis eius expedita perferendis aut mollitia temporibus aperiam necessitatibus facere accusamus cum quo, quas veritatis. Velit quasi ipsam accusamus, quisquam animi, mollitia minima veniam maxime ut soluta fuga alias illo ducimus officia facilis dolore! Voluptate a itaque optio beatae culpa ipsam sint laborum obcaecati voluptatum eaque, repellat dolorem perferendis. Quisquam, illo sit. Beatae esse totam excepturi iure reiciendis odio cupiditate incidunt dolor explicabo earum quam, dicta rerum corrupti quas veniam ratione libero autem iste alias nam aliquid? Sapiente perferendis beatae adipisci ab perspiciatis est incidunt molestias, accusantium repudiandae delectus quibusdam nihil odit placeat tenetur architecto eos consectetur ipsam impedit tempora nulla autem. Libero enim possimus officiis corporis aut, incidunt cumque? Unde, rerum sed saepe, cumque nesciunt ea ut voluptas corrupti nihil, inventore odit enim nam fugit commodi aspernatur soluta exercitationem sapiente necessitatibus iusto illo reprehenderit placeat esse expedita eos. Libero molestias inventore dolor, magni tempora iste corrupti quam tenetur reiciendis ad neque incidunt voluptatem voluptatibus. Doloremque consequuntur reiciendis ullam consectetur rerum sit inventore maxime? Enim voluptatibus esse necessitatibus. Laboriosam nulla non libero, beatae eius nam praesentium est excepturi corporis porro nostrum voluptates fugit blanditiis ipsam quis nobis. Dignissimos, voluptas ipsam. Molestias pariatur quibusdam dicta esse consequatur quasi nam fugit, itaque enim a velit accusantium perspiciatis quam? Iure debitis corrupti quae consequatur nam officiis dolores veniam alias facere in blanditiis labore non officia aut, culpa tempora distinctio omnis animi? Asperiores, exercitationem pariatur doloremque itaque vero voluptate quis blanditiis sapiente. Aut mollitia qui nisi iste dicta vero. Totam, accusantium voluptate laudantium id ipsam dolores eius cumque facilis dolore, ex vel! Eos nostrum numquam quos officia magni error! Provident laboriosam ratione consequatur ad fugit perferendis nulla similique, dolore eligendi asperiores dolores praesentium saepe eum sed unde quisquam. Sint veniam nemo at officiis doloremque facilis animi voluptates exercitationem aperiam, placeat itaque laborum, esse reiciendis ipsum repellat nisi officia est blanditiis? Soluta harum tempore laudantium nobis et ipsam quasi sapiente corporis debitis nostrum adipisci quibusdam numquam, temporibus laboriosam nisi ratione ipsum aut quis molestias dolorum tempora? Nobis rerum nam porro saepe alias, esse odio blanditiis aut explicabo sed ducimus ratione temporibus aspernatur perspiciatis ad. Temporibus id, architecto suscipit quam ducimus non officiis. Placeat molestias, laudantium possimus sunt quae delectus unde, earum odit, culpa nulla neque natus! Iure accusamus ipsa eum necessitatibus, nesciunt animi veritatis quia repellendus incidunt! Rerum optio expedita nisi, veritatis tenetur aliquid enim distinctio at aliquam laborum laboriosam, similique vero, beatae commodi dolores mollitia. Ab voluptatibus corporis, praesentium atque facilis quae impedit magni facere distinctio deleniti veritatis dicta recusandae, eum enim ipsum odit illum repudiandae sint. Voluptatum enim voluptates aperiam, iste aliquid earum sit aspernatur fugiat eveniet doloribus quas nobis quos sed maxime adipisci omnis blanditiis ducimus molestias neque hic corporis, ipsam eum veniam. Laboriosam necessitatibus, repellat eius, maiores tempora magnam ex eligendi non animi dicta atque, deleniti ipsum explicabo. Reprehenderit fugiat provident incidunt corporis ducimus blanditiis unde nihil quidem accusamus sit vel dolorum earum deserunt, quod ullam consequuntur optio, error nobis delectus! Odio expedita possimus, eveniet omnis ullam doloremque quas exercitationem vel officia enim ipsa, reprehenderit nihil maiores dicta quaerat eligendi sequi veritatis nulla, pariatur animi velit! Perferendis, dolorum cum. Nobis consequuntur sed obcaecati neque nostrum accusamus deleniti, dignissimos libero qui! Quisquam reprehenderit harum sunt perferendis quos enim minus laborum, id debitis fuga dolore, nisi, ex veritatis? Fugiat dignissimos id, corporis at labore aut vero blanditiis quibusdam tenetur veniam, nisi dolores libero ea. Quam perferendis distinctio saepe quasi facilis quas expedita officia similique ducimus necessitatibus, quidem dolores aspernatur, laborum sequi natus pariatur consequatur assumenda. Unde cum aut eius cumque suscipit aliquid numquam aliquam quisquam. Libero non repudiandae distinctio beatae illum. Corporis et fuga vero deleniti at corrupti deserunt, aspernatur officia. Dignissimos veniam consequatur, perspiciatis quidem corrupti, ab id quia obcaecati maxime incidunt accusantium iusto asperiores similique omnis voluptatem et. Possimus blanditiis incidunt, repellat cupiditate dolor totam nemo iste iusto ex nihil fugiat laborum mollitia veritatis illo esse ratione officia saepe. In quo laudantium dolores nam dignissimos dolore voluptate! Non, molestiae alias sit aut excepturi ipsam minus laudantium temporibus dolore id voluptate repellendus vero, quasi dolor consequuntur eius voluptatum explicabo nesciunt ab tempore minima incidunt? A quam ratione consectetur! Iure necessitatibus modi facilis tempore, consequuntur adipisci et. Vitae natus exercitationem ipsa, expedita vel ea nemo nam sed, dignissimos eum debitis accusamus? Quasi, tenetur nesciunt eius eveniet libero ut earum modi, soluta architecto facere neque mollitia quisquam eos similique doloribus ratione quis provident corrupti ab quod, non sunt. Itaque aperiam ullam quam, aspernatur necessitatibus quidem possimus! Perspiciatis sint adipisci eius blanditiis, dolor minus eveniet pariatur doloribus. Deleniti esse quod suscipit repellendus facilis, commodi quo, dolorem pariatur tempora tenetur, culpa earum dolorum. Explicabo iure delectus eos quo dignissimos officia voluptate sunt accusantium quas rem iusto reprehenderit, quaerat molestias at obcaecati, officiis id voluptatibus ratione nulla. Cupiditate voluptatum itaque eos! Blanditiis, reprehenderit non praesentium atque deleniti beatae provident quam unde aliquam natus ab quibusdam, quos impedit ipsum iure! Eius facilis, expedita magni veniam odit aspernatur reprehenderit ea ad deleniti officia suscipit labore iusto. Accusamus quasi vero tempore voluptatibus facilis magnam delectus reprehenderit est, consectetur expedita! Laboriosam, voluptates! Necessitatibus a quia doloremque autem, quisquam illo nulla inventore dolor velit non sequi voluptatem consequatur quos minima facere quae alias. Repellat debitis fuga aliquam quo ducimus placeat suscipit voluptatibus fugit harum enim delectus quaerat ab dolorum expedita adipisci est ea, illo ad laboriosam optio earum molestiae perspiciatis. Numquam officiis eius quidem quibusdam doloribus vitae placeat quod eos. Deserunt excepturi exercitationem quibusdam, dolor minus quasi facere impedit ipsum sequi necessitatibus expedita odio aut aliquam. Ipsam iusto maiores soluta culpa delectus explicabo. Itaque quod earum asperiores. Facere dolor veritatis dolorem dolores, sint, atque amet quisquam, cum illum eius architecto earum. Consequatur numquam recusandae rerum ab commodi perferendis. Eaque aut maxime minima voluptatem error optio non alias at, eos ab tempora quibusdam asperiores ad facere sequi laboriosam sunt fugiat, odit, earum labore eligendi quasi hic. Unde molestias dolor fuga dolorum labore, consectetur natus eos, consequatur aliquam similique quas hic itaque placeat reiciendis a architecto voluptatem accusamus ducimus! Alias quibusdam ad illo impedit. Maxime assumenda nam consectetur dolor, architecto neque eos quaerat veniam eius recusandae odio id earum optio sunt fugit officiis necessitatibus possimus. Inventore voluptate hic doloribus ex et dolores ipsum dolore delectus cum sunt sed, placeat saepe. Dolore veniam illum nisi perspiciatis blanditiis ullam tempore reiciendis. Aperiam provident facilis, non enim iure soluta atque fuga similique numquam beatae iusto qui. Reprehenderit commodi quibusdam nobis veritatis excepturi eveniet dicta, nemo ullam explicabo mollitia eos dolores pariatur? Quia dolorum sit molestiae laborum ab itaque alias dolores est pariatur dignissimos. Eos nihil eligendi magni laboriosam omnis incidunt labore eaque debitis sint, explicabo maiores rerum atque maxime rem. Ad voluptas eligendi assumenda, perferendis possimus architecto beatae fuga id vitae obcaecati illum molestias sapiente quia aspernatur odit soluta rerum nam cum in mollitia ab accusantium. Nulla earum error quia? Natus quibusdam quidem modi aliquid repellendus, ratione unde soluta ea accusantium nisi sunt, impedit accusamus! Repellat repudiandae rem similique maiores consectetur laborum impedit pariatur facere hic natus alias earum aliquam tenetur laboriosam obcaecati ipsum iusto consequatur itaque, at nulla, reprehenderit atque fuga voluptatem ipsa. Facere aliquam sit consequatur blanditiis suscipit autem nisi repellat, sapiente corrupti modi esse velit iure? Nobis omnis inventore aspernatur sit obcaecati fugit eius fuga exercitationem ipsam animi recusandae unde possimus reiciendis voluptatem accusantium amet eos, aliquam nesciunt voluptas itaque sint, atque, iusto architecto. Temporibus, animi vel obcaecati quam sint quisquam reiciendis mollitia alias, labore fugit vitae minima in dolore? Doloremque distinctio quidem in quae magnam nisi sequi itaque tempora eaque ab. Laboriosam, voluptatibus modi ratione sint, beatae quas nulla, quasi eveniet at tenetur laborum odio? Earum error, minus iusto ex iste debitis facere maiores eum vero voluptatum laboriosam incidunt amet libero modi tempora reprehenderit, a aliquam mollitia voluptatibus sequi tempore natus maxime similique. Eius accusamus officia voluptatum voluptatibus eos obcaecati quod quae et quia numquam, ab saepe minus. Et porro quam soluta voluptatum. Dolorum fugit vero atque minima sit voluptates. Error repellendus exercitationem beatae qui dolorem minus, repudiandae praesentium voluptates officia explicabo quos ratione deserunt animi at nisi reprehenderit consequatur alias illo distinctio libero. Tempora dolorum corrupti cupiditate ut quisquam consequuntur excepturi consequatur quod sequi quaerat, at velit explicabo deleniti, eveniet assumenda et libero officiis quasi facere quia laudantium odio. Aliquam optio unde adipisci quo aut totam. Delectus commodi soluta voluptate enim magnam, placeat molestias, nobis fugiat tempora rem facere culpa repudiandae eum dicta laboriosam. Temporibus, tempora dolores? Laborum ipsum magnam, sed repudiandae assumenda inventore a, quidem nisi consectetur dignissimos voluptas? Nemo sit rem hic ipsam aliquam suscipit incidunt impedit, quidem quisquam aut! Vel maiores ducimus fugit facere a, doloremque tempore? Minus, corporis vitae. Tempore recusandae error reiciendis veritatis ducimus nulla esse laudantium aliquid earum, unde eligendi, in accusantium aut ullam quis, doloribus excepturi. Accusantium, odit deleniti mollitia expedita eaque facilis, minima inventore recusandae ullam est illo velit adipisci maxime exercitationem consequuntur necessitatibus ex ad error! Iste unde reiciendis tenetur accusamus nemo aperiam, possimus aspernatur porro qui! Consequatur, ea! Cum, fugit. Iure repellendus dolores incidunt in excepturi tempore, possimus reprehenderit nisi fugiat. </p>
46
</body>
47


48
</html>

형성퀴즈

아래의 코드를 활용하여 항상 화면 상단에 고정된 스티키 헤더를 제작하시오.

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>fixed menu</title>
6
<style type="text/css">
7
    body,header,div,footer,h1,p,ul,li {margin:0; padding:0;}
8
    li {list-style-type:none;}
9
    .clear:after {content:""; display:block; clear:both;}
10
    body {font:14px 'Malgun Gothic','맑은고딕';}
11
    a {text-decoration:none; color:#444;}
12
    a:hover {text-decoration:underline;}
13


14
</style>
15
</head>
16
<body>
17
    <div id="wrap">
18
        <header class="clear">
19
            <h1><a href="#">logotype</a></h1>
20
            <ul class="gnb clear">
21
                <li><a href="#">m1</a></li>
22
                <li><a href="#">m2</a></li>
23
                <li><a href="#">m3</a></li>
24
                <li><a href="#">m4</a></li>
25
            </ul>
26
        </header>
27
        <div id="container" class="clear">
28
            <ul class="lnb">
29
                <li><a href="#">s1</a></li>
30
                <li><a href="#">s2</a></li>
31
                <li><a href="#">s3</a></li>
32
                <li><a href="#">s4</a></li>
33
            </ul>
34
            <div class="content_area">
35
                <p>내용<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정<br> 헤더를 상단에 고정</p>
36
            </div>
37
        </div>
38
        <footer>
39
            <p>copyright</p>
40
        </footer>
41
    </div>
42
</body>
43
</html>

2-7. position으로 자식요소 배치하기

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Document</title>
8
  <style>
9
    *{
10
      box-sizing: border-box;
11
      margin:0;
12
      padding:0;
13
    }
14
    #contents{
15
      width:100%;
16
      height:500px;
17
      background:url(img/bg_fixed.png) no-repeat ;
18
      background-size: cover;
19
    }
20
    h1{
21
      color:white;
22
      position:absolute;
23
      bottom:0;
24
      right:0;
25
      font-size: 8em;
26
    }
27
    .inner{
28
      max-width:1280px;
29
      height:500px;
30
      margin:auto;
31
      position:relative;
32
      background: rgba(255,255,0,.4);
33
    }
34
  </style>
35
</head>
36
<body>
37
  <div id="contents">
38
    <div class="inner">
39
      <h1>css3</h1>
40
    </div>
41
  </div>
42
</body>
43
</html>

2-8. position으로 중앙정렬

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>position 으로 중앙정렬</title>
8
  <style>
9
    .container{
10
      /*
11
        1. 요소의 너비를 준다
12
        2. position 을 준다
13
        3. left:50% 이동시킨다
14
        * 4. 너비의 반 을 margin-left 의 - 속성값으로 준다
15
        * 4. transform:translate(-50%,-50%)를  준다
16
        * 4. 속성값에 calc를 사용한다
17
      */
18
      background: red;
19
      width: 500px;
20
      height:500px;
21
      position:relative;
22
      left:50%;
23
      margin-left:-250px ;
24
    }
25
    .box1{
26
      position:absolute;
27
      background: yellow;
28
      top:50%;
29
      left:50%;
30
      width: 50px;
31
      height: 50px;
32
      /* calc
33
      css에서 사칙연산(+,-,*,/)가능
34
      %끼리 연산X
35
      연산자 사이 공백
36
      */
37
      margin-top: calc(-50px / 2);
38
      margin-left: calc(-50px / 2);
39
    }
40
  </style>
41
</head>
42
<body>
43
  <div class="container">
44
    <div class="box1">box1</div>
45
    <div class="box2">box2</div>
46
    <div class="box3">box3</div>
47
    <div class="box4">box4</div>
48
  </div>
49
</body>
50
</html>

03. flex

https://drive.google.com/file/d/1aFreuda3PIX6ySM7ZEN6jjAmNaFOs_D6/view?usp=sharing

item 박스에 선언하는 교차축 배치

컨테이너 박스에 선언하는 교차축 여러줄 배치

shorthand

flex 의 item 박스에는 z-index 가 작동함 https://developer.mozilla.org/ko/docs/Web/CSS/z-index

https://codepen.io/nuhends/pen/eYLOVaO?editors=1100

형성퀴즈

실전 레이아웃

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
7
  <title>템플릿</title>
8


9
  <link rel="shortcut icon" href="./assets/ico/favicon.ico">
10
  <link rel="apple-touch-icon" sizes="57x57" href="./assets/ico/apple-icon-57x57.png">
11
  <link rel="apple-touch-icon" sizes="60x60" href="./assets/ico/apple-icon-60x60.png">
12
  <link rel="apple-touch-icon" sizes="72x72" href="./assets/ico/apple-icon-72x72.png">
13
  <link rel="apple-touch-icon" sizes="76x76" href="./assets/ico/apple-icon-76x76.png">
14
  <link rel="apple-touch-icon" sizes="114x114" href="./assets/ico/apple-icon-114x114.png">
15
  <link rel="apple-touch-icon" sizes="120x120" href="./assets/ico/apple-icon-120x120.png">
16
  <link rel="apple-touch-icon" sizes="144x144" href="./assets/ico/apple-icon-144x144.png">
17
  <link rel="apple-touch-icon" sizes="152x152" href="./assets/ico/apple-icon-152x152.png">
18
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/ico/apple-icon-180x180.png">
19
  <link rel="icon" type="image/png" sizes="192x192" href="./assets/ico/android-icon-192x192.png">
20
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/ico/favicon-32x32.png">
21
  <link rel="icon" type="image/png" sizes="96x96" href="./assets/ico/favicon-96x96.png">
22
  <link rel="icon" type="image/png" sizes="16x16" href="./assets/ico/favicon-16x16.png">
23
  <link rel="manifest" href="./assets/ico/manifest.json">
24
  <meta name="msapplication-TileColor" content="#FFFFFF">
25
  <meta name="msapplication-TileImage" content="./assets/ico/ms-icon-144x144.png">
26
  <meta name="theme-color" content="#FFFFFF">
27


28
  <meta property="og:type" content="article" />
29
  <meta property="og:title" content="김망고" />
30
  <meta property="og:url" content="https://qwerew.cafe24.com/" />
31
  <meta property="og:image" content="https://qwerew.cafe24.com/wordpress100/01/img/logo.png" />
32
  <meta property="og:site_name" content="김망고" />
33
  <meta property="og:description" content="웹과 관련된 정보를 제공합니다." />
34


35
  <style>
36
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
37
    @import url('https://meyerweb.com/eric/tools/css/reset/reset200802.css');
38


39
    html {
40
      font-family: "Noto Sans KR", sans-serif;
41
      font-optical-sizing: auto;
42
      font-weight: 400;
43
      font-style: normal;
44
    }
45
  </style>
46
</head>
47


48
<body>
49
  <div class="wrap">
50
  </div>
51
</body>
52


53
</html>

color.css

1
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
2
@import url('https://meyerweb.com/eric/tools/css/reset/reset200802.css');
3


4


5
:root {
6
  --gradient_1: linear-gradient(to bottom, rgba(76, 109, 208, 0.298) 0%, rgba(4, 190, 254, 0.016) 100%);
7
  --gradient_2: linear-gradient(to bottom, rgba(4, 190, 254, 0.016) 0%, rgba(76, 109, 208, 0.298) 91.08%);
8
  --grayscale_0: rgba(255, 255, 255, 1);
9
  --grayscale_100: rgba(250, 248, 248, 1);
10
  --grayscale_200: rgba(242, 238, 238, 1);
11
  --grayscale_300: rgba(228, 223, 223, 1);
12
  --grayscale_400: rgba(209, 203, 203, 1);
13
  --grayscale_500: rgba(182, 177, 177, 1);
14
  --grayscale_600: rgba(148, 142, 142, 1);
15
  --grayscale_700: rgba(104, 100, 100, 1);
16
  --grayscale_800: rgba(53, 51, 51, 1);
17
  --grayscale_900: rgba(0, 0, 0, 1);
18
  --primary_0: rgba(245, 247, 255, 1);
19
  --primary_100: rgba(198, 211, 252, 1);
20
  --primary_200: rgba(151, 174, 243, 1);
21
  --primary_300: rgba(110, 139, 229, 1);
22
  --primary_400: rgba(76, 109, 208, 1);
23
  --primary_500: rgba(51, 84, 183, 1);
24
  --primary_600: rgba(35, 67, 161, 1);
25
  --primary_700: rgba(25, 55, 145, 1);
26
  --primary_800: rgba(20, 49, 136, 1);
27
  --primary_900: rgba(17, 46, 133, 1);
28
  --secondary_0: rgba(255, 248, 245, 1);
29
  --secondary_100: rgba(253, 245, 241, 1);
30
  --secondary_200: rgba(249, 237, 232, 1);
31
  --secondary_300: rgba(242, 226, 218, 1);
32
  --secondary_400: rgba(233, 209, 198, 1);
33
  --secondary_500: rgba(221, 189, 174, 1);
34
  --secondary_600: rgba(205, 164, 146, 1);
35
  --secondary_700: rgba(184, 138, 116, 1);
36
  --secondary_800: rgba(160, 111, 88, 1);
37
  --secondary_900: rgba(135, 87, 65, 1);
38
  --secondary_900_a20: rgba(135, 87, 65, 0.2);
39
}
40


41
.container {
42
  background: var(--secondary_900_a20);
43
}
44
.gray000 {
45
  background: var(--grayscale_0);
46
}
47
.gray100,
48
#wrap {
49
  background: var(--grayscale_100);
50
}
51
.gray200,
52
header {
53
  background: var(--grayscale_200);
54
}
55
.gray300,
56
footer {
57
  background: var(--grayscale_300);
58
}
59
.gray400,
60
body {
61
  background: var(--grayscale_400);
62
}
63
.gray500,
64
nav {
65
  background: var(--grayscale_500);
66
}
67
.gray600,
68
main {
69
  background: var(--grayscale_600);
70
}
71
.gray700,
72
section {
73
  background: var(--grayscale_700);
74
}
75
.gray800,
76
aside {
77
  background: var(--grayscale_800);
78
}
79
.gray900,
80
article {
81
  background: var(--grayscale_900);
82
}
83
html {
84
  font-family: 'Noto Sans KR', sans-serif;
85
  font-optical-sizing: auto;
86
  font-weight: 400;
87
  font-style: normal;
88
}

04. grid

부모 요소 **Grid Container(그리드 컨테이너) ** 자식 요소들을 **Grid Item(그리드 아이템) **

**그리드 컨테이너 (Grid Container) **display: grid 그리드 아이템 (Grid **Item) **Grid 컨테이너의 자식 요소들입니다. **그리드 트랙 (Grid Track) **Grid의 행(Row) 또는 열(Column) **그리드 셀 (Grid Cell) **Grid의 한 칸 **그리드 라인(Grid Line) **Grid 셀을 구분하는 선 **그리드 번호(Grid Number) **Grid 라인의 각 번호 **그리드 갭(Grid Gap) **Grid 셀 사이의 간격 **그리드 영역(Grid Area) **Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합.

06. calc

정보

💡 calc() 켈크 내부에 입력할 수 있는 표현식은 +, -, *, / 등의 사칙 연산.

  • 사칙 연산시 + 또는 - 는 반드시 기호 양쪽으로 공백을 삽입해야 한다.
  • 표현식에 따르면 5px - 10px = -5px이지만, 너비의 경우 0보다 작은 값을 허용하지 않기 때문에 계산 결과는 0px과 같다.
  • 계산은 같은 분류(길이면 길이, 각도면 각도)에 있는 값끼리 해야 한다
  • 예전 버전의 크롬은 같은 요소, 같은 속성에 -webkit-calc()를 두 번 정의하지 못하는 버그 있음
  • %끼리 연산안됨
1
margin-top: calc(-50px / 2);

07. MediaQuery

https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Responsive_Design

정보

💡 미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술을 말합니다.

@media only screen and (조건문) \{실행문\}

  • @media : 미디어 쿼리가 시작됨을 표시합니다
  • only : 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)
  • all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
    • all : 모든 미디어 유형에서 사용할 css를 정의합니다.
    • print : 인쇄장치에서 사용할 css를 정의 합니다.
    • screen : 컴퓨터 스크린에서 사용할 css를 정의 합니다.
  • (조건문) : 해당 크기을 설정할 수 있습니다.
  • {실행문} : 조건에 따른 실행을 설정합니다.

정보

@media (max-width: 1240px) { … }

정보

💡 미디어쿼리는 두가지 방식으로 적용할수 있습니다.

  1. link 태그의 media 속성 설정
"
1
(max-width: 768px) : 화면의 최대 너비가 768px (768px 이하일 때 적용)"
2
<link href="./media.css" rel="stylesheet" media="screen and (max-width: 768px)">
  1. CSS 파일 내에 직접 @Media 규칙 설정
"screen
1
(max-width: 768px) : 화면의 최대 너비가 768px (768px 이하일 때 적용)"
2
@media screen and (max-width: 768px) {
3
  body {
4
    background-color: lightgreen;
5
  }
6
}

mediaQuery MDN 명세

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <title>해상도 크기에 따라 디자인 다르게 설정하기 </title>
5
  <meta charset="UTF-8" />
6
  <style type="text/css">
7
    body{background: red; color: #fff}
8
/* 화면 너비가 0~1280px pc*/
9


10
/* 화면 너비가 0~1024px pc*/
11


12
/* 화면 너비가 0~960px 노트북*/
13


14
/* 화면 너비가 0~768px 테블릿*/
15


16
/* 화면 너비가 0~576px 모바일*/
17
  </style>
18
</head>
19


20
<body>
21
  <h1>미디어쿼리</h1>
22
  <p>미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술을 말합니다.</p>
23
  <p>@media only screen and (조건문) {실행문}</p>
24
  <ul>
25
    <li>@media : 미디어 쿼리가 시작됨을 표시합니다</li>
26
    <li>only : 미디어 쿼리 구문을 해석하라는 명령어입니다.(생략가능)</li>
27
    <li>all : 미디어 쿼리를 해석해야 할 대상을 나타냅니다.(생략가능)
28
      <ul>
29
        <li>all : 모든 미디어 유형에서 사용할 css를 정의합니다.</li>
30
        <li>print : 인쇄장치에서 사용할 css를 정의 합니다.</li>
31
        <li>screen : 컴퓨터 스크린에서 사용할 css를 정의 합니다.</li>
32
      </ul>
33
    </li>
34
    <li>(조건문) : 해당 크기을 설정할 수 있습니다.</li>
35
    <li>{실행문} : 조건에 따른 실행을 설정합니다.</li>
36
  </ul>
37
</body>
38
</html>
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

08. responsive

  • 브라우저 반응형툴바 색상의미

Adaptive VS Responsive Adaptive:적응형 화면의 크기 별로 페이지를 제작 Responsive: 반응형 화면의 크기에 따라 구성요소가 반응하는(바뀌는) 디자인

정보

👁️‍🗨️ 가변크기공식

자식/부모*100

🔗뷰포트정리

모스트리플루이드

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="utf-8">
6


7
  <title>Mostly Fluid</title>
8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9


10


11
  <style>
12
    * {
13
      margin: 0;
14
      padding: 0;
15
    }
16


17
    body,
18
    h1,
19
    h2,
20
    h3,
21
    h4 {
22
      font-family: verdana, sans-serif;
23
      font-size: 12px;
24
    }
25


26
    #header {
27
      background-color: red;
28
      line-height: 40px;
29
    }
30


31
    /* 1. wrap 의 너비가 960으로 지정되어 화면의 폭이 960 이하일때 가로스크롤 생김
32
    방지하려면 너비를 960이하일때 퍼센트로 지정  */
33
    #wrap {
34
      width: 960px;
35
      margin: 0 auto;
36
    }
37


38
    #container:after {
39
      content: '';
40
      display: block;
41
      clear: both;
42
    }
43


44
    #content {
45
      float: left;
46
      width: 600px;
47
      background-color: lime;
48
    }
49


50
    #aside {
51
      float: right;
52
      width: 340px;
53
      background-color: green;
54
    }
55


56
    #footer {
57
      margin-top: 30px;
58
      background-color: silver;
59
      line-height: 30px;
60
    }
61


62


63
    /* 2. 960이하의 미디어 쿼리 작성->최대너비 960이니까 960이하 */
64
    @media screen and (max-width:960px) {
65


66
      /* 3. wrap 너비를 100으로 하니까 자식의 박스의 총 너비보다 좁아서 자식이 떨어진다 */
67
      #wrap {
68
        width: 100%;
69
      }
70


71
      /* 4.  960이 100%일때 content 너비 600을 계산 (600/960)*100 (부분/전체)*100 */
72
      #content {
73
        width: 62.5%;
74
      }
75


76
      /* 5. aside 도 계산한다 */
77
      #aside {
78
        width: 35%;
79
      }
80
    }
81


82
    /* 6. 480이하일때 전부 밑으로  */
83
    @media screen and (max-width:480px) {
84
      #wrap {
85
        width: 100%;
86
      }
87


88
      #content {
89
        width: 100%;
90
        float: none;
91
      }
92


93
      #aside {
94
        width: 100%;
95
        float: none;
96
      }
97
    }
98
  </style>
99
</head>
100


101
<body>
102


103
  <div id="wrap">
104
    <header id="header">
105
      <h1>Layout example</h1>
106
    </header>
107


108
    <div id="container">
109
      <section id="content">
110
        <h2>Content area</h2>
111
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
112
      </section>
113


114
      <aside id="aside">
115
        <h2>Aside area</h2>
116
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente modi magni nemo corrupti voluptatem nostrum facilis cumque fugiat rerum ullam eius quis voluptatibus dolores distinctio. Quibusdam blanditiis maxime voluptatibus.</p>
117
      </aside>
118
    </div>
119


120
    <footer id="footer">
121
      <p>Copyright &copy; 2014</p>
122
    </footer>
123
  </div>
124


125
</body>
126


127
</html>

정보

💡 아래는 01.html 의 분기별 #wrap{width:100%} 을 삭제한 것이다 미디어쿼리문을 수정하지 말고 #wrap 의 css 속성을 수정하여 화면의 너비가 960이하일때 가로 스크롤이 생기지 않게 하시오.

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="utf-8">
6


7
  <title>Mostly Fluid</title>
8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9


10


11
  <style>
12
    * {
13
      margin: 0;
14
      padding: 0;
15
    }
16


17
    body,
18
    h1,
19
    h2,
20
    h3,
21
    h4 {
22
      font-family: verdana, sans-serif;
23
      font-size: 12px;
24
    }
25


26
    #header {
27
      background-color: red;
28
      line-height: 40px;
29
    }
30


31
    #wrap {
32
      width: 960px;
33
      margin: 0 auto;
34
    }
35


36
    #container:after {
37
      content: '';
38
      display: block;
39
      clear: both;
40
    }
41


42
    #content {
43
      float: left;
44
      width: 600px;
45
      background-color: lime;
46
    }
47


48
    #aside {
49
      float: right;
50
      width: 340px;
51
      background-color: green;
52
    }
53


54
    #footer {
55
      margin-top: 30px;
56
      background-color: silver;
57
      line-height: 30px;
58
    }
59


60


61
    @media screen and (max-width:960px) {
62


63
      #content {
64
        width: 62.5%;
65
      }
66
      #aside {
67
        width: 35%;
68
      }
69
    }
70


71
    @media screen and (max-width:480px) {
72


73
      #content {
74
        width: 100%;
75
        float: none;
76
      }
77


78
      #aside {
79
        width: 100%;
80
        float: none;
81
      }
82
    }
83
  </style>
84
</head>
85


86
<body>
87


88
  <div id="wrap">
89
    <header id="header">
90
      <h1>Layout example</h1>
91
    </header>
92


93
    <div id="container">
94
      <section id="content">
95
        <h2>Content area</h2>
96
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
97
      </section>
98


99
      <aside id="aside">
100
        <h2>Aside area</h2>
101
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente modi magni nemo corrupti voluptatem nostrum facilis cumque fugiat rerum ullam eius quis voluptatibus dolores distinctio. Quibusdam blanditiis maxime voluptatibus.</p>
102
      </aside>
103
    </div>
104


105
    <footer id="footer">
106
      <p>Copyright &copy; 2014</p>
107
    </footer>
108
  </div>
109


110
</body>
111


112
</html>
1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
  <meta charset="utf-8">
6


7
  <title>Mostly Fluid</title>
8
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
9


10


11
  <style>
12
    * {
13
      margin: 0;
14
      padding: 0;
15
    }
16


17
    body,
18
    h1,
19
    h2,
20
    h3,
21
    h4 {
22
      font-family: verdana, sans-serif;
23
      font-size: 12px;
24
    }
25


26
    #header {
27
      background-color: red;
28
      line-height: 40px;
29
    }
30


31
    #wrap {
32
      width: 960px;
33
**      max-width: 960px;**
34
      margin: 0 auto;
35
    }
36


37
    #container:after {
38
      content: '';
39
      display: block;
40
      clear: both;
41
    }
42


43
    #content {
44
      float: left;
45
      width: 600px;
46
      background-color: lime;
47
    }
48


49
    #aside {
50
      float: right;
51
      width: 340px;
52
      background-color: green;
53
    }
54


55
    #footer {
56
      margin-top: 30px;
57
      background-color: silver;
58
      line-height: 30px;
59
    }
60


61


62
    @media screen and (max-width:960px) {
63


64
      #content {
65
        width: 62.5%;
66
      }
67
      #aside {
68
        width: 35%;
69
      }
70
    }
71


72
    @media screen and (max-width:480px) {
73


74
      #content {
75
        width: 100%;
76
        float: none;
77
      }
78


79
      #aside {
80
        width: 100%;
81
        float: none;
82
      }
83
    }
84
  </style>
85
</head>
86


87
<body>
88


89
  <div id="wrap">
90
    <header id="header">
91
      <h1>Layout example</h1>
92
    </header>
93


94
    <div id="container">
95
      <section id="content">
96
        <h2>Content area</h2>
97
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
98
      </section>
99


100
      <aside id="aside">
101
        <h2>Aside area</h2>
102
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, sapiente modi magni nemo corrupti voluptatem nostrum facilis cumque fugiat rerum ullam eius quis voluptatibus dolores distinctio. Quibusdam blanditiis maxime voluptatibus.</p>
103
      </aside>
104
    </div>
105


106
    <footer id="footer">
107
      <p>Copyright &copy; 2014</p>
108
    </footer>
109
  </div>
110


111
</body>
112


113
</html>

정보

💡 지시문

768px 이하의 디바이스에서는 aside와 article의 너비를 비율대로 줄어들도록 하고, 480px 이하의 디바이스에서는 aside와 article이 너비를 다 쓰도록 하시오. 기본형

768이하

480이하

1
<div id="wrapper">
2
      <header>
3
        <h1>header</h1>
4
      </header>
5
      <section>
6
        <h1>section</h1>
7
        <aside>
8
          <h1>snb</h1>
9
        </aside>
10
        <article>
11
          <h1>article</h1>
12
        </article>
13
      </section>
14
      <footer>
15
        <h1>footer</h1>
16
      </footer>
17
    </div>
1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7


8
    <title>Document</title>
9
    <style>
10
      #wrapper {
11
        background: silver;
12
        width: 960px;
13
        margin: auto;
14
      }
15


16
      section:after {
17
        content: "";
18
        display: block;
19
        clear: both;
20
      }
21


22
      aside {
23
        width: 350px;
24
        background: green;
25
        height: 200px;
26
        float: left;
27
        margin-bottom: 20px;
28
      }
29


30
      article {
31
        width: 550px;
32
        background: green;
33
        height: 200px;
34
        float: right;
35
      }
36


37
      @media screen and (min-width: 481px) and (max-width: 768px) {
38
        #wrapper {
39
          width: 100%;
40
        }
41
        aside {
42
          width: 36.49%;
43
        }
44
        article {
45
          width: 53%;
46
        }
47
      }
48
      @media screen and (max-width: 480px) {
49
        #wrapper {
50
          width: 100%;
51
        }
52
        aside {
53
          width: 100%;
54
          float: none;
55
        }
56
        article {
57
          width: 100%;
58
          float: none;
59
        }
60
      }
61
    </style>
62
  </head>
63


64
  <body>
65


66
    <div id="wrapper">
67
      <header>
68
        <h1>header</h1>
69
      </header>
70
      <section>
71
        <h1>section</h1>
72
        <aside>
73
          <h1>snb</h1>
74
        </aside>
75
        <article>
76
          <h1>article</h1>
77
        </article>
78
      </section>
79
      <footer>
80
        <h1>footer</h1>
81
      </footer>
82
    </div>
83
  </body>
84
</html>

컬럼드롭

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>Responsible Layout example</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7


8
<style>
9
  *{margin: 0; padding: 0;}
10
  body,h1,h2,h3,h4{font-family: verdana,sans-serif; font-size: 12px;}
11
  li{list-style: none;}
12
  #header{background-color: red; line-height: 40px;}
13
  #wrap{width: 960px; margin: 0 auto;}
14
  #container:after{content: ''; display: block; clear: both;}
15
  #aside{float: left; width: 200px; background-color: green;}
16
  #content{float: left; width: 600px; background-color: lime;}
17
  #quick{float:right; width: 160px; background-color: orange;}
18
  .nav a{display: block; background: yellow; border: 3px solid brown; padding: 10px;}
19
  #footer{margin-top: 30px; background-color: silver; line-height: 30px;}
20
/* 1. 960 이하에서 */
21
  @media screen and (min-width: 481px) and (max-width: 960px) {
22
    #wrap{
23
      width: 100%;
24
    }
25
    #content{
26
      float: right;
27
      width: 63%;
28
    }
29
    #aside{
30
      width: 35%;
31
    }
32
    #quick{
33
      float: none;
34
      clear: both;
35
      width: 100%;
36
    }
37
    .nav li{
38
      float: left;
39
      width: 25%;
40
    }
41
  }
42
/* 2. 480이하에서 */
43
  @media screen and (max-width: 480px) {
44
    #wrap{
45
      width: 100%;
46
    }
47
    #content{
48
      float: none;
49
      width: 100%;
50
    }
51
    #aside{
52
      float: none;
53
      width: 100%;
54
    }
55
    #quick{
56
      float: none;
57
      width: 100%;
58
    }
59


60
    .nav li{
61
      float: left;
62
      width: 25%;
63
    }
64
  }
65
</style>
66
</head>
67


68
<body>
69


70
<div id="wrap">
71
  <header id="header">
72
    <h1>Layout example</h1>
73
  </header>
74


75
  <div id="container">
76
    <aside id="aside">
77
      <h1>Aside area</h1>
78
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, rerum culpa labore repudiandae deserunt nisi quasi ratione asperiores corporis itaque.</p>
79
    </aside>
80


81
    <section id="content">
82
      <h1>Content area</h1>
83
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
84
    </section>
85


86
    <aside id="quick">
87
      <h1>Quick Navigation</h1>
88
      <ul class="nav">
89
        <li><a href="#">About</a></li>
90
        <li><a href="#">Services</a></li>
91
        <li><a href="#">Portfolio</a></li>
92
        <li><a href="#">Contact us</a></li>
93
      </ul>
94
    </aside>
95
  </div>
96


97
  <footer id="footer">
98
    <p>Copyright &copy; 2014</p>
99
  </footer>
100
</div>
101


102
</body>
103
</html>

레이아웃쉬프터

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>Responsible Layout example</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7


8
<style>
9
  *{margin: 0; padding: 0;}
10
  body,h1,h2,h3,h4{font-family: verdana,sans-serif; font-size: 12px;}
11
  li{list-style: none;}
12
  #header{background-color: red; line-height: 40px;}
13
  #wrap{width: 960px; margin: 0 auto;}
14
  #container:after{content: ''; display: block; clear: both;}
15
  .nav{float: left; width: 200px;}
16
  .nav a{display: block; background: yellow; border: 3px solid brown; padding: 10px;}
17
  #aside{margin-left: 220px; background-color: green;}
18
  #content{margin-left: 220px; background-color: lime;}
19
  #footer{margin-top: 30px; background-color: silver; line-height: 30px;}
20


21
  @media screen and (min-width: 481px) and (max-width: 960px) {
22
    #wrap{
23
      width: 100%;
24
    }
25
    .nav{
26
      float: none;
27
      width: 100%;
28
    }
29
    .nav>ul:after{
30
      content: ''; display: block; clear: both;
31
    }
32
    .nav li{
33
      float: left;
34
      width: 25%;
35
    }
36
    #content{
37
      float: right;
38
      width: 68%;
39
      margin-left: 0;
40
    }
41
    #aside{
42
      float: left;
43
      width: 30%;
44
      margin-left: 0;
45
    }
46
  }
47
  @media screen and (max-width: 480px) {
48
    #wrap{
49
      width: 100%;
50
    }
51
    .nav{
52
      float: none;
53
      width: 100%;
54
    }
55
    .nav>ul:after{
56
      content: ''; display: block; clear: both;
57
    }
58


59
    .nav li{
60
      float: left;
61
      width: 25%;
62
    }
63
    #content{
64
      width: 100%;
65
      margin-left: 0;
66
    }
67
    #aside{
68
      width: 100%;
69
      margin-left: 0;
70
    }
71
  }
72
</style>
73
</head>
74


75
<body>
76


77
<div id="wrap">
78
  <header id="header">
79
    <h1>Layout example</h1>
80
  </header>
81


82
  <div id="container">
83


84
    <nav class="nav">
85
      <ul>
86
        <li><a href="#">About</a></li>
87
        <li><a href="#">Services</a></li>
88
        <li><a href="#">Portfolio</a></li>
89
        <li><a href="#">Contact us</a></li>
90
      </ul>
91
    </nav>
92


93
    <section id="content">
94
      <h1>Content area</h1>
95
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
96
    </section>
97


98
    <aside id="aside">
99
      <h1>Aside area</h1>
100
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, rerum culpa labore repudiandae deserunt nisi quasi ratione asperiores corporis itaque.</p>
101
    </aside>
102
  </div>
103


104
  <footer id="footer">
105
    <p>Copyright &copy; 2014</p>
106
  </footer>
107
</div>
108


109
</body>
110
</html>

티니트윅

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>Tiny Tweaks</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<style>
8
  *{margin: 0; padding: 0;}
9
  body,h1,h2,h3,h4{font-family: verdana,sans-serif; font-size: 12px;}
10
  #header{background-color: red; line-height: 40px;}
11
  #wrap{width: 960px; margin: 0 auto;}
12
  #content{background-color: lime;}
13
  #footer{margin-top: 30px; background-color: silver; line-height: 30px;}
14


15
  @media screen and (max-width: 960px) {
16
    #wrap{
17
      width: 100%;
18
    }
19
  }
20


21
  /* 미디어쿼리 없이 960이상 일때 960  960이하일때 100% 너비 */
22
  #wrap{max-width: 960px; width:100%; margin: 0 auto;}
23
  /*
24
  브라우저의 크기가 960으로 줄어들면 너비를 90% 사용
25
  #wrap{max-width: 960px; width:90%; margin: 0 auto;}
26
   */
27
</style>
28
</head>
29


30
<body>
31


32
<div id="wrap">
33
  <header id="header">
34
    <h1>Layout example</h1>
35
  </header>
36


37
  <div id="container">
38
    <section id="content">
39
      <h1>Content area</h1>
40
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
41
    </section>
42
  </div>
43


44
  <footer id="footer">
45
    <p>Copyright &copy; 2014</p>
46
  </footer>
47
</div>
48


49
</body>
50
</html>

오프캔버스

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
<meta charset="utf-8">
5
<title>off_canvas</title>
6
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7
<style>
8
  *{margin: 0; padding: 0;}
9
  body,h1,h2,h3,h4{font-family: verdana,sans-serif; font-size: 12px;}
10
  li{list-style: none;}
11
  #header{background-color: red; line-height: 40px;}
12
  #wrap{width: 960px; margin: 0 auto;}
13
  #container:after{content: ''; display: block; clear: both;}
14
  .nav{float: left; width: 180px;}
15
  .nav a{display: block; background: yellow; border: 3px solid brown; padding: 10px;}
16
  #content{margin-left: 200px; margin-right: 200px; background-color: lime;}
17
  #aside{float: right; width: 180px; background-color: green;}
18
  #footer{margin-top: 30px; background-color: silver; line-height: 30px;}
19


20
  @media screen and (min-width: 481px) and (max-width: 960px) {
21
    #wrap{
22
      width: 100%;
23
    }
24
    .nav{
25
      width: 30%;
26
    }
27
    #content{
28
      float: right;
29
      width: 68%;
30
      margin-left: 0;
31
      margin-right: 0;
32
    }
33
    #aside{
34
      display: none;
35
    }
36
  }
37
  @media screen and (max-width: 480px) {
38
    #wrap{
39
      width: 100%;
40
    }
41
    .nav{
42
      display: none;
43
    }
44
    #content{
45
      float: none;
46
      width: 100%;
47
      margin-left: 0;
48
      margin-right: 0;
49
    }
50
    #aside{
51
      display: none;
52
    }
53
  }
54
</style>
55
</head>
56


57
<body>
58


59
<div id="wrap">
60
  <header id="header">
61
    <h1>Layout example</h1>
62
  </header>
63


64
  <div id="container">
65
    <nav class="nav">
66
      <ul>
67
        <li><a href="#">About</a></li>
68
        <li><a href="#">Services</a></li>
69
        <li><a href="#">Portfolio</a></li>
70
        <li><a href="#">Contact us</a></li>
71
      </ul>
72
    </nav>
73


74
    <aside id="aside">
75
      <h1>Aside area</h1>
76
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, rerum culpa labore repudiandae deserunt nisi quasi ratione asperiores corporis itaque.</p>
77
    </aside>
78


79
    <section id="content">
80
      <h1>Content area</h1>
81
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, dolores, iste, expedita necessitatibus dolor quos facere beatae voluptas deserunt eum commodi quisquam aperiam itaque quae labore error suscipit consequuntur magni incidunt accusantium rerum nisi explicabo illum! Eveniet, dignissimos, atque, vel voluptas voluptatem minima ipsum tenetur laboriosam quas recusandae animi illum iure cumque deleniti optio quod veniam excepturi architecto doloremque dolorum pariatur aspernatur rerum quia? Delectus, nesciunt quis vero ab modi necessitatibus atque sint nobis! Neque, temporibus, quibusdam maxime consequuntur animi alias rerum doloremque porro id provident itaque eius vel fuga repellendus odit sit veniam atque vero inventore ex? Est, quis.</p>
82
    </section>
83
  </div>
84


85
  <footer id="footer">
86
    <p>Copyright &copy; 2014</p>
87
  </footer>
88
</div>
89


90
</body>
91
</html>

09.responsive_layout

flex를 활용한 반응형 예제

시작파일

https://codepen.io/qwerewqwerew/pen/VwdoydG https://codepen.io/qwerewqwerew/pen/YzvmYbB

10.조건부주석

1
<!DOCTYPE html>
2
<html lang="ko">
3


4
<head>
5
    <meta charset="UTF-8">
6
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
    <title>Document</title>
9


10


11


12


13


14


15


16
     <html class="no-js" lang="ko">
17


18


19


20
<body>
21


22
</body>
23


24
</html>

11. 가변미디어

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
    <title>레이아웃을 꽉채우는 가변이미지</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /*
        video, iframe{
        width:100%;
        max-width:100%;
        }
        */


      #wrap {
        position: relative;
        padding-bottom: 56.25%;
        /* 9 / 16 */
        /* 상/하 퍼센트 패딩 값은 요소의 부모 가로 너비를 기준으로 한다.
            높이가 아니라 너비가 기준임 */
        /* 상하 % 패딩값은 부모요소의 가로너비 기준,
          웹페이지는 세로는 무한이므로 고려X. */
        height: 0;
        overflow: hidden;
      }


      video,
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <video src="video.mp4" controls></video>


    </div>
  </body>
</html>