HTML5

Programming Language/HTML

[HTML] HTML 태그로 라이브러리 지양하기 (with React)

웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..

Programming Language/HTML

기본중의 기본. Block vs Inline vs Inline-Block

Float를 연습해보는 시간을 갖던 중, 원하는 대로 요소들을 배치하지 못하고 있단 사실을 깨달았다. 이유를 나름대로 고민해봐서 내린 결론은... 시멘틱 태그들이 어떤 display를 가지고 있는지 확실히 모른다는 것이었다. 그런 의미에서 display의 block, inline, inline-block에 대해 짚고 넘어 가보려 한다. Block 기본적으로, 부모 요소의 너비(width)를 모두 차지하려고 한다. 그렇기에, 블록 레벨 요소들은 새로운 줄에서 시작하며, 너비와 높이, 상하좌우 마진을 설정할 수 있다. 블록 레벨 요소로는 헤딩 태그인 ~, , , , , , , , , , 등이 있다.(주로, 구조나 컨테이너의 역할을 한다.) Inline 기본적으로, 컨텐츠가 가지고 있는 영역만큼의 너비만을 차..

개발자참치
'HTML5' 태그의 글 목록