HTML,CSS(10)
-
CSS 프레임워크 비교 (Bootstrap, Material UI, Antd, Semantic UI , Tailwind)
TMI일수는 있지만, 필자는 웹에 관심을 갖게 된 게 CSS 라이브러리/프레임워크 덕분(?)이기도 하다. 대학생 때 처음 웹 관련 과목을 들었을 때 Bootstrap이라는 CSS 프레임워크를 처음 접했는데, HTML/CSS를 완전히 이해하지 못한 상태임에도 빠르게 결과물이 잘 나와서 자신감도 붙고 재미도 붙일 수 있었다. 물론 기본기도 중요하지만 CSS 라이브러리의 도움 없이 처음부터 모든 걸 직접 만들어야 했다면 중간에 좌절했을 수도 있을 거란 생각이 든다. 또 여러 CSS 라이브러리를 쓰다 보면 컴포넌트에 어떤 props가 있으면 좋을지, 디자인 패턴은 어떻게 가져가면 좋을지에 대한 안목(?)도 생기게 되는 것 같다. 그래서 새로운 미니 프로젝트를 할 때는 항상 새로운 CSS 라이브러리/프레임워크를 ..
2022.02.16 -
Block Formatting Context (BFC)
BFC란 용어는 들어보지 못했어도 아마 html/css로 레이아웃 작성을 해봤다면 이미 BFC의 원리는 알고 있을 가능성이 크다. Normal Flow 일단 html에 작성된 요소들의 위치를 정하는 방법은 여러 가지 있는데, 일반적인 상황에서 각각의 요소들이 배치되는 순서를 normal-flow(일반적 흐름) 라고 한다. 이런식으로 블록 요소들은 기본적으로 위에서 아래로 배치되고 인라인 요소들은 왼쪽부터 시작해 오른쪽으로 배치된다. BFC & IFC normal flow에는 두 가지 배치 방식이 있는데 그중 한 가지가 Block Formatting Context(BFC) , 그리고 Inline Formatting Context(IFC) 다. 전자는 영역에 포함된 요소들을 세로로 배치할 수 있도록 도와주는..
2022.02.15 -
CSS 방법론 - BEM
이번 포스트에서는 CSS 방법론중 하나인 BEM(Block Element Modifier)에 관해서 알아보겠습니다. CSS방법론이라고 하면 뭔가 거창해 보일수도 있지만 그냥 클래스네임을 짓는 여러가지 방법들이라 볼수 있고 BEM은 그 여러 방법중에 자주 채택되는 방법중 하나 입니다. 사실 요즘은 클래스 이름을 아예 신경쓰지 않도록 CSS Module이나 Styled Component 등을 더 많이 사용해서 잘 안쓰이긴하지만... 아무튼 정해진 표기법이 있다면 팀원들끼리 의사소통을 원활하게 할수 있고 또 유지보수도 더 쉽게 할수 있다는 장점이 있겠죠? 만약 다른 프로젝트에 참여하게 된다해도 BEM으로 작성된 코드를보며 어떤 요소들이 어떻게 연결되어있고 작동 하는지 더 쉽게 이해할수도 있습니다. BEM은 B..
2022.02.14 -
CSS Position (static, relative, absolute, fixed)
본 포스트는 예전에 다른 블로그에 올렸던 포스트를 수정해서 다시 올렸습니다 Position 속성은 html문서내 요소를 배치하는 방법을 지정해주는 속성으로 static, relative, absolute, fixed 그리고 IE에서는 지원하지 않는 sticky 이렇게 5가지의 값을 줄수있고 기본값으로는 static으로 설정됩니다. 오늘은 sticky를 제외한 4가지 속성을 구체적으로 살펴보면서 각자의 특성을 이해해보도록 하겠습니다. Static position: static 앞에서 말했듯이 포지션 속성(position property)의 기본값입니다. 다른 속성보다 눈에 익숙하지않는 이유는 기본값이라 굳이 명시를 하지 않기 때문입니다. static 요소를 만들면 일반적인 흐름을 (normal flow) ..
2022.02.13