1. wrapper vs l_wrapper우리는 과제를 할 때 wrapper 보단 l_wrapper를 자주 사용했다. 그 이유는 레이아웃을 잡을때, header, main, footer 등으로 큰 레이아웃을 잡고, 그 아래 하위로 l_wrapper로 각 시멘틱 태그 아래 넣어주어 전체적인 레이아웃을 틀을 잡았었다.하다보니 l_wrapper와 wrapper를 나누어 사용할 때가 있었다. 이 둘의 차이점은 무엇일까? wrapper : 이는 레이아웃 클래스가 아니고, 공공재 또한 아니면 그저 전체적으로 크게 묶을 때 사용한다. 예를 들면 아래와 같은 이미지를 만들때, l_wrapper가 아닌 wrapper로 전체적으로 감싸고 그리고 하위에 상세하게 레이아웃을 잡는 것이다.  l_wrapper : 이는 공공재,..

1. index란?우선 순위를 주는 속성이며, 웹페이지에서 요소들이 서로 겹칠 때 어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 보일지 정할 수 있다. z-index는 단독으로 사용 불가능flex-items는 단독으로 사용 가능position로 가능하다. -> z-index를 발동시키는 조건은 position 초기값인 static만 아니면 된다.absolute, relative, fixed, sticky로 설정된 요소에 적용 가능하다.px가 아닌 숫자로 입력해야하며, 숫자가 크면 클수록 우선순위로 둔다.z-index는 음수 값을 가질수도 있다. 음수 값이 지정된 요소는 양수 값이 있는 요소들보다 뒤에 위치하게 된다. 예를 들어 z-index: 1은 대부분의 다른 요소들보다 뒤쪽에 위치하게 만든다.즉, 스테..

1. position: absoluteposition: absolute는 가장 가까운 position: relative, absolute, fixed 또는 sticky가 적용된 조상 요소를 기준으로 한다. 만약 그러한 요소가 없다면, 뷰포트를 기준으로 한다.제공받는 컨테이닝 블록의 가용공간을 너비, 높이 개념으로 늘리는 것이다. left: 0, top: 0, right: 0, bottom: 0 이렇게 하면 가용공간을 늘리기 때문에 margin: auto가 가능하여 정렬이 가능하다. 하지만 이는 요소의 가로 세로 크기가 지정이 되어있을 때만 유효한다.  또한 이는 단축속성이 있는데,inset 0 0 0 0; 이며 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽 과 같이 padding, marigin의 단축속성과 같은..

1. aspect-ratioCSS에서 요소의 가로 세로 비율을 지정하는 속성이다. 이 속성을 사용하면, 요소의 크기를 동적으로 조정할 때도 가로와 세로의 비율이 일정하게 유지되도록 한다. 2. 장점이는 유연한 레이아웃으로, 비율을 고정해두면 다양한 화면 크기에서 일관된 디자인을 유지할 수 있다.미디어 요소, 이미지, 비디오 등에서 특정 비율을 유지해야 할 때 유용하다.즉, 콘텐츠가 로드되기 전에도 안정적인 레이아웃을 유지할 수 있다. 3. 예시div { aspect-ratio: 16 / 9;} 위 코드는 div 요소의 가로 세로 비율을 16:9로 설정이 된다. 즉, 너비가 160px이면 높이는 90px로 너비로, 너비가 320px이면 높이는 180px로 조정이 된다. 이 비율은 요소의 크기가 변하더라도..

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는..