오늘은 4번의 프로젝트 동안 모두 사용했던 'Tailwind CSS'에 대해 정리해보려고 한다. 직접 사용하며 느꼈던 장점과 단점에 대해 적어보겠다. 📕 1. Tailwind CSS란? Tailwind CSS 공식문서에서는 '유틸리티 우선 프레임워크'라고 소개하고 있다. 부트스트랩과 비슷하게 'py-2' , 'text-white' , 'shadow-md' 등 Tailwind에서 미리 세팅한 유틸리티 클래스를 활용하여 CSS를 입히는 방식으로 HTML 코드 내에서 스타일링을 직접 할 수 있는 프레임워크다. '2023 JavaScript Rising Stars'에서는 작년 한 해 동안 자바스크립트 생태계 중 '깃허브 스타'를 많이 받은 순서를 공개하는데, Tailwind CSS는 20위를 차지했다. 20위라..
Styled-Components를 적용해 보기에 앞서, 📕1. Styled-Components란? 리액트 컴포넌트 안에 쉽게 CSS를 내장할 수 있도록 도와주는 도구. Styled-Components의 장점 • 우리가 알고 있는 CSS를 그대로 사용할 수 있음. • Style이 적용된 컴포넌트를 쉽게 만들 수 있음. •. modules.css 파일처럼 컴포넌트 안에 적은 스타일이 다른 JS 파일에 오염되지 않음. • 페이지 로딩시간의 단축 : 여기에 적은 스타일은 html 페이지의 태그에 들어가기 때문. •. css 파일을 생성하지 않아도 됨. Styled-Components의 단점 • 원래는 .css /. js 이렇게 구분하기 때문에 css파일이 어떤 건지 명확하게 구분할 수 있지만, styled-co..
📙HTML이란? • HTML은 웹페이지를 만들고 디자인하고 싶을 때 사용함. • Hypertext Markup Language의 약자로 여기서 마크업 언어는 "자료의 구조를 표현하기 위한 언어" 를 뜻함. • 내부엔 사이트 생성에 필요한 인코딩형식, 사이트제목, 필요한 CSS나 JS파일 등이 들어갈 수 있음. • 내부엔 실제 웹사이트에서 보여줄 글, 그림 등을 적어주는 곳. • body 태그에는 기본적으로 약간의 margin이 조금 있음. 그러므로 이런식으로 body 태그의 margin을 없애면 꽉 차게 됨. 📙 코드로 정리해보는 HTML 개념 제목 안녕하세요 버튼임 링크 항목1 항목2 Soondubu Front-end Developer 📙 박스를 활용한 레이아웃 구현 - 레이아웃을 만들고 싶으면 항상 ..
