FrontEnd/CSS3 flexbox vs inline block Flexbox를 사용하여 inline 요소를 표현하는 것과 display: inline-block을 사용하여 inline 요소를 표현하는 것의 성능 차이점을 알아보자특성Flexbox (display: inline-flex)Inline-Block (display: inline-block)목적컨테이너 내의 항목 배치 및 정렬자체 크기 조정 및 다른 요소와 나란히 배치레이아웃 가능 범위강력한 정렬, 정당화, 순서 변경 등제한적 (기본적인 정렬 및 마진만 가능)부모 요소의 속성 상속부모 요소의 속성을 상속받으며, 개별 설정이 가능함각 요소는 독립적으로 설정됨정렬 기능 지원수평 및 수직 정렬 지원수평 정렬만 가능속성 설정 유연성flex-grow, flex-shrink, flex-basis등 각 요소별 속성을 지.. 2024. 7. 18. Stacking Context? Stacking Order? HTML에서 각 요소 레이어가 화면에 쌓이는 순서와 쌓이는 맥락(?)을 의미하는데, 아래 예제가 가장 유명한 듯 하다 Red Green Blue 주석처리한 opacity를 활성화하면 이렇게 된다. stacking order인지 context떄문인지는 모르겠다. 다른 예제로 z-index를 활용한 예제가 있는데, 보다 명확하게 이해할 수 있을 것 같다. (적어도 z-index를 활용한 부분에 대해서만큼은) Division Element #1 position: relative; z-index: 5; Division Element #2 position: relative; z-index: 2; Division Element #4 position: relative; z-index: 6; Division Eleme.. 2020. 11. 5. CSS 전처리기의 종류와 장단점 CSS 전처리기란? 간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다. 내가 CSS를 보다 쉽게 작성할 수 있게 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게 CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게 CSS 전처리기 프레임워크의 종류 Sass Less Stylus 왜 전처리기를 사용해야 하나 개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문 너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문 CSS 전처리기 사용시 장단점 장점: CSS 코드를 여러 파일로 나눠 유지보수성이 향상 CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생.. 2020. 11. 5. 이전 1 다음 반응형
