stonesy

CSS(Cascading Style Sheets)는 웹 페이지의 스타일(디자인)을 정의하기 위한 언어로, HTML이나 XML같은 마크업 언어로 작성된 문서의 시각적 표현(색상, 레이아웃, 글꼴 등)을 담당한다. *CSS 전처리기전처리기는 CSS 확장 언어로 작성된 코드를 컴파일하여 일반적인 CSS로 변환한다.  Sass 등이 있다.장점1. 코드 재사용성 증가변수를 통해 색상, 글꼴 크기 등 반복적으로 사용하는 값을 한 곳에 정의하고 재사용할 수 있다.// 변수 정의$primary-color: #3498db;// 재사용body { background-color: $primary-color;}h1 { color: $primary-color;} 2. 코드 가독성 및 유지보수성 향상중첩을 지원하여, HTML..

ES6+는 모던 자바스크립트로 더 간결하고 효율적인 코드 작성을 가능하게 한다. ES6의 주요 변화는 다음과 같다. 1.템플릿 문자열: 템플릿 문자열을 통해 문자열에 변수를 포함시킬 때 좀 더 직관적이고 편하게 사용할 수 있게 한다.`${name}`; 2. const, let: JavaScript 엔진은 코드를 실행하기 전에 선언문을 위로 끌어올리는 작업을 한다.(Heap에 메모리를 할당해 놓는 것) 3. 화살표 함수: 일반 함수는 호출 방법에 따라 this가 다르게 맵핑된다. 반면 화살표 함수의 this는 상위 스코프의 this를 가리킨다. 이를 통해 콜백 함수에서 일관된 this를 가리킬 수 있다. 가독성 측면에서도 간결하게 작성할 수 있어서 더 좋다.// 일반 함수를 사용한 예시const perso..

📖JavaScript 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행한다. 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. *JavaScript의 선언 🔎==연산자와 ===연산자의 차이 ===는 타입이 포함된다. 🔎JavaScript 객체 객체는 이름과 값으로 구성된 프로퍼티(Property)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제할 수 있다. JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로..

📖HTML HTML = Hypertext Markup Language의 약자 문서를 Web Browser에 표현할 때 tag를 사용한다. : 현재 문서가 HTML 문서임을 정의 이력서 아래 정보는 거짓이 없습니다. 사진 성명 홍길동 주민번호 000000-000000 생년월일 2000년 01월 01일 주소 서울시 강남구 역삼동 77-1 연락처 집 02-1234-5678 이메일 honggd@naver.com 핸드폰 010-9876-5432 🔍img 태그 alt 속성 사용: alt 속성은 이미지에 대한 대체 텍스트를 제공하는 속성이다. 이미지가 로드되지 못했을 때나 스크린 리더 사용자에게 이미지를 설명해주는 역할을 한다. 따라서 모든 태그에 alt 속성을 포함시키는 것이 좋다. 🔍form 태그 사용자로부터 데..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔎grid 레이아웃 float>flex>grid float: 현재 거의 사용되지 않음! flex, grid: 상황에 따라 혼용 flex는 1차원적 구조→row 혹은 column ✔️grid-template-rows grid의 행의 개수 및 크기를 지정할 수 있다. g..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖position/transition 🔎단위 심화 calc(): 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용한다. ⇒곱셈과 나눗셈의 경우는 공백의 유무가 상관없지만, 덧셈과 뺄셈의 경우 공백이 필수적이다. 🔎position ✔position이란? HTML 요소..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔎캐스캐이딩(Cascading) 수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 중요도: CSS가 선언된 위치에 따라 우선순위가 결정된다.(브라우저 스타일 시트

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS 상속 🔎상속 상속: 부모가 자식에게 무엇을 물려주는 것 바깥에 있는 박스입니다. 안쪽에 있는 박스입니다. .container{ color: red; } ⇒자식요소에도 color: red;가 적용된다. 이는 부모 요소의 속성이 자식 요소에게도 상속되었기 때문이..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 📖CSS 레이아웃 레이아웃: 화면의 요소를 적절히 배치하는 것 🔍선택자(Selector) 2 전체 선택자 *{ property: value } 그룹 선택자 .class1, .class2{ property: value } 가상 클래스 선택자 가상 클래스 선택자란 실제로..

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard [코드캠프] 강력한 CSS 강의 - 인프런 CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까 www.inflearn.com 🔍font 기본 속성 ✔️font-size(폰트 사이즈) 텍스트의 크기를 지정한다. font-size: 18px ✔️font-weight(글자 두께) 텍스트의 두께를 지정한다. font-weight: 600 일반적인 regular에 해당하는 값이 400이다. ✔️fo..