웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..
멋사 프론트엔드 스쿨 6기 과정 중 첫 프로젝트(HTML + CSS)를 하던 중, SEO도 고려할 것이라는 조건이 걸려 있어서 찾던 중 메타태그를 적절히 활용해야 접근성 측면에서 성능이 개선된다는 사실을 알았다. 우리는 흔히 html파일을 만들고 !+Tab만 누르면 기본적으로 위와 같은 html 기본 골격을 가진 자동완성을 이용하곤 하지만, head 내에 위치한 meta태그를 보며, 인코딩 방식이 UTF-8이고, 뷰포트를 장치 화면 너비에 맞게 설정한다라는 사실 외에 meta 태그에 대한 궁금증을 품어본 적이 없었던 것 같다. 프로젝트에서는 충분히 메타태그를 공부할 시간없이 구글링을 통해 open graph를 이용해 단순히 해결했지만, 프로젝트가 끝난 김에, 사용했던 메타태그를 기반으로 짧게나마 정리해보..
Float를 연습해보는 시간을 갖던 중, 원하는 대로 요소들을 배치하지 못하고 있단 사실을 깨달았다. 이유를 나름대로 고민해봐서 내린 결론은... 시멘틱 태그들이 어떤 display를 가지고 있는지 확실히 모른다는 것이었다. 그런 의미에서 display의 block, inline, inline-block에 대해 짚고 넘어 가보려 한다. Block 기본적으로, 부모 요소의 너비(width)를 모두 차지하려고 한다. 그렇기에, 블록 레벨 요소들은 새로운 줄에서 시작하며, 너비와 높이, 상하좌우 마진을 설정할 수 있다. 블록 레벨 요소로는 헤딩 태그인 ~, , , , , , , , , , 등이 있다.(주로, 구조나 컨테이너의 역할을 한다.) Inline 기본적으로, 컨텐츠가 가지고 있는 영역만큼의 너비만을 차..
우리는 흔히 티스토리와, 벨로그, 깃허브에서 글을 작성 시에 볼 수 있는 마크다운을 볼 수 있다. 개인적으로 깃허브의 README.md를 잘 만들어보고 싶어서, 인터넷 강의를 보고 실습했던 내용을 정리해보고자 한다. 마크다운(Markdown)이 뭐지? 🧐 웹 작성자를 위한 텍스트-HTML 형식 구문입니다. 마크다운을 사용하면 읽기 쉽고 쓰기 쉬운 일반 텍스트 형식을 사용하여 작성한 다음 구조적으로 유효한 XHTML(또는 HTML)로 변환할 수 있습니다. - 마크다운 공식사이트 정의 그대로, 글을 간편하게 작성할 수 있게 해주고 HTML이나 XHTML로 변환해주는 보조도구라고 할 수 있다. 마크다운을 작성하는 방법! ✏️ 제목(Header) #의 개수로 h1~h6까지 표현이 가능하다. # h1 ## h2 ..
