📝 오늘 한 것

1. poiemaweb - CSS (~박스 모델)

📚 배운 것

1. reset css

• 브라우저별로 각기 다른 CSS 기본 값들을 초기화시키기 위해 사용한다

• Eric Meyer’s reset, normalize.css 등이 있다

2. class 선택자

💡 tip!

먼저 class 선택자를 지정해 CSS를 작성하고, HTML 요소에 미리 지정해 놓은 class 값을 부여하는 방식을 추천

1) 선택자[속성|="값"]

• 지정된 속성값과 일치하거나 지정된 속성값 바로 뒤 하이픈(-)으로 시작하는 요소를 선택

2) 의사 클래스

(1) :checked, :enabled, :disabled

input[type="radio"]:enabled + span,
input[type="checkbox"]:enabled + span {
  color: blue;
}

input[type="radio"]:checked + span,
input[type="checkbox"]:checked + span {
  color: red;
}

input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span {
  text-decoration: line-through;
}

참고) :enabled 뒤에 :checekd를 적어야 :checked에 CSS가 적용된다

(2) :valid, :invalid

• :valid → 정합성 검증이 성공한 input 요소 또는 form 요소 선택

• :invalid → 정합성 검증이 실패한 input 요소 또는 form 요소 선택

3) 의사 요소

(1) ::selection

• 드래그한 콘텐츠를 선택
• 일부 브라우저에서는 지원되지 않는다

3. CSS 속성값의 크기 단위

1) px

• 디바이스 해상도에 따라 크기가 달라진다
• 주로 요소의 크기, 이미지의 크기를 지정할 때 사용

2) %

• 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)의 상대적인 사이즈를 지정할 때 사용

3) em (배수)

• 요소에 지정된 사이즈(상속된 사이즈나 디폴트 사이즈)의 상대적인 사이즈를 지정할 때 사용
• 주로 폰트의 크기, 콘텐츠를 포함하는 컨테이너의 크기를 지정할 때 사용

4) rem

• em과는 달리 상속되는 값에 영향을 받지 않고, 최상위 요소(html)의 사이즈를 기준으로 한다
• 주로 콘텐츠의 크기에 따라 가변적으로 대응하여야 하는 컨테이너의 크기 등을 지정할 때 사용

5) viewport(화면상의 표시 영역) 단위

• vw : viewport 너비의 1/100
• vh : viewport 높이의 1/100
• vmin : viewport 너비 또는 높이 중 작은 쪽의 1/100
• vmax : viewport 너비 또는 높이 중 큰 쪽의 1/100

4. width / height

(1) 기본적으로 요소의 너비와 높이는 '콘텐츠 영역'을 대상으로 한다

(2) box-sizing: border-box;를 지정하면 '콘텐츠 영역과 padding, border까지 포함된 영역'이 그 대상이 된다

(3) 실제 콘텐츠가 지정한 콘텐츠 영역보다 크면 그 콘텐츠 영역을 넘어가게 되므로 주의해야 한다

(4) 기본값은 auto로써 이는 브라우저가 상황에 맞춰 적당한 width와 height 값을 계산할 것임을 의미한다

(5) max-width / min-width

• max-width : 브라우저의 크기가 속성값보다 작아지면 요소의 너비는 줄어들지만, 커지면 변화 없다
• min-width : 브라우저의 크기가 속성값보다 커지면 요소의 너비는 늘어나지만, 작아지면 변화 없다

cf. width, height, padding, margin, border, box-sizing 등 모든 박스 모델 관련 속성은 상속되지 않는다

✨ 내일 할 것

1. poiemaweb - CSS 이어서