🔗 Emmet 문법Emmet 문법은 HTML, CSS 등의 코드를 더 빠르게 작성할 수 있도록 돕는 기능Emmet은 축약된 문법을 통해 코드를 생성하며, VSCode를 비롯한 일부 IDE에서는 기본적으로 활성화되어 있음 🫧 기본 요소 생성div:p:🫧 형제 요소(+)div+p+span:🫧 상위 요소로 이동(^)div>p>span^h1: 🫧 한번에 여러개의 요소 생성(*)ul>li*3: 🫧 id와 class가 추가된 요소 생성(#,.)div#header:div.container:div#id.class1.class2:🫧 속성 추가([속성:"값"])a[href='#']:img[src='img.jpg'][alt='image']:🫧 넘버링($)u..

Tailwind란?HTML을 떠나지 않고 빠르게 빌드하는 CSS 템플릿 Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com 🧰 Raw html에서 tailwind 사용법head 태그 안에 아래 코드를 넣어주면됨 🚀 다른 곳에서 tailwind 사용하는 방법 Installation - Tailwind CSSThe simplest and fastest way to get up and runni..

🔗 display 속성display: none - 안보이게, 공간 차지도 없어짐visibility: hidden - 안보이게, 공간 차지는 유지됨block: 한줄 차지, 줄바꿈이 됨div, h1~h6, p, hr, ol, ul, li, table, forminline: 콘텐츠 크기만큼 너비 차지, 줄바꿈 안됨span, a, img, text 속성(b, small, ins, etc...), input, labelinline-block: inline이면서 너비/높이 확보 가능🔗 box model모든 레이아웃(배치)은 박스모양으로 가능4가지 박스 모델 구성 요소margin: 다른 요소와의 간격, border: 테두리선의 굵기,padding: 내부 요소와 테두리와의 간격, content: 내용물의 크기🔗 ..

📍 웹 브라우저가 서버에 데이터를 전송하는 방법form 태그 통신 : GET/POST 메소드웹 브라우저 주소줄을 이용한 통신 : GET 메소드 - 하이퍼링크 : GET 메소드JavaScript를 이용한 통신 : fetch, ajax 함수, axios 함수, etc... 🔗 HTTP GET 방식// localhost(도메인) = 127.0.0.1(ip)http://localhost:3000/login?id=admin&pw=1234http : 통신규약(프로토콜), Scheme:// : 구분자localhost(127.0.0.1) : 서버 주소(ip), 내컴퓨터가 localhost(예약어)3000 : 포트번호, 프로그램마다 사용하는 인터넷 번호/login : 경로, 프로그램안의 경로? : 구분자(쿼리문 시작..

🔗 HTML1. 태그Opening Tag(여는 태그) - Attributes(속성) : key / value 형태이며 값이 없는 attribute도 있음Content(내용)Closing Tag(닫는 태그) - 2. HTML 구성 : 문서가 HTML로 작성됐음을 밝히는 메타 태그 : HTML 문서의 루트 : 웹 사이트의 제목 : 사이트에 사용될 CSS 스타일시트, 자바스크립트 파일 등을 불러옴 : 문서 한정으로 정의된 CSS 스타일을 담을 수 있는 요소 : 문서 한정으로 정의된 자바스크립트를 담아 불러올 수 있는 요소 🔗 Body제목 ~ 본문 : Paragraph : line-break: horizontal line : 하이퍼 링크, : Unordered, Ordered List 태그 : pre-fo..