목록전체 글 (39)

개발을 해라

패스트캠퍼스 - 프론트엔드 종합반 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
원티드 프론트엔드 프리온보딩 챌린지 | 첫번째 수업 정리

수업시간에 졸아서 제대로 기억이 안나지만 필기한 내용 위주로 정리한다. TypeScript *google에서 typescript playground 검색해서 나오는 사이트에서 연습하면 좋음* 타입스크립트란, 타입의 구문이 있는 자바스크립트이다. 여기서 구문이란? syntax를 의미한다. TS = JS + TS syntax 타입스크립트의 효과 객체와 함수의 생김새를 정의할 수 있다. 데이터를 코드로 설명할 수 있는 데이터 기술서 편집기에서 문서 및 버그를 검출할 수 있다. 선언과 구현의 차이 함수 선언 function func() { 함수 구현 } 함수 사용 func() 런타임 VS 컴파일 타입스크립트는 컴파일 과정을 거치며 런타임에 타입 체크가 불가능하다. 런타임에서 안전하게 사용하려면 typeguard..
😎 프론트엔드 2023. 2. 7. 00:57
CSS - transform, 중첩사용 정리(인프런 강의)

transform - 요소에 이동, 회전, 확대, 축소, 비틀기 등의 변경효과를 줄 수 있다. translate(x,y) - 요소의 좌표를 움직일 수 있다. - X축으로 x만큼, Y축으로 y만큼 이동 가능 예) transform: translate(20px, 25%) translateX(n) / translateY(n) - 요소의 X축 / Y축 좌표를 n만큼 움직일 수 있다. 예) translateX(20px) translateY(20px) scale(x,y) - X축으로 x배만큼, Y축으로 y배 만큼, 요소를 축소 혹은 확대한다. 예) transform: scale(0.75, 1.1) scaleX(n) / scaleY(n) - 요소를 X축 / Y축 방향으로 n만큼 확대 혹은 축소 skew(x,y) - ..
🥁 CSS 2023. 2. 6. 17:08
이전 Prev 1 2 3 4 ··· 7 Next 다음