display 속성에 대해 아는 만큼 설명해주세요.
display 속성은 엘리먼트가 렌더링 되는 방식을 결정합니다.
속성값으로는 block, inline, inline-block, flex 등이 있습니다.
각각에 대해 설명해보자면, block은 해당 줄의 전체 너비를 차지하고 전후로 개행이 적용되어 배치됩니다.
그에 반해 inline은 필요한 공간만 차지하게 하고, 같은 줄에 다른요소와 함께 배치됩니다.
하지만 높이나, 위아래로 마진,패딩은 적용되지 않습니다.
inline-block은 둘의 특성이 섞여있습니다. 즉, 다른요소와 같은줄에 배치되되, 높이,여백도 설정가능합니다.
flex박스에 대한 설명도 ----
페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들고 싶을때, CSS 설계방법은?
=> 비율 기반의 레이아웃을 만드는 것입니다. 대표적으로 Viewport단위(vw, vh) 등을 사용하여 창의 크기에 따라 요소의 크기도 변화시킬수있습니다.
=> 또한 비디오 및 이미지 컨테이너로 활용하는 트릭중 하나인 padding-top을 사용하여 비율을 설정하는 것이 있다.
aspect-ratio: 16/9; /* 최신브라우저에서 해당 속성 사용하여 16:9 유지 가능 */
padding-top: 56.25%; /* 16:9 비율로 높이 설정 (9/16)*100% */position 속성에 대해 아는만큼 말해보세요
HTML요소의 위치 지정 방식을 정의하는 속성입니다.
기본값은 static이고, 문서 흐름에 따라 요소가 배치되는 것이 일반적입니다.
1. relative값을 적용해 문서흐름에 따라 배치된 자기자신을 기준으로 이동시킬 수도 있고,
2. absolute값을 활용해 가장 가까운 위치지정 부모요소에 대해 이동시켜 배치할 수 도 있습니다. 여기서 위치지정요소란 static값(기본값)을 제외한 값이 적용된 element를 의미합니다.
3. fixed는 엘리먼트를 뷰포트에 대해 고정시키는 역할을 하고,
4. 마지막으로 sticky는 특정 위치에서 relative에서 fixed 특성으로 변환되는 역할을 합니다.
flexbox에 대해 설명해보세요
플렉스 박스는 내부 요소들을 정렬 및 배치하며 관리하는 컨테이너 역할을 합니다.
플렉스 박스를 사용하는 이유는 우선 정렬, 순서변경에 용이하고 유연한 특성을 지니고 있어 아이템이 차지하는 공간을 유연하게 조절할 수 있습니다. (조절하는 속성으로는 flex-grow, flex-shrink, flex-basis 등이 있습니다.)
이처럼 유연한 특성을 지녀 반응형 레이아웃 구현에 효과적이며, 무엇보다 코드가 간소화되어 가독성과 유지보수 면에서도 좋습니다.
