3월 22일 Today I Learned

오늘한 일

HTML, CSS에 이론과 각종 태그를 배우며 재미를 느끼지 못해 난 그냥 웹 프론트엔드가 안 맞는구나 그냥 여기서 포기할까?라는 생각을 했었는데 이번에 간단한 과제 프로젝트를 하며 재미를 느껴서 좀 더 해봐도 괜찮을 거 같다는 생각이 들었다

CSS의 박스 모델은 웹 페이지의 레이아웃을 구성하는 핵심 개념 중 하나이다 이 모델은 각 HTML 요소를 사각형 상자로 처리하고 이 상자의 크기, 내용, 패딩, 테두리, 여백 등을 정의하는데

우선 각 박스는 네 가지 구성 요소로 구성된다

Content (콘텐츠): 박스 내부의 실제 콘텐츠를 나타낸다

Padding (패딩): 콘텐츠와 테두리 사이의 공간으로 내부 여백을 나타낸다

Border (테두리): 박스의 테두리를 나타내며 두께, 스타일 및 색상을 설정할 수 있다

Margin (여백): 박스와 다른 요소 사이의 간격으로, 외부 여백을 나타낸다

이러한 구성 요소는 모두 상자의 크기와 위치를 결정하는 데 사용되는데 예를 들어 요소의 너비는 콘텐츠의 너비, 패딩, 테두리, 여백의 합으로 결정된다

CSS에서는 각 구성 요소에 대한 스타일을 개별적으로 설정할 수 있고 이를 통해 박스의 외관을 완전히 제어할 수 있다 또한 박스 모델은 블록 요소와 인라인 요소에 모두 적용된다

CSS의 box-shadow는 HTML 요소의 그림자 효과를 생성하는 속성으로 이를 사용하여 요소에 3D 효과를 부여하거나 요소가 다른 요소와 구분되도록 시각적 효과를 추가할 수 있다

box-shadow 속성은 다음과 같은 코드로 작성되는데

  
box-shadow: h-shadow v-shadow blur spread color inset;

위 코드에서 각 값은 다음과 같은 의미를 가진다

h-shadow: 그림자의 수평 위치를 지정하는 값으로 양수 값은 오른쪽으로 음수 값은 왼쪽으로 이동시킨다

v-shadow: 그림자의 수직 위치를 지정하는 값으로 양수 값은 아래쪽으로 음수 값은 위쪽으로 이동시킨다

blur: 그림자의 흐림 정도를 지정하는 값으로 값이 클수록 더 흐릿한 그림자가 생성된다

spread: 그림자의 크기를 지정하는 값으로 값이 양수일 경우 그림자가 요소보다 커지고 음수일 경우 그림자가 요소 안쪽으로 줄어든다

color: 그림자의 색상을 지정하는 값이다

inset: 선택적으로 사용할 수 있는 키워드로 박스 내부에 그림자를 생성한다

내일은 100일 코딩 챌린지 - Web Development 부트캠프를 4일 분량을 진행해야겠다