🔗 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..

🔗 수평 / 수직 정렬(align)text-align : 2행 이상부터 사용 가능vertical-align : inline, inline-block, table 요소에서만 사용 가능margin/padding : 편한 방법이지만 정확하게 맞추기 힘듬line-height : 부모와 자신의 높이 조절position : margin/padding과 동일하게 정확하게 맞추기 힘듬griboxflexbox의 정렬 속성(justify-content, align-items, etc...) : 가장 사용하기 좋음📘 가운데 정렬 예시 1.box1 { border: 2px solid tomato; height: 100px;}.box2 { border: 2px solid teal; text-align:..

🔗 가상 선택자::before : 요소 앞에 생성::after : 요소 뒤에 생성...before 예시after 예시before/after 예시📘 가상 선택자 사용 예시...로그인회원가입마이페이지사이트맵 🔗 transition위치 속성 : top, left, right, bottom크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, radius, color style색상 속성: color, background-color투명도 : opacity형태 : transform(기울기, scale).box { width: 100px; height: 100px; background-color: orange; transiti..

🔗 overflow 속성콘텐츠 초과 처리/* default, 콘텐츠 크기 부모 요소보다 커지면 잘리지 않고 넘침 */overflow: visible;/* 초과된 콘텐츠는 안보이게 처리함 */overflow: hidden;/* 스크롤 바를 내려 초과된 콘텐츠를 볼 수 있도록 함 */overflow: scroll;/* 자동으로 넘치는 경우 스크롤 바를 만들어줌 */overflow: auto;🔗 object-fit 속성img 태그 이미지 배치/* default, 콘텐츠(이미지)가 컨테이너(img 태그)를 채운다 */object-fit: fill;/* 본래의 이미지 크기를 유지 */object-fit: none;/* 상하/좌우 중 먼저 이미지가 컨테이너에 맞닿을 때 크기로 맞춰줌 */object-fit: c..

🔗 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: 내용물의 크기🔗 ..

🔗 CSSCascading Style SheetCascading : 중첩, 계단식, 흐른다이전 스타일에 새 스타일을 적용하면 새 스타일이 적용됨 🔗 적용법head 태그 안에 style 태그로 적용inline 태그 : html 태그 안에 style 속성으로 적용 -> 간단하게 스타일을 적용할 때별도의 CSS 파일로 만들어서 import 하는 방법 -> 스타일이 복잡할 때 제목태그 H1입니다. 제목태그 H2입니다. /* 2번 방법: inline 태그 이용 */ 제목태그 H3입니다.   🔗 선택자🧩 전체 선택자 : ** { color: brown;} 🧩 태그 선택자 : HTML 태그명 (ex: h1, p)h1 { color: tomato;}/* 태그를 여러개 선택..

📍 웹 브라우저가 서버에 데이터를 전송하는 방법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..