오늘 배운 내용 정리
CSS 리셋
크롬, 사파리 등 다양한 브라우저의 기본 스타일을 통일하기 위해 사용한다.
Normalize
Normalize는 일관되지 않은 스타일만 제거하고, 가능한 기본 스타일을 유지한다.
Reset
reset은 기본 스타일을 대부분 제거하고, 스타일을 새롭게 추가한다.
CSS리셋 관련 링크
CROS
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
출처는 ‘오리진origin’의 번역 표현이다. 우리가 흔히 알고 있는 URL에서 도메인만 뜻하는 게 아니라 프로토콜과 포트까지 포함하는 개념이다. 출처를 구성하는 세 요소는 프로토콜·도메인(호스트 이름)·포트로, 이 중 하나라도 다르면 CORS 에러를 만나게 된다.
CROS 관련 링크
오늘의 궁금한 점
inline-size와 width의 차이?
- width 속성은 요소의 너비를 설정합니다. 일반적으로 블록 요소에 사용되며, 해당 요소가 포함된 블록 레벨 컨테이너의 너비를 기준으로 합니다. 즉, 부모 요소의 너비에 따라 결정됩니다. 이 속성은 블록 요소에만 적용되며, 인라인 요소에는 적용되지 않습니다.
- inline-size 속성은 요소의 너비를 설정합니다. 이것은 CSS 논리에서의 "inline" 방향에 해당하는 속성입니다. inline-size는 요소가 블록 요소인지 인라인 요소인지에 관계없이 적용됩니다. 이것은 블록 레벨 요소의 경우 너비를 설정하는 데 사용될 수 있지만, 더 흥미로운 사용 사례는 인라인 요소에 적용되는 것입니다. 인라인 요소의 경우, 이 속성을 사용하여 요소의 폭을 조절할 수 있습니다.
즉, width는 주로 블록 요소의 너비를 조절하는 데 사용되고, inline-size는 인라인 요소의 너비를 조절하는 데 사용됩니다. 블록 요소의 경우 둘 다 사용 가능하지만, 인라인 요소의 경우에는 inline-size만 사용할 수 있습니다.
https://flukeout.github.io/
CSS 선택자(셀렉터) 연습하기! 🍎
https://flexboxfroggy.com/#ko
FELX 공부할 수 있는 게임 🐤
https://studiomeal.com/archives/197
CSS flex 정리글!
@jaaerim