안녕하세요, 성조입니다.프론트엔드를 개발하다 보면 흔하게 사용되는 CSS 프레임워크인 Tailwind CSS에 대해 포스팅하는 시간을 가져보려 해요.Tailwind CSS가 가독성 규칙이 좋지 못해서 추천받지 못하는 경우도 있지만, CSS감이 부족한 저에게는 많은 도움을 주고 있는 CSS 프레임워크입니다 😂 ※ 해당 포스트는 학습을 기록하기 위해 작성된 게시물로 다소 부족한 정보를 담고 있을 수 있습니다. 요즘 Nextjs에서는 Tailwind CSS 설치 및 설정을 초기 프로젝트 세팅에서 같이 설치하는 경우가 있다.만약 Tailwind CSS 패키지를 초기에 설치를 하지 않았다면 다음과 같이 프로젝트 폴더에서 Tailwind CSS를 설치할 수 있다. 1. Tailwind CSS 설치 및 설정# 프로..
안녕하세요. 성조입니다. 이번 포스팅은 HTML과 CSS를 활용해서 가볍게 하단에 고정된 메뉴바를 만들어보려고 해요. 만들게 된 이유는 티스토리에서 포스팅하다 보면 미리 보기, 맞춤법, 글감 검색, open source ~~ 임시저장 완료 같은 버튼이 있는 것을 보고 그냥 저런 기능도 가볍게 연습 삼아 만들면 좋겠다 싶어서 만들게 됐습니다. 예시 이미지 HTML 코드 메뉴 1 메뉴 2 메뉴 3 CSS 코드 .menu { background-color: #f2f2f2; padding: 10px; position: fixed; width: 100%; bottom: 0; left: 0; } .menu-details ul { list-style-type: none; margin: 0; padding: 0; te..
안녕하세요 성조입니다. 평소에 CSS를 작업할 일이 생기면 필요한 태그들을 필요할 때 찾아서 사용하고 따로 복습하지 않아서 향후에 동일한 것들을 사용할 때 기억나지 않는 경우가 종종 있었습니다. 이번 포스팅을 시작으로 최대한 많은 기억을 남길 수 있도록 포스팅을 진행하면 좋을 것 같습니다. INDEX 1. CSS란? 2. CSS의 특징과 장단점 3. CSS구조 CSS란? "Cascading Style Sheets"의 약자로 CSS로 불린다. 이런 CSS는 HTML 또는 마크업 언어로 작성된 문서들이 웹상에 표현될 때 텍스트 색상, 글꼴, 스타일, 문단 간격, 크기, 배치 방법, 이미지, 레이아웃 설계 등 여러 가지를 제어하는데 사용되는 스타일 시트 언어이다. HTML로 웹 페이지의 뼈대와 같은 전체 설계..
