1. 전역 변수(Global variable)전역 변수는 전체 문서에 걸쳐 사용할 수 있는 변수이다. 이러한 변수는 보통 :root 선택자 안에서 정의가 된다:root 선택자는 HTML 문서의 최상위 요소인 을 가리키며, 여기서 정의 변수는 스타일  시트 어디에서나 접근이 가능하다.:root { --point-color: #f60; --font-en: 'arial'; --font-kr: 'Noto Sans KR', sans-serif;}.header { color: var(--point-color); font-family: var(--font-kr);} 2. 지역 변수(Local variable)지역 변수는 특정 CSS 선택자내에서만 사용할 수 있는 변수이며, 이러한 변수는 특정 요소의 컨텍스트..

1. flex-direction이란?flex-direction는 flexbox 레이아웃에서 요소들이 주축(메인 축)에 따라 배치되는 방향을 결정하는 속성이다. 주로 요소들이 가로 또는 세로 방향으로 정렬되는 방식이다.flex-direction에는 네가지 주요 값이 있다.row(기본값) : 요소들이 왼쪽에서 오른쪽으로 가로 방향으로 배치된다.row-reverse : 요소들이 오른쪽에서 왼쪽으로 가로 방향으로 배치된다.column : 요소들이 위에서 아래로 세로 방향으로 배치된다.column-reverse : 요소들이 아래서 위로 세로 방향으로 배치된다.이번에 배운 것은 column은 세로축이 Main-axis로 변하고, 가로축이 Cross-axis로 바뀐다.align-items: normal(stretch..

1. 가용공간의 활용법1-1. Margin 여백화margin 으로 활용한 auto로 줘서 여백을 준다. 1-2. flex-grow 너비화가용공간을 같은 비율로 차지한다. basis가 지정되어있을 경우 basis + 가용공간(같은 비율)로 공간을 차지하게 된다.flex-basis의 관계없이 똑같은 너비를 가지고자 할 때는flex-basis:0, flex-grow:1  여기서 위와 같이 같은 너비를 가지게 하는 방법이 있다.콘텐츠의 width를 100%로 주는 것이다.flex-shrink:1 이라는 속성 때문에 같은 너비를 가지게 된다. 2. min-widthflex-shrink의 초기값은 1이다. 플렉스 컨테이너에서 플렉스 아이템이 줄어들지 않고 흘러넘치는 경우가 있다.그 이유가 무엇일까?flex-shri..

1. display: flexdisplay: flex가 적용된 요소로, 이 안에 있는 모든 자식 요소들이 플렉스 아이템이 된다.Flex Item(플렉스 아이템) : 플렉스 컨테이너의 자식요소로, 이 요소들은 플렉스 박스 모델에 따라 배치된다.2. Flex Container, Flex Items 안에 들어가는 것1-1. Flex Container(부모 요소)Justify-content : Main Axis 기준에서의 정렬Main Axis : 가로축부모 justify-content: center 를 준다고 해도 만약 자식요소가 margin 을 주게 되면 자체적으로 자식으로 인하여 자식 margin이 적용된다.align-items : Cross Axis 기준에서의 정렬Cross Axis : 세로축align-i..

1. em 이란?현재 요소의 컨텍스트 내에서 상위 요소의 폰트 크기를 기반으로 계산한다.이는 웹 디자인에서 유연한 크기 설정을 가능하게 하며, 폰트 크기 뿐만 아니라 마진, 패딩, 너비 등의 다른 속성도 적용할 수 있다. 2. em 의 특징상대적인 크기em은 절대적인 픽셀 값이 아닌 부모 요소의 글꼴 크기를 기준으로 계산된다.예를 들어, 부모 요소의 폰트 크기가 16px이라면, 1em은 16px 이다.계층적 적용em 단위는 계층적으로 상속하기 때문에, 상위 요소의 폰트 크기 변경이 하위 요소에 영향을 미친다.이를 통해 전체적인 디자인의 일관성을 유지할 수 있다.유연한 디자인em 단위는 반응형 웹 디자인에서 유용하게 사용한다.화면 크기나 사용자의 기본 설정에 따라 자동으로 크기를 조절 할 수 있어, 다양한..

1. 마진 병합마진 병합은 인접한 블록 레벨 요소의 수직 마진을 합쳐 더 큰 마진 하나만 적용하는 CSS 규칙이다. 이러한 것은 요소 간의 중복된 공간을 제거하고 레이아웃을 최적화 하며 시각적인 안정성을 제공한다.  마진 병합은 주로 부모 요소와 자식 요소 사이에서 나타나는데, 이는 상하로만 나타나게 된다.또한 형제 요소 사이에서도 마진 병합이 나타난다. 이 또한 상하진 마진만 병합이 된다. 2. 해결 방안1. inline-blockinline-block을 하게 되면 마진 병합이 나타나지 않는다. 2. padding, border부모 요소와 자식 요소 간의 마진 분리는 패딩 혹은 보더로도 가능하지만, 형제간의 마진 분리는 이 방법으로 되지 않는다. 3. table부모 요소와 자식 요소 사이에 table ..