- 로그인과 회원가입을 할 수 있는 UI 구현
전체 소스
-
html
-
css
태그 설명
box-sizing
- 박스의 크기를 어떤 것을 기준으로 계산할지 정하는 속성
box-sizing: border-box;
-> 테두리를 기준으로 크기를 정함
: content-box 콘텐트 영역을 기준으로 크기를 정함
: initial 기본값으로 설정함
: inherit 부모 요소의 속성값을 상속 받음
input::placeholder
- placeholder 의 디자인이나 색상을 변경하고 싶을 때 사용
input::placeholder{
font-size: 0.7rem;
color: rgb(255, 255, 255);
}-> 글자 크기와 글자 색상을 변경함
margin
-
요소의 네 방향 바깥 여백 영역을 설정함
margin: 0
-> 초기상태로 돌리고 싶은 경우 0을 사용하면 됨margin-bottom:
-> email과 password 입력하는 칸의 간격을 조절해주고 싶어서 사용
submit-b 라는 button 꾸미기
.submit-b {
border: 0;
line-height: 2;
padding: 0 13px;
margin-bottom: 10px;
font-size: 0.7rem;
text-align: center;
color: rgb(255, 255, 255);
border-radius: 5px;
background-color: rgb(57, 95, 99);
box-shadow: inset -2px -2px 3px rgba(0, 0, 0, .6);
}
-> box-shadow 그림자 효과
inset : 값을 지정하지 않으면 공중에 떠있는 것처럼 그림자 효과가 생성,
inset 키워드가 존재하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려짐
-> line-height
라인 박스의 높이를 설정, 일반적으로 텍스트 줄 사이의 거리를 설정하는데 사용
블록 수준 요소에서 내 라인 상자의 최소 높이를 지정.submit-b:active {
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .6);
}
-> active 사용자가 활성화한 요소(버튼)을 나타냄
마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미a[href]
-
a 태그는 문서를 링크 시키기 위해 사용
-
href 속성은 a 태그를 통해 연결할 주소를 지정함
a[href] {
color:rgb(0, 0, 0);
}a[href]:hover {
color:crimson;
}-> 기본 색상은 검정이지만 마우스를 올리면 빨간색으로 변경됨
