개발하는 동그리

📝 블로그 작성 기본 구성안1. 포스팅 제목 예시“Tailwind CSS 완전 정복: 빠르고 유연한 유틸리티 퍼스트 스타일링 가이드”“Vue + Vite + Quasar에서 Tailwind CSS 100% 활용하기”“Quasar UI + Tailwind CSS 조합으로 효율적인 프론트엔드 개발하기”2. 글 구성 예시✅ 서론Tailwind CSS는 클래스 기반 유틸리티 스타일링 도구로, 빠르게 UI를 구성할 수 있는 강력한 프레임워크입니다. 본 글에서는 Tailwind CSS의 기본 개념부터, Vue.js, Vite, Quasar 환경에서의 실제 적용 방법까지 상세히 정리합니다. ✅ 1. Tailwind CSS란 무엇인가?Utility-first CSS란?기존 CSS 또는 Bootstrap과의 차이점장점..

Container (사용할 수 있는 속성 값) display : flex; flex-direction : (default)row, row-reverse, column, column-reverse frex-wrap : (default)nowrap, wrap (reverse 사용가능) ---> 화면에 꽉 차면 다음줄로 넘기는 여부 flex-flow : column wrap; justify-content : flex-start, flex-end, flex-center, space-around, space-evenly, space-between Item (지정할 수 있는 속성 값) order : 1; --> item의 순서 변경 가능 flex-grow : (default) 0; flex-shrink : (def..

CSS 는 무엇인가? CSS (Cascading Style Sheets)의 약자로 문서에 디자인을 입힐 때 사용하는 스타일 시트 언어다. CSS 가 필요한 이유? HTML에서 디자인을 입히는 것보다 CSS를 따로 구현해서 관리한다는 점은 유지보수 관점에서도 유리하고 스타일만 모아두었기 때문에 웹페이지를 경량화 할 수 있다. Ctrl + Shift + C 를 누르면 화면에 구현된 코드위치를 찾아 볼 수 있다. 혹은 궁금한 부분에서 스크롤 오른쪽 클릭하여 검사! 혹은 F12 를 눌러서 개발자 도구를 확인 하면 구조를 파악하기 수월하다. CSS 용어 정리 font-size : 24px ( 절대 단위 : px, pt ) ( 상대 단위 : %, em, rem, ch, vw, vh 등 ) * 상대 단위인 rem 이..

내용 HTML CSS Javascript 주요 기능 web site 뼈대 구성 (Structure) html 스타일 구성 기능 구현 (상호 작용) HTML은 위에 보이는 코드처럼 Structure를 구성하는 단계이다. 주로 제목과 내용 그리고 구성을 짜게 된다. 해당 문서가 HTML 문서임을 알리는 지시어 문서 전체의 틀을 구성하는 시작태그 문서의 메타데이터를 선언 문서의 제목으로, 브라우저를 실행했을 때 탭에 보여짐 문서의 내용을 담는 곳 ~ 숫자가 작을수록 큰 제목으로 표시된다. ex) 크게할 수 있음. 블록 태그로, 한줄을 독점할 때 사용함. 인라인 태그로 블록속에 삽입되어 블록의 일부로 사용되며, 컨텐츠의 크기만큼 공간을 차지함. unordered list, ordered list, 리스트 내의 ..