Im Bay

Bootstrap html 코드 자동생성 ! 누르고 엔터 부트스트랩 적용하기 head 태그 블록 안에 title 태그 바로 밑에 붙여 넣기 body 태그 끝나는 줄 바로 위에 아래 코드넣기 ... 부트스트랩의 모든 속성은 클래스 예약어(class=” “)로 지정된다. 버튼 버튼 종류 Primary Secondary Success Danger Warning Info Light Dark Link 레이아웃 화면 너비에 따른 중단점 xs - 576px미만 sm - 576px이상 md - 786px이상 lg - 992px이상 xl - 1200px이상 예시 100% 너비: small 중단점까지 100% 너비: medium 중단점까지 100% 너비: large 중단점까지 100% 너비: extra large 중단점까..

Bootstrap 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크 Tailwind 많은 utility 클래스로 이루어진 CSS 프레임워크 HTML 요소의 class 속성에 설정하는 것만으로 스타일링 가능 공식 사이트: https://tailwindcss.com/ tailwind 설치 및 실행 확인 https://tailwindcss.com/docs/installation tailwind 설치했는데 CSS가 적용이 안될 때! cmd 창에서 yarn dev 를 다시 실행해보자 tailwind의 CSS 적용 방식 html에서 이런 식으로 class 안에 꾸미는 코드를 안에 넣으면 output.css에 CSS 코드가 자동으로 추가된다! 코드가 자동 추가된 output.css .bg-sky-700..

CSS(Cascading Style Sheets) HTML이나 XML로 작성된 문서의 전반적인 레이아웃과 스타일을 정의하는 스타일 시트 언어 HTML은 문서의 구조 정의, CSS는 문서의 디자인과 스타일 담당 CSS의 역할 레이아웃 조정 텍스트 스타일링 색상 및 배경 관리 애니메이션 및 전의 효과 반응형 디자인 CSS 선택자 HTML 또는 XML 문서에서 스타일 적용할 요소를 선택하는 방법을 지정하는데 사용 전체 선택자(*) 모든 요소를 선택 ex) * { margin: 0; } 요소 선택자 특정 HTML 요소 선택 (태그) ex) p { color: blue; } 클래스 선택자(.) 특정 클래스를 가진 요소 선택 ex) .highlight { background-color: yellow; } ID 선택..

Semantic Tag 시맨틱 태그는 포함된 컨텐츠의 특정 의미를 정의하고 목적을 갖는 태그 block element이면서 레이아웃을 설계하기 위해 존재 시맨틱 태그의 요소 뉴스 기사나 블로그 같은 독립된 contents 표시 문서 영역 구성, H1~H6와 함께 사용 등 form 태그 form 태그 안에 input 태그를 두어서 사용자로부터 정보를 입력받아 서버로 보내는 역할을 담당 form 태그가 안 맞거나 없으면 서버로 정보를 보낼 수 없음 중첩적으로 사용 불가, 하나의 웹페이지에 하나의 form 태그를 두는 것이 일반적 get 방식 전송 name속성1=값1&name속성2=값2&name속성3=값3 의 형태 속성 값 각 태그 식별: id, name, class name 속성: input, textare..

HTML5 웹 프로그래밍 언어이며 텍스트, 하이퍼링크, 애플리케이션 표현 및 제공하는 언어 웹 페이지에서 기본 구조를 담당한다. HTML5 기본 형식 html5 문서임을 나타냄 컨텐츠가 한글로 작성되었음을 의미 콘텐츠 영역 vscode에서의 html 작성 vscode에서 html 기본 자동 양식 완성 ! 를 누르고 엔터치면 html 양식 자동 완성 된다. 의 n개 자동 생성 ul>li*n 후 엔터