♣ VSCode 디자인

◆ a태그

  • 버튼과 동일한 모양으로 만들 수 있도록 개조
  • display=inline 이므로 block 속성이 들어가게 개조(폭 설정)
    - ex) display: inline-block;
  • text-align: center;으로 글자를 가운데 정렬
  • text-decoration: none;을 밑줄을 제거

◆ button

form 안에 있는 버튼은 전송용 버튼으로 기본 취급된다.
문제를 해결하기 위해서는 다음과 같이 처리한다.

  1. 버튼에 type을 설정해서 용도를 지정할 수 있다.
  • type="submit" 이면 폼을 전송시키는 버튼
  • type="button" 이면 그냥 버튼
  1. 버튼 말고 다른 태그를 사용한다.
  • a태그, input[type=button] 등을 사용할 수 있다.
  • 버튼이 눌러지지만 디자인이 이상해지는 단점이 있다.
  • a태그의 display, text-align, text-decoration을 수정

◆ 여백 설정

외부 여백(margin)을 부여할 수 있도록 설정(10~50px)

  • .mt - margin top
  • .mb - margin bottom
  • .ms - margin start(left)
  • .me - margin end(right)

내부 여백(padding)을 부여할 수 있도록 설정(10~50px)

  • .pt - padding top
  • .pb - padding bottom
  • .ps - padding start(left)
  • .pe - padding end(right)

◆ label 디자인

  • label은 inline이 기본 값이다.
  • .form-label은 inline-block으로 변경

◆ textarea

  • 리사이즈(resize)에 대한 설정이 필요하다.
    - resize: vertical; 은 수직 변경만 가능
    - resize: none; 은 좌우상하 변경이 불가
  • 만약 resize가 vertical(수직)이면 최소 높이(min-height)가 지정되어야 한다.
  • 높이를 픽셀로 설정할 경우 글자가 잘리는 단점이 있다.
    - (보완) 300px 대신 10em으로 사용해서 글자 크기에 따라 설정되게 해준다.
  • 디자인 시 cols는 width와 충돌이 발생하므로 한 개만 사용한다.
  • rows 역시 줄이는 것이 가능하므로 디자인 적인 가치가 별로 없다.

◆ focus

  • focus : 커서가 위치 했을 때 강조 효과(테두리가 진해지는 효과)
.form-input:focus {
	border-color: black;
}

◆ hover

  • hover는 커서를 클릭했을 때 강조 효과(테두리가 진해지는 효과)
  • 주로 button에서 사용
.form-btn:hover {
	/* 원래보다 10% 밝게 처리 */
	 filter: brightness(105%);
}

◆ outline

  • 커서가 위치 했을 때 강조 효과 제거(테두리가 진해지는 효과)
outline: none;
profile
Backend Developer

0개의 댓글