전체 글

멋쟁이사자처럼 프론트엔드 스쿨 3주 차

키워드 [CSS] position floats 와 normal flow BFC(Block-Formatting-Context) CSS selector flex [CSS 특강] font 와 line-height em 단위 네거티브 마진 [금요일 특강] 멋사 스타터 키트 Hard Skills and Soft Skills 취준 전략과 해외 취업 3주 차 해야 할 것은 많은데, 효율적으로 시간 분배가 잘 안되는 느낌이 든다. 특히 이번 주는 실습과 과제가 좀 있었는데 계속 코드를 다듬으면서 시간을 많이 쓴 것 같다. 딱 계획한 시간만큼만 과제에 힘을 쏟고 부족한 점은 배워나가면서 고쳐나가는 게 좋지 않을까 하는 생각이 든다. 이번 주에 가장 흥미로웠던 것은 `마진 병합이 되는 이유`와 `body 요소에 컬러를 주..

[Deep Dive] 10-11장

10장 객체 리터럴 객체란? 자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다. 즉 객체는 변경 가능한 값이다. 객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드 : 프로퍼티(상태 데이터)를 참고하고 조작할 수 있는 동작(behavior) var counter = { // 프로퍼티 num: 0, // 프로퍼티 키와 프로퍼티 값 // 메서드 increase: function() { this.num++; } }; 객체 리터럴에 의한 객체 생성 자바스크립트는 프로토타입 기반 객체지향 언어로서 클래..

[Deep Dive] 07-09장

07장 연산자 연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다. 피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할을 한다고 볼 수 있다. 산술 연산자 이항 산술 연산자 : 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 이항 산술 연산자 의미 부수 효과 + 덧셈 X (피연산자에 어떠한 효과도 없음) - 뺄셈 X * 곱셈 X / 나눗셈 X % 나머지 X 단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자 값을 만든다 단항 산술 연산자 의미 부수 효과 ++ 증가 피연산자의 값을 변경하는 암묵적 할당이 이루어짐 -- 감소 피연산자의 값을 변경하는 암묵적 할당이 이루어짐 + 어..

[Deep Dive] 04-06장

04장 변수 변수란 무엇인가? 왜 필요한가? 프로그래밍 언어는 기억하고 싶은 것을 메모리에 저장하고, 저장된 값을 읽어 들여 재 사용하기 위해 변수라는 메커니즘을 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 간단히 말하자면 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 변수에 값을 저장하는 것을 할당(대입, 저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조라 한다. 식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다. 변수, 함수, 클래스 등의 이름은 모두 식별자다. 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다. 식별자로..

[Deep Dive] 01-03장

01장 프로그래밍 프로그래밍이란? 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션이다. 이 때 요구되는 것이 문제 해결 능력이다. 프로그래밍이란 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업이며, 그 결과물이 바로 코드다. 프로그래밍 언어 사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환하는 변역기인 컴파일러 혹은 인프리터를 이용해 컴퓨터에 명령을 전달한다. 프로그래밍 언어는 구문과 의미의 조합으로 표현된다. 구문과 의미 프로그래밍의 목적은 문제 해결이고 작성된 코드는 해결 방안의 구체적 구현물이다. 그리고 이것은 프로그래밍 언어의 문법에 부합하는 것은 물론이고 요..

멋쟁이사자처럼 프론트엔드 스쿨 2주 차

키워드 [시맨틱 마크업] 스크린 리더 사용해보기, 헤딩 요소와 익명 영역 [HTML] 모듈화, 반응형 이미지 만들기, 의 속성과 동작 방식 [CSS] 선택자 우선순위, CSS box model [CSS 특강] CSS 마진 병합 2주 차 이번 주는 굉장히 빠르게 지나가 버린 느낌이다. 주중 강의 시간도 그렇고 추석 연휴도 그렇고...😎 연휴가 주어져서 몸도 마음도 여유롭게 보냈는데 다음 주부터는 열심히 달려봐야겠다. TIL을 작성할 때 새로 알게 된 점이나 헷갈리는 부분을 위주로 작성했더니 확실히 작성 시간이 많이 줄었다. 남는 시간에 다른 공부나 실습을 할 수 있어서 좋았다. '의 동작 방식' 수업 내용을 이해하기 어려웠다. 특히 질의응답 시간에는 정신이 약간 혼미해졌다,,ㅎ CS지식이 부족하다는 것을 ..

멋쟁이사자처럼 프론트엔드 스쿨 1주 차

키워드 [오리엔테이션] 우리가 해야할 것 : 들어봤다 → 배웠다 → 해봤다 → 다르게 해봤다! [HTML의 기초와 섹셔닝] HTML Living Standard 시멘틱 태그 (Semantic Tag) article 태그와 section 태그의 차이 TIL https://github.com/sduu/TIL/blob/main/HTML/HTML_02.md [CSS 특강] CSS의 기초와 display 속성에 따른 특징 TIL https://github.com/sduu/TIL/blob/main/CSS/CSS_special_01.md [Git] $ git clone {git reposiory url} . $ git add . $ git commit $ git push TIL https://github.com/sd..

[제주코딩베이스캠프] JavaScript 2부

조건문과 반복문 조건문 if else if else switch 삼항연산자 let result = true ? 1 : 100; 반복문 for for in for of while do while forEach break : 해당 조건이 만족되었을때 반복문을 탈출 continue : 해당 조건이 만족되었을때 다음 루프로 넘어감 // for문 무한 반복 for (;;) { } // for in 문 무한 반복 let a = '19821'; for (let i of a) { s += parseInt(i); } let b = {'one':1, 'two':2}; for (let j in b) { console.log(j); } // while문 무한 반복 while (true) { } 함수와 클래스 함수 함수를 사용..

[제주코딩베이스캠프] JavaScript 1부

자바스크립트 자바스크립트는 버전업이 되어도 이전에 있었던 기능을 삭제하거나 기능을 변경 하지 않는다. ES5 부터 엄격모드, 배열메서드가 추가 ES6 부터 const, let, Promise, Arrow function, class 등의 문법들이 대거 추가 자바스크립트의 삽입 위치는 보통 body 태그의 맨 끝이다. 자바스크립트의 구조 문(statement)은 세미콜론으로 구분한다. 문은 값, 연산자, 키워드, 명령어, 표현식 등으로 구성된다. 공백은 병합한다. 주석 // 한 줄 주석 /* 여러줄 주석 */ 엄격 모드 "use strict"; use stirict 라는 지시자를 통해 엄격모드를 활성화 했을때만 최신 문법이 반영된다. 보통 코드의 최상단에 추가한다. class 문법의 경우 엄격 모드가 기본..

[일러스트레이터] PSD 파일 SVG로 변환하기 + 텍스트 패스화

PSD 파일 SVG로 변환하기 + 텍스트 패스화 1. 일러스트레이터에서 [파일 - 열기] 또는 ctrl + O로 PSD 파일을 열어준다. 2. 원하는 옵션에 체크하고 확인을 클릭한다. (포토샵에서 작업한 레이어를 보존하고 싶다면 '레이어를 오브젝트로 변환' 옵션을 선택하고 하나로 합치고 싶다면 '레이어를 단일 이미지로 병합'을 선택) 3. SVG에서 텍스트를 패스로 다루기 위해 일러스트레이트 내에서 오브젝트화해주는 작업을 진행한다. 선택 도구(v)로 변환할 요소를 선택해준다. 3. [문자 - 윤곽선 만들기] 또는 shift + ctrl + O로 요소를 패스로 변환한다. 4. [파일 - 내보내기 - 내보내기 형식] 클릭 후 파일 형식을 SVG로 세팅해서 PSD를 SVG로 저장한다. 5. 코드 에디터로 SV..