목록⛳️ 패스트캠퍼스 (10)

개발을 해라

패스트캠퍼스 - 프론트엔드 종합반 Ch8. CSS 속성 정리

01강~10강까지 정리 박스모델 태그의 경우, 대표적인 인라인 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 글자를 쓸 경우, 너비는 콘텐츠의 크기만큼 자동으로 늘어나며 그 이상으로 늘어나지 않는다. 높이의 경우 콘텐츠의 크기만큼 늘어나며 그 이상으로 늘어나지 않는다. 레이아웃을 작업하는 용도가 아니라 글자를 제어하는 용도이므로 인라인 요소는 가로, 세로 사이즈를 본질적으로 구현할 수 없다. 태그의 경우, 대표적인 블록 요소! 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 글자를 쓸 경우, 너비는 부모의 요소 크기 만큼 자동으로 늘어난다.(최대한 늘어날 수 있는 구조만큼 늘어난다) 높이의 경우 콘텐츠의 크기만큼 늘어나며 그 이상으로 늘어나지 않는다. max-wi..
⛳️ 패스트캠퍼스 2023. 2. 18. 16:57
패스트캠퍼스 - 프론트엔드 종합반 Part2. Ch 1. Node.js 정리

Part 2. JavaScript Essentials Node.js는 프로그래밍 언어이다. - chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 (프로그래밍 언어가 동작하는 환경) - 배워야하는 이유 : 컴퓨터를 제어하는 걸 배우는 것. 브라우저에서 동작하는 웹페이지를 제작할 때 컴퓨터에서 수정한다. 컴퓨터에서 다양한 역할을 수행하기 위해 Node.js의 도움을 받아야 한다. 웹 브라우저에서는 HTML, CSS, JS 만 동작한다. 컴퓨터에서 여러 모듈을 설치해 도움을 받으며 개발을 해야한다. Node.js 환경에서 도움 받은 내용들을 HTML, CSS, JS로 변환해야한다. NVM 설치 NVM은 Node Version Manager의 약자이다. google에서 nvm 설치..
⛳️ 패스트캠퍼스 2023. 2. 17. 18:35
패스트캠퍼스 - 프론트엔드 종합반 CH 7. 선택자, 가상클래스 선택자 우선순위 정리

CSS 선택자 * { } - 모든 요소를 선택 ABC { } - 태그 이름이 ABC인 요소를 선택. .ABC { } - class 속성의 값이 ABC인 요소 선택. #ABC { } - id 속성의 값이 ABC인 요소 선택. ABCXYZ { } - 선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 ABC > XYZ { } - 선택자 ABC의 자식 요소 XYZ 선택. ABC XYZ { } - 선택자 ABC의 하위 요소 XYZ선택. '띄어쓰기'가 선택자의 기호! ABC + XYZ { } - 선택자 ABC의 다음 형제 요소 XYZ 하나를 선택 ABC ~ XYZ { } - 선택자 ABC의 다음 형제 요소 XYZ 모두를 선택. CSS 가상 클래스 선택자 ABC:hover { } - 선택자 ABC 요소에 마우스 커..
⛳️ 패스트캠퍼스 2023. 2. 16. 15:53
패스트캠퍼스 - 프론트엔드 종합반 CH 7. CSS 개요 - 선언 방식 정리

CSS 선언 방식은 총 4가지로 나뉜다. 1. 내장 방식 - 위의 코드 처럼 의 내용으로 스타일을 작성하는 방식 2. 인라인 방식 - 위의 코드처럼 요소의 style 속성에 직접 스타일을 작성하는 방식(선택자 없음) - 유지보수가 힘들다. 3. 링크 방식 - 위의 코드처럼 로 외부 CSS문서를 가져와서 연결하는 방식 - 이렇게 보게된다면 해당 연결은 병렬연결임을 알 수 있다. 4. @import 방식 여기서 main.css 파일은 @import url("./box.css"); div { color: red; margin: 20px; } - CSS의 @import 규칙으로 CSS 문서 안에서 또 다른 CSS 문서를 가져와 연결하는 방식 여기서 box.css파일은 .box { background-color:..
⛳️ 패스트캠퍼스 2023. 2. 13. 21:38
패스트캠퍼스 - 프론트엔드 종합반 CH 6. HTML 핵심 정리

블록요소(레이아웃 작업시 많이 사용) 종류 - div - h1~6 - p - ul - li - input (블록, 인라인 모두 해당) 인라인(글자)요소 종류 - img - a - span - br - label - input (블록, 인라인 모두 해당) 여기서 value는 미리 입력된 값(데이터) 만약 value가 아닌 placeholder이 쓰였다면 사용자가 입력할 데이터의 힌트 disabled가 쓰였다면 입력요소 비활성화 APPLE type="checkbox"는 체크를 할 수 있는 박스 모양이 나온다. label은 인라인 요소이며 어떤 항목에 체크를 했는지 알 수 있다. type="checkbox" 옆에 checked가 쓰인다면 처음부터 체크되어 나오게 된다. APPLE Banana radio는 사용..
⛳️ 패스트캠퍼스 2023. 2. 6. 00:35
패스트캠퍼스 - 프론트엔드 종합반 CH.5 HTML 개요 정리

01. 기본 문법 내용 -> 요소 (element) (시작태그) (종료태그) 02. 부모와 자식 관계 이해 -> 부모 요소 내용 -> 자식 요소 상위(조상)요소 : 부모 요소를 포함하는 나를 기준으로 위쪽에서 나를 감싸는 모든 태그를 지칭 하위(자손)요소 : 나를 기준으로 내가 감싸고 있는 모든 태그를 지칭 03. 빈태그 내용 (기능의 확장) (이미지 경로) (대체텍스트) 04. 글자와 상자 인라인(inline)요소 : 글자를 만들기 위한 요소들 블록(block)요소 : 상자(레이아웃)을 만들기 위한 요소들 태그는 대표적인 인라인 요소 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도 요소가 수평으로 쌓이게 된다. style로 width, height를 줘도 반응이 없다 왜냐면, 글자는 가..
⛳️ 패스트캠퍼스 2023. 1. 31. 17:10
이전 Prev 1 2 Next 다음