✨ css
index.html에서 사용한 class, id를style.css에서 사용하는 방법과 css에 어떤 요소가 있었는지 기억하기 위해서 정리해보자!!
👩🏻💻 코드
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
:root {
--success--color: #2ecc71;
--error-color: #e74c3c;
}
/* all */
* {
box-sizing: border-box;
}
body {
background-color: #f9fafb;
font-family: "Open Sans", sans-serif;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
width: 400px;
}
h2 {
text-align: center;
margin: 0 0 20px;
}
.form {
padding: 30px 40px;
/* top&bottom / right&left */
}
.form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label {
color: #777;
display: block;
margin-bottom: 5px;
}
.form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
width: 100%;
padding: 10px;
font-size: 14px;
}
.form-control input:focus {
outline: 0;
border-color: #777;
}
/* form-control div태그에 success라는 클래스로 이름이 바뀌게 되면 input태그에 설정되는 css*/
.form-control.success input {
border-color: var(--success--color);
}
.form-control.error input {
border-color: var(--error-color);
}
.form-control small {
color: var(--error-color);
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
.form button {
cursor: pointer;
background-color: #3498db;
border: 2px solid #3498db;
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
}📃 TIL
✔️ 글씨체 적용
@import를 통해서 적용하고 싶은 글씨체를 적용할 수 있다!
✔️ CSS 선택자
- CSS 규칙을 적용할 요소를 정의
*: 전체 선택자
.: 클래스 선택자
#: id 선택자
태그이름: 유형 선택자
✔️ CSS 선택자 예시
.form-control input : form-control클래스의 input태그 선택
.form-control input:focus : form-control클래스의 input태그가 focus됐을 때
.form-control.success : form-control클래스를 가지고 있으면 success클래스를 가지고 있는 태그 => 두 개의 클래스 선택자를 결합한 것
✔️ :root
/* 선언 */
:root {
--success--color : #2ecc71;
--error--color : #e74c3c;
}
/* 사용 */
.form-control.success input {
border-color : var(--success--color);
}:root는 HTML 문서의 루트요소(<html>태그)를 선택하는 선택자- 자주 사용하는 색깔들이기 때문에 전역으로 정의해주기!
--success--color: CSS 커스텀 속성(variable)을 정의
✔️ CSS 속성 정리
box-sizing: 요소의 너비와 높이를 계산하는 방법 지정content-box:width,height속성이 콘텐츠 영역만 포함, 안팎 여백과 테두리 포함 xborder-box:width,height속성이 안쪽 여백과 테두리 포함, 바깥 여백 포함 x
display: 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 결정, 사용할 레이아웃 설정- 바깥쪽
block: 혼자 한 줄을 차지 (div,p,h1)inline: 한 줄에 다른 엘리먼트들과 나란히 배치 (span,a)
- 안쪽
flowgridflex
- 바깥쪽
visibility: 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨김visible: 요소가 보임hidden: 요소가 숨겨짐
참고 MDN문서
프로젝트 매니저 이아현입니다 :)