Be ready to study forever - 개발자 꿈나무

4.1. 주석 SCSS의 주석은 두가지가 존재합니다. /* */ - 의 기존에 CSS에서 쓰는 주석으로 컴파일 후에도 CSS파일에 남는 주석입니다. // - 로 CSS에서는 쓰이지 않는 주석입니다. 컴파일하면 CSS파일에서는 제거됩니다. 4.2. 데이터 타입 데이터 설명 예시 Numbers 숫자 1, 0.2, 20px 2em Strings 문자열 bold, relateive, “/images.a.png” Colors 색상 red blue #ffffff Booleans 논리 true, false Nulls 비어있음 null Lists 공백이나 쉼표로 구분된 값의 목록 (apple, orange, banana), apple orange banana Maps Lists와 유사하나 값이 key : value 값..

1. Sass란? CSS Preprocessor로서 CSS전처리기입니다. 브라우저에서는 CSS만 작동하기 때문에 직접Sass를 동작 시킬 수는 없습니다. Sass는 CSS의 문법과 유사하지만 중첩이나 조건문 반복문 단위연산등이 가능한 프로그래밍 언어입니다. 단, 웹에서는 직접 작동하지 않으므로 CSS로 컴파일 후에 사용가능합니다. 2. Sass와 SCSS의 차이점 Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 입니다.즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말입니다. 더 쉽고 간단한 차..

1. Feature of Laravel 1.1 MVC(Model, View, Controller) pattern Laravel adapted MVC pattern MVC pattern is a design pattern of modern web development that splits the components Model, View, Controller Model – is called by Controller to Save or read data from Database and returns the data into the forms that view can use View - is called by Controller to generate templates (HTML, XML, JSON) to ser..

Lecture 1 - An Overview and Introduction to Web Application Development 1. Internet It is a massive network of networks. Internet is interconnected network of computer and network devices with TCP/IP protocol ​ TCP – handles the messages IP – handles the delivery The Basic Protocols of the internet: · TCP/IP · IP Address · DNS · URL & URI · MIME DNS – Domain Name Systems DNS look up the IP Addre..

Maven 1. Maven이란? Maven은 빌드 자동화 툴로서 pom.xml파일에 사용할 라이브러리를 정의해 놓으면 사용할 라이브러리 뿐만 아니라 해당 라이브러리가 의존하는 다른 라이브러리까지 관리하여 자동으로 다운받아준다. 2. Maven동작원리 Maven에는 미리 정의된 빌드 순서가 있고 이를 라이프 사이클이라고 부른다. 라이프 사이클의 각 단계는 phase라고 하며 각 phase들은 의존관계이다. 즉, 한phase가 진행되려면 이전의 phase가 모두 수행된 상태여야 한다. Maven에서 제공되는 모든 기능은 플러그인 기반으로 동작한다. phase도 플러그인과 연결되어있다. 플러그인 안에서 실행할 수 있는 각각의 작업을 골이라고 하며 한 개의 phase는 한 개의 골과 연결된다. 2.1 Maven..

컴파일과 런타임의 차이점 1. 컴파일 컴파일이란 개발자가 작성한 소스코드를 기계가 이해할 수 있는 2진수의 바이너리 코드로 바꿔주는 과정이다. JAVA, C, C++같은 언어들이 컴파일 언어이며 분류와 같이 반드시 실행(런타임)되기 위해서는 컴파일이 되어야한다. 반대로, Python, PHP, JavaScript와 같은 언어들은 스크립트 언어이다. 스크립트 언어는 컴파일 과정이 없이 기계어로 번역되는 즉시 동작하도록 되어있다. 따라서 컴파일 과정은 필요 없지만 작동시에 스크립트언어는 컴파일언어에 비해서 느린 단점이 있다. 2. 런타임 컴파일이 완료된 이후 사용자에 의해서 응용프로그램이 동작되어지는 때를 런타임이라고 한다. 3. 런타임 에러와 컴파일 에러 컴파일 에러는 컴파일 과정에서 컴파일러가 이해하지 ..

12. CSS grid - 2차원의 레이아웃 시스템 //CSS flex는 1차원의 레이아웃을 제공한다. *grid는 flex와 동일하게 container와 items의 개념으로 구분된다 container는 item의 부모요소이며 container 안에 items를 배치할 수 있다. 12.1. display – grid container의 자식요소는 자동으로 items가 된다. 그리드 선언 값 의미 grid block특성의 grid container를 정의 inline-grid inline 특성의 grid container를 정의 ex) .container{ display : grid; } 12.1.1. grid-template-rows – 맹시적 행의 크기를 정의,동시에 라인 이름도 정의할 수 있음. f..

11. CSS/ flex – 수직과 수평정렬 flex는 요소의 크기가 불분명하거나 동적인 경우에도 각 요소를 정렬할 수 있는 효율적인 방법이다. flex는 2개의 개념으로 나뉜다. l container – display, flex-flow, justify-content 등의 속성을 사용 l items – order, flex, align-self 의 속성을 사용 container는 items를 감싸는 부모요소이며 각 item을 정렬하기 위해선 container가 필수적이다. 주의할 부분은 container와 items에 적용하는 속성이 구분되어 있다는것이다. 11.1.1. flex container – 속성 속성 의미 display flex container를 정의 flex-flow flex-direct..

10. animation(속성) 값 의미 기본값 animation-name @keyframes 규칙의 이름을 지정 none animation-duration 애니매이션 지속시간 설정 0s animation-timing-function 타이밍 함수 지정 ease animation-delay 애니매이션 대기 시간 설정 0s animation-iteration-count 애니매이션 반복 횟수 설정 1 animation-direction 애니매이션 반복방향설정 normal animation-fill-mode 애니매이션 전후 상태 설정 none animation-play-state 애니메이션 재생과 정지 설정 running 10.1. @keyframes – 2개 이상의 애니메이션 중간 상태(프래임)을 지정 사용법..

9.CSS 전환/변환 9.1. transition 값 의미 기본값 transition-property 전환 효과를 사용할 속성 이름 all transition-duration 전환 효과의 지속시간 0s transition-timing-function 타이밍 함수 지정 ease transition-delay 전환 효과의 대기시간 설정 0s transition : 2s 3s; transition: 2s ease; //모든 개별속성은 생략가능하지만 duration은 생략이 불가능 9.1.1 transition-property all 모든속성 이며 부분적으로 속성이름을 넣어 선택할수도 있다 ex) transition-property : all; transition-property: width, backgroun..