♣ VSCode 디자인
◆ a태그
- 버튼과 동일한 모양으로 만들 수 있도록 개조
- display=inline 이므로 block 속성이 들어가게 개조(폭 설정)
- ex) display: inline-block;
text-align: center;
으로 글자를 가운데 정렬
text-decoration: none;
을 밑줄을 제거
form 안에 있는 버튼은 전송용 버튼으로 기본 취급된다.
문제를 해결하기 위해서는 다음과 같이 처리한다.
- 버튼에 type을 설정해서 용도를 지정할 수 있다.
type="submit"
이면 폼을 전송시키는 버튼
type="button"
이면 그냥 버튼
- 버튼 말고 다른 태그를 사용한다.
- 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;