Post

[HTML/CSS] 기초모듈(3)

[HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지] codingapple.com

Posted Updated
By Cheong seolmo
6 min read
[HTML/CSS] 기초모듈(3)

배경에 이쁘게 넣는 스킬들 & margin collapse

  • background
    • background-image: 바탕을 그림으로 넣고 싶을 때
    • url(), url()로 배경 두개 겹쳐 넣기 가능
    • background 조정: background-size, background-repeat, background-position, background-attachment 등
      • background-size
        • cover: 배경이 잘려도 div 박스 채우기
        • contain: div 박스 남아도 배경으로 온전하게 채우기
      • filter: 보정
      • linear-gradient: 그래디언트 넣기
  • margin collapse 현상: 박스 2개의 테두리가 겹칠 경우, margin이 합쳐져 같은 것으로 인식됨 ⟶ 부모박스에 padding을 줘서 떨어뜨리기

제목 밑에 글 넣고 버튼 하나 이쁘게 넣기(숙제)

  • layout3.html
    1
2
3
4
5
6
7
8
9
10
11

      <body>
        
      <div class="main-background">
          <h4 class="main-title">CEONG SEOLMO</h4>
          <p class="description">GitHub's address is 'https://github.com/choisunmi00', but the next button goes to the blog.</p>
              <div style="text-align: center;">
                  <button class="link-btn"><a href="https://choisunmi00.github.io/">🍎SEOLMO🍎</a></button>
              </div>
      </div>

  </body>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

      .main-background {
      width: 100%;
      height: 300px;
      background-image: url(/img/space.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-attachment: fixed;
      padding: 1px;
        
  }

  .main-title {
      color: white;
      font-size: 50px;
      margin: 66px 0px 30px 0px;
      text-align: center;
      font-family: fantasy;
      letter-spacing: 2px;
  }

  .description {
      color: white;
      text-align: center;
      font-family: 'Segoe UI';
  }

  .link-btn {
      width: 130px;
      height: 40px;
      color:rgb(0, 0, 0);
      border-radius: 20px;
      border: none;
      font-family: 'Segoe UI';
      font-weight: 500;
      box-shadow:inset 2px 2px 2px 0px; 
  }

  .link-btn a{
      font-size: 16px;
      color: black;
      text-decoration: none;
  }

  • img

    1

position과 좌표 레이아웃 만들기

  • 배경의 마진을 없애주고 싶다면 <body style="margin: 0px">
  • position 속성: float와 비슷하게 공중에 뜸
    1. relative: 원래 위치 기준, 좌표 속성으로 배치 가능
    2. static: 좌표이동 X
    3. fixed: 현재 화면 기준으로 고정(스크롤해도 고정)
    4. absolute: 부모 태그(position: relative를 가지고 있는 부모 태그)를 기준으로 배치 가능
  • layout3.html
    1
2
3
4
5
6
7
8
9
10
11
12

      <body style="margin: 0px">
        
      <div class="main-background">
      <h4 class="main-title">CEONG SEOLMO</h4>
      <p class="description">GitHub's address is 'https://github.com/choisunmi00', but the next button goes to the blog.</p>
          <div>
          <button class="link-btn"><a href="https://choisunmi00.github.io/">🍎SEOLMO🍎</a></button>
          </div>
      <div class="main-box"></div>
      </div>

  </body>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

      .main-title {
      color: white;
      font-size: 50px;
      margin: 66px 0px 30px 0px;
      text-align: center;
      font-family: fantasy;
      letter-spacing: 2px;

      position: relative;
  }

  .link-btn {
      width: 130px;
      height: 40px;
      color:rgb(0, 0, 0);
      border-radius: 20px;
      border: none;
      font-family: 'Segoe UI';
      font-weight: 500;
      box-shadow:inset 2px 2px 2px 0px;
        
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 150px;
  }

위와 겹치는 박스 만들기(숙제)

  • <div class="main-box"></div>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11

      .main-box {
      height: 300px;
      background-color: rgb(225, 241, 243);

      position: absolute;
      left: 0;
      right: 0;
      bottom: 300px;
      margin: auto;
      width: 400px;
  }

  • img

    2

position 숙제 & 반응형 width & box-sizing

  • position 숙제
    • position: absolute를 사용하면 나중에 같은 박스를 만들 경우 겹쳐짐
    • main.css
      1
2
3
4
5
6
7
8
9
10
11
12
13
14

        .main-box {
  width: 450px;
  height: 180px;
  background-color: rgb(240, 243, 244);
  padding: 20px;
  font-family: 'Segoe UI';
  text-align: center;
  border-radius: 15px;
  box-shadow: 3px 3px 6px #3f3f3f;

  position: relative;
  top: 150px;
  margin: auto;
  }
  • z-index: 붕 떠있는 요소들에 넣는 속성. 값은 정수. 높을 수록 위에 올라간다.
  • max-width: width의 값을 %로 줄 때, 최대값 지정. (%값을 넣는 경우 PC사이즈에서 너무 커짐)
    • min-height 등. 반응형 레이아웃을 구현할 때 유용
  • <br>: 줄바꿈 태그
  • width는 content 영역의 너비를 의미
    • max-width로 조절해도 padding을 크게 줄 경우 박스의 폭도 늘어남
    • box-sizing: border-box;: 박스 사이즈에 padding, border가 포함됨
      • box-sizing: content-box;: 박스 사이즈에 padding, border가 포함되지 않음
      • 미리 맨 앞에 써놓으면 좋을 main.css
        1
2
3
4
5
6
7

          div {
      box-sizing: border-box;
  }

  body {
      margin: 0px;
  }
  • 브라우저마다 디자인이 다르게 보일 수 있는 문제: normalize.css 검색, 혹은 https://github.com/necolas/normalize.css/blob/master/normalize.css

현황

  • layout3.html
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

      <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="css/main.css" rel="stylesheet">
  </head>
  <body style="margin: 0px">
        
      <div class="main-background">
      <h4 class="main-title">CEONG SEOLMO</h4>
      <p class="description">GitHub's address is 'https://github.com/choisunmi00', but the next button goes to the blog.</p>
          <div>
          <button class="link-btn"><a href="https://choisunmi00.github.io/">🔹SEOLMO🔹</a></button>
          </div>
      </div>

      <div class="main-box">
      <h4>What happens in this blog</h4>
      <p style="font-size: 14px;">Some of the categories in the blog are 
          AI, Biology, Engineering, Research, Software, and Web. 
          There may be a diary category that records games and reading, 
          as well as a diary category that records English studies 
          and household accounts.
          </p>
      </div>

  </body>
  </html>
  • main.css
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

      .main-background {
  width: 100%;
  height: 500px;
  background-image: url(/img/space.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  padding: 1px;
    
  }

  .main-title {
      color: white;
      font-size: 50px;
      margin: 66px 0px 30px 0px;
      text-align: center;
      font-family: fantasy;
      letter-spacing: 2px;

      position: relative;
  }

  .description {
      color: white;
      text-align: center;
      font-family: 'Segoe UI';
  }

  .link-btn {
      width: 130px;
      height: 40px;
      color:rgb(0, 0, 0);
      border-radius: 20px;
      border: none;
      font-family: 'Segoe UI';
      font-weight: 500;
      box-shadow:inset 2px 2px 2px 0px;
        
      position: absolute;
      left: 0;
      right: 0;
      margin: auto;
      width: 150px;
  }

  .link-btn a{
      font-size: 16px;
      color: black;
      text-decoration: none;
  }

  .main-box {
      width: 650px;
      height: 180px;
      background-color: rgb(240, 243, 244);
      padding: 20px;
      font-family: 'Segoe UI';
      text-align: center;
      border-radius: 15px;
      box-shadow: 3px 3px 6px #3f3f3f;

      position: relative;
      top: -130px;
      margin: auto;
  }

  div {
      box-sizing: border-box;
  }

  • img

    3

Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.