FrontEnd/CSS

요소를 배치하는 방법의 차이

❗️요소를 배치하는 방법에는 5가지가 있다. Static Relative Fixed Absoulte Sticky 각각의 특성을 알고 차이점을 알아보자 ❗️Static position 속성을 별도로 지정해주지 않으면 기본값인 static이 적용됩니다. position 속성이 static인 요소는 HTML 문서 상에서 원래 있어야하는 위치에 배치됩니다. 이 말은 요소들이 HTML에 작성된 순서 그대로 브라우저 화면에 표시가 된다는 것을 뜻하며, 따라서 top, left, bottom, right 속성값은 position 속성이 static일 때는 무시된다. 예를 들어, 다음과 같이 요소 아래에 3개의 요소가 있다면 맨 위에 첫 번째 요소, 중간에 두 번째 요소, 제일 아래에 세 번째 요소가 나란히 순서대로 ..

display:flex를 사용하는 이유

📌 " display:flex를 사용하는 이유 일반적으로 웹 페이지의 레이아웃은 CSS의 display, float, position 등과 같은 속성을 사용해 구현합니다. 하지만 이 속성을 사용하면 구현 방법이 복잡하고 레이아웃을 표현하는 데 많은 한계가 있습니다. 기존 CSS 의 속성으로는 구현이 힘들고 어려운, Js 의 도움을 받아 개발 처리를 통해 구현해여하는 레이아웃등이 있다. display:flex는 이 때 레이아웃을 좀 더 편하게 잡기 위해서 만들어진 css 속성이다. 일일이 float, inline-block을 도배하는 수고를 덜 수 있다. Flex의 속성을 이용해 수평, 또는 수직으로 레이아웃을 쉽게 구성할 수 있다. 또한 요소들의 크기나 위치를 쉽게 잡을 수 있다. flex는 컨테이너와 ..

CSS 기술 정리

브라우저 별로 스타일이 다른 문제를 어떤 접근 방법으로 해결하나요? 문제와 그 문제를 일으키는 브라우저를 식별한 후, 해당 브라우저가 사용 중일 때만 로드되는 별도의 스타일 시트를 사용합니다. 하지만 이 방식을 사용하려면 서버사이드 렌더링이 필요합니다. 이미 이러한 스타일링 문제를 처리하고 있는 Bootstrap 같은 라이브러리를 사용합니다. autoprefixer를 사용하여 벤더 프리픽스를 코드에 자동으로 추가합니다. Reset CSS 또는 Normalize.css를 사용합니다. 기능이 제한된 브라우저의 페이지는 어떻게 처리하나요? 어떤 기술/프로세스를 사용하나요? 우아한 퇴보 - 최신 브라우저를 위한 어플리케이션을 구축하는 동시에 그것이 구형 브라우저에서도 계속 작동하도록 하는 구축방법. 점진적 향상..