Day39

Frame

• table은 기본적으로 적용되는 propeties이 너무 많다.
• 따라서 <div>를 이용해서 화면을 구성하게 된다.
• 필요한 Tag는 Container(외부 <div>)와 Content(내부 <div>) 두 가지이다.
• div는 기본적으로 폭이 100%이므로 원하는 크기로 변경

> 규칙

• 모든 화면은 N줄 1칸 형태이다.
• container는 표시될 폭과 정렬방식을 가운데로 설정

> 가운데 정렬

• 내용물 가운데 정렬
  • [property] text-align: center;
• 자신을 가운데 정렬
  • [property] margin: 0 auto;
  • auto는 자동으로 계산해서 가능한 값 부여

+ none

class 분류

> 역할 class

• form-input
• form-btn

> background class

• positive
• negative
• neutral

.positive {
  background-color: #2ed573;
  border-color: #2ed573;
  color: white;
}
.negative {
  background-color: #ff4757;
  border-color: #ff4757;
  color: white;
}
.neutral {
  background-color: #ced6e0;
  border-color: #ced6e0;
  color: black;
}

> size class

• w-100

  .w-100 {
    width: 100%;
  }

> align class

• center

  .center {
    text-align: center;
  }

> 모서리 깎기

outline

• <input>의 property

> class

• form-btn이면서 neutral일 때 작용

.form-btn.neutral {
  background-color: #ced6e0;
  border-color: #ced6e0;
  color: black;
}

> css 변수설정

css, css3

+ caniuse
각 browser와 기술의 호환성 알려주는 사이트

<textarea>

• 디자인 시 cols는 width와 충돌이 발생하므로 하나만 사용
• rows 역시 줄이는 것이 가능하므로 디자인 적인 가치가 별로 없다.
• [property] resize 설정

  resize: vertical;
  resize: none;
  resize: horizontal;

• 만약 vertical이면 최소 높이 지정

    min-height: 11em;
    max-height: 21em;
    height: 11em; /*최초 높이*/

TAG Information

<a>

default

display:inline

<label>

default

display:inline