Post

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

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

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

쓸데 많은 Table 레이아웃과 vertical-align 속성

  • 표 만들 땐 <table>
    • 행(<tr>) ⟶ 열(<td>) 순서
    • 제목용 세로 열 만들 땐 <th>
    • 제목 행은 <thead> 안에 일반 행은 <tbody> 안에 넣는 것을 권장
    • 기본적으로 있는 테이블 틈을 없애려면 border-collapse: collapse
    • 셀 안의 요소 상하정렬 vertical-align 속성 사용
  • vertical-align
    • 테이블 셀 안의 요소 상하정렬. 속성 값으로 top, middle, bottom 가능
    • inline/inline-block 요소 간의 상하정렬
      • inline: 폭과 너비가 없는 요소. <span> 태그 등
  • 일반 <div> 로 표를 만들고 싶다면
    1
2
3
4
5

      .box {
      display: table;
      display: table-row;
      display: table-cell;
  }

장바구니 레이아웃(숙제)

  • 테이블 테두리가 둥근 것 구현
  • 테이블 셀들이 합쳐져 있는 것 구현 (셀 합치기 관련 속성)
  • cart.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
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

      <div class="cart-container">
      <div class="subart-container">
          <h4>Your shopping cart</h2>
          <table class="cart-table">
              <thead>
                  <tr>
                      <th colspan="2">ITEM</th>
                      <th>AMOUNT</th>
                      <th>PRICE</th>
                      <th>TOTAL</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <th><img src="img/winter.png" style="width: 50px;"></th>
                      <td>
                          <span style="font-weight: 700; color: black;">
                              CHEONG SEOLMO
                          </span> 
                          <br>
                          <span>
                              FE 70*200 mm F2.8 GM OSS
                          </span>
                      </td>
                      <td style="text-align: right;">1</td>
                      <td style="text-align: right;">$1979.00</td>
                      <td style="color: rgb(33, 44, 145); text-align: right; font-weight: 900">$1979.00</td>                    
                  </tr>
                  <tr>
                      <th><img src="img/darong.jpg" style="width: 50px;"></th>
                      <td>
                          <span style="font-weight: 700; color: black;">
                              DARONG
                          </span> 
                          <br>
                          <span>
                              Sonnar T*E 24mm F1.8 ZA
                          </span>
                      </td>
                      <td style="text-align: right;">1</td>
                      <td style="text-align: right;">$989.00</td>
                      <td style="color: rgb(33, 44, 145); text-align: right; font-weight: 900">$989.00</td>                  
                  </tr>
              </tbody>
              <tfoot>
                  <tr><td colspan="5">$2968.00</td></tr>
              </tfoot>   
          </table>
      <form>
          <a href="#">Edit your shopping cart</a>
          <button type="submit">Choose payment method</button>            
      </form>
      <div>    
  </div>
  • 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
71
72
73
74
75

      .cart-container {
      width: 50%;
      height: 400px;
      background-color: rgb(195, 217, 225);
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 20px;
  }

  .subart-container {
      width: 90%;
      height: 100%;
      display: block;
      margin: auto;
  }

  .subart-container h4 {
      margin-top: 0px;
      margin-bottom: 15px;
      color: rgb(33, 44, 145);
  }

  .cart-table {
      width: 100%;
      border-collapse: collapse;
      border-style: hidden;
      background-color: white;
      border-radius: 4px;
      margin-bottom: 10px;

  }

  .cart-table thead {
      height: 15px;
      font-size: 7px;
      color: rgb(119, 158, 172);
  }

  .cart-table tbody {
      height: 100px;
      font-size: 9px;
      color: rgb(119, 158, 172);
  }

  .cart-table tfoot {
      height: 30px;
      text-align: right;
      font-size: 10px;
      color: rgb(33, 44, 145);
      font-weight: 900;
  }

  .cart-table th, td {
      border: 1px solid rgb(195, 217, 225);
      padding: 10px;
      border-right: 0px;
      border-left: 0px;
  }

  .cart-container a {
      color: rgb(33, 44, 145);
      font-size: 8px;
  }

  .cart-container button {
      font-size: 8px;
      padding: 9px;
      background-color: rgb(33, 44, 145);
      color: rgb(195, 217, 225);
      border: none;
      border-radius: 5px;
      float: right;

  }

  • img

    1

Table 레이아웃 숙제 : Cart 페이지 만들기

  • 테이블 셀의 최대폭은 다른 셀의 최소폭을 지키는 한에서 차지
  • 테이블 셀 폭 조절하면, 같은 열들의 폭도 같이 조절됨
  • nth-child() 셀렉터: n번째 등장하는 요소만 셀렉
    1
2
3

      .cart-table th:nth-child(2) { 
      width: 400px
  }

pseudo-class로 인터랙티브 버튼 만들기

  • 커서 변경은 cursor: pointer 등
  • 마우스 올릴 때 스타일은 :hover (pseudo-class)
  • 클릭 중 스타일은 :active (pseudo-class)
  • 커서 찍혔을 때 스타일은 :focus (pseudo-class)

  • 넣을 때 순서 중요 hover > focus > active 순

  • 방문 전 링크 스타일은 :link

  • 방문 후 링크 스타일은 :visited

  • 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

      .cart-container a {
      font-size: 8px;
      text-decoration: none;
  }
  .cart-container a:link {
      color: black;
  }
  .cart-container a:visited {
      color: rgb(33, 44, 145);
  }

  .cart-container button {
      font-size: 8px;
      padding: 9px;
      background-color: rgb(255, 255, 255);
      color: rgb(33, 44, 145);
      border: none;
      border-radius: 5px;
      float: right;
        
      cursor: pointer;
  }
  .cart-container button:hover {
      background-color: rgb(33, 44, 145);
      color: rgb(255, 255, 255);
  }
  .cart-container button:active {
      background-color: rgb(19, 26, 89);
  }

  .cart-container input {
      width: 50%;
      padding: 5px;
      font-size: 6px;
      border: 1px solid rgb(119, 158, 172);
      border-radius: 50px;
      outline: 0px;
  }
  .cart-container input:focus {
      border: 1.5px solid rgb(144, 219, 229);
  }

  • img

    2

  • 기타 pseudo-class
    1
2
3
4
5
6
7
8
9
10
11
12
13

      :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
  :playing /*동영상, 음성이 재생중일 때*/
  :paused /*동영상, 음성이 정지시*/
  :autofill /*input의 자동채우기 스타일*/
  :disabled /*disabled된 요소 스타일*/
  :checked /*체크박스나 라디오버튼 체크되었을 때*/
  :blank /*input이 비었을 때*/
  :valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
  :invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
  :required /*필수로 입력해야할 input의 스타일*/
  :nth-child(n) /*n번째 자식 선택*/
  :first-child /*첫째 자식 선택*/
  :last-child /*마지막 자식 선택*/

코드양이 줄어드는 class 작명법 (OOCSS, BEM)

  • OOCSS(Object Oriented CSS) (코드작성 관습)
    • 뼈대용 class, 살점용 class 각각 제작
    • 예시
      1
2
3
4
5
6
7
8
9
10
11
12
13

        .main-btn {
      font-size : 20px;
      padding : 15px;
      border : none;
      cursor : pointer;
  }

  .bg-red {
      background : red;
  }
  .bg-blue {
      background : blue;
  }
    • 장점
      1. CSS 양 감소
      2. 유지보수 편리
    • 만들어두면 편한 Utility class: 특정 살점을 세분화하여 만드는 것
      • 예시
        1
2
3
4
5
6
7
8
9

          .font-small {
      font-size : 12px;
  }
  .font-medium {
      font-size : 16px;
  }
  .font-lg {
      font-size : 20px;
  }
  • BEM(Block__Element–Modifier) 룰(작명법)
    • class="덩어리이름__역할--세부특징"\
    • 예시
      1
2

        <button class="profile__button--red">빨간버튼</button>
  <button class="profile__button--blue">파란버튼</button>
  • 요즘은.. React, Vue로 HTML 만들면 Component 단위로 나눠 코드 짬. Component에 종속되는 CSS 생성 가능
Web, HTML/CSS
lecture
This post is licensed under CC BY 4.0 by the author.