과제
본인이 살고있는 동네를 소개하는 웹사이트를 만들어오는 실습을 했었는데,
영상을 다루는 작업을 하고 싶어서 영상물을 가져와 구현했고,
전에 알게된 Swiper 라이브러리를 적용하여 이미지 및 소개글 캐러셀을 구현했다.
좀 허접해보이지만... 하루만에 해오는 과제 치고는 빡셌던것 같다..??
position 속성
HTML요소의 위치 지정 방식을 정의하는 속성
기본값은 static이고, 문서 흐름에 따라 요소가 배치되는 것이 일반적입니다.
1. relative값을 적용해 문서흐름에 따라 배치된 자기자신을 기준으로 이동시킬 수도 있고,
2. absolute값을 활용해 가장 가까운 위치지정 부모요소에 대해 이동시켜 배치할 수 도 있습니다. 여기서 위치지정요소란 static값(기본값)을 제외한 값이 적용된 element를 의미합니다.
3. fixed는 엘리먼트를 뷰포트에 대해 고정시키는 역할을 하고,
4. 마지막으로 sticky는 특정 위치에서 relative에서 fixed 특성으로 변환되는 역할을 합니다.
display
display 속성은 엘리먼트가 렌더링 되는 방식을 결정합니다.
속성값으로는 block, inline, inline-block, flex 등이 있습니다.
각각에 대해 설명해보자면, block은 해당 줄의 전체 너비를 차지하고 전후로 개행이 적용되어 배치됩니다.
그에 반해 inline은 필요한 공간만 차지하게 하고, 같은 줄에 다른요소와 함께 배치됩니다.
하지만 높이나, 위아래로 마진,패딩은 적용되지 않습니다.
inline-block은 둘의 특성이 섞여있습니다. 즉, 다른요소와 같은줄에 배치되되, 높이,여백도 설정가능합니다.
flexbox
플렉스 박스는 내부 요소들을 정렬 및 배치하며 관리하는 컨테이너 역할을 합니다.
플렉스 박스를 사용하는 이유는 우선 정렬, 순서변경에 용이하고 유연한 특성을 지니고 있어 아이템이 차지하는 공간을 유연하게 조절할 수 있습니다. (조절하는 속성으로는 flex-grow, flex-shrink, flex-basis 등이 있습니다.)
이처럼 유연한 특성을 지녀 반응형 레이아웃 구현에 효과적이며, 무엇보다 코드가 간소화되어 가독성과 유지보수 면에서도 좋습니다.
