1. line-height한 줄당 높이 설정을 의미하며, 기본 값은 line-height: normal 이다.여기서 주의할 점은 지정된 font-family 즉, 폰트 크기에 따라서 달라진다. # 처음 스타일을 정할 때, font-family에 따라 달라지는 요소가 많기에, 미리 폰트를 지정하고 나머지 스타일링을 해야한다. 1-1. 내부 텍스트를 세로 중앙 정렬(고정 px)여기서 주의할 점은 한 줄일때만 사용해야한다.!height = line-height로 동일하면 가운데 정렬이 된다. 2. 일반적인 문단의 경우는 ( 상대적 숫자로만 지정을 하게 된다.) font-size가 변경 되었고, line-height가 고정이 되면 유지보수 차원에서 좋지 않다.font-size를 고정으로 주는 것이 아닌, 변경에..

1. max-content요소의 컨텐츠가 완전하게 표시되도록 필요한 최대 크기를 의미한다. 즉, 콘텐츠가 줄바꿈 없이 전부 표시될 수 있을 만큼의 넓이를 가지게 된다.2. min-content요소의 콘텐츠가 줄바꿈 없이 최소한으로 줄어들 수 있는 크기를 의미한다. 이때, 텍스트 같은 경우는 단어들이 줄바꿈 없이 최소 크기로 줄어든다. 하지만 줄바꿈이 필요한 경우, 줄바꿈이 발생하며 최소한의 공간을 차지하게 된다.3. fit-content요소의 크기를 내부 콘텐츠에 맞추지만, 그 크기는 최소 크기(min-content)와 최대 크기(max-content) 사이에서 제한을 하게 된다.즉, 컨텐츠가 너무 커지지 않도록 하면서도, 가능한 한 요소가 콘텐츠를 완전히 담을 수 있게 조절된다.fit-content는..

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. 값값(value)은 식(표현식 expression)이 평가(evalute)되어 생성된 결과를 말한다.변수는 하나의 값을 저장하기 위해 확보된 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 한다. 따라서 변수에 할당되는 것은 값이다. // 변수에는 10 + 20이 평가되어 생성된 숫자 값 30이 할당된다.let sum = 10 + 20; 위 예제의 sum 변수에 할당된 것은 10 + 20이 아니라 10 + 20이 평가된 결과인 숫자 값 30이다. 즉, 변수 이름 sum이 기억하는 메모리 공간에 저장된 것은 10 + 20이 아니라 값 30이다. 따라서 10 + 20은 할당 이전에 평가되어 값을 생성해야 한다.다양한 방법으로 값을 생성할 수 있지만, 가장 기본적인 방법은 리터럴..