DongSup Ahn

🔥

Tags

특강

(특강:종찬님) 보이지 않는 영역 && 코드리뷰

📚 What is TIL? 사소한 구현 종찬님이 첫 특강 때도 말씀해주셨지만 이것저것 기능이 많고 복잡한 것을 구현해낸 것보다 간단하게 구현 해낸 결과물 만으로도 디테일한 부분에 신경을 쓰는 개발자인지 아닌지 구별이 가능하다고 하셨다 즉, 사소한 구현만으로...

(특강:상훈님/종찬님) margin && position && flexbox

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ Negative Margins ✅ Margin auto 키워드의 사용 ✅ 레이아웃의 핵심, position ✅ transform 이해하기 ✅ relative와 absolute ✅ relative + absolute...

레이아웃을 보는 시각

📚 What is TIL? 전체 웹사이트에서 덩어리를 보는 방법 컨텐츠를 집중 시작할 필요가 없다 html은 문서이기 때문에 정보로써 중요한 것을 마크업하고 그 외의 데코레이션은 마크업하지 않는 것이 좋다 작업 순서에 있어서 주의점 전...

(특강:종찬님) 기본중에 기본인 CSS 지식✨

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ CSS 초기값 initial value 이해하기 ✅ CSS 상속 inheritance 이해하기 ✅ User-agent stylesheet 이해하기 ✅ 캐스케이드 이해하기, CSS Specificity ✅ CSS 박스모...

(특강:소울곰님) 피그마 특강 && float flex grid

📚 What is TIL? 레이아웃을 잡을 때 유용한 함수들 :root | var() 전역 CSS 변수 선언 :root로 html 태그를 선택하게 된다 💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다 ...

맨 위로 이동 ↑

Layout

(특강:종찬님) 보이지 않는 영역 && 코드리뷰

📚 What is TIL? 사소한 구현 종찬님이 첫 특강 때도 말씀해주셨지만 이것저것 기능이 많고 복잡한 것을 구현해낸 것보다 간단하게 구현 해낸 결과물 만으로도 디테일한 부분에 신경을 쓰는 개발자인지 아닌지 구별이 가능하다고 하셨다 즉, 사소한 구현만으로...

(특강:상훈님/종찬님) margin && position && flexbox

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ Negative Margins ✅ Margin auto 키워드의 사용 ✅ 레이아웃의 핵심, position ✅ transform 이해하기 ✅ relative와 absolute ✅ relative + absolute...

레이아웃을 보는 시각

📚 What is TIL? 전체 웹사이트에서 덩어리를 보는 방법 컨텐츠를 집중 시작할 필요가 없다 html은 문서이기 때문에 정보로써 중요한 것을 마크업하고 그 외의 데코레이션은 마크업하지 않는 것이 좋다 작업 순서에 있어서 주의점 전...

맨 위로 이동 ↑

grid

(특강:소울곰님) 피그마 특강 && float flex grid

📚 What is TIL? 레이아웃을 잡을 때 유용한 함수들 :root | var() 전역 CSS 변수 선언 :root로 html 태그를 선택하게 된다 💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다 ...

grid는 대단해..!

📚 What is TIL? grid grid-container에서 사용하는 속성 grid-template-columns 세로 열 방향(column) 그리드 트랙의 사이즈를 설정한다 grid-template-rows 가로 행 방향(row) 그리드 트...

맨 위로 이동 ↑

float

float과 overflow 이해하기

📚 What is TIL? float이 무엇일까? 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다 이미지 또는 기타 요소를 시각적으로 보여주기 위한 방식이다 요소는 문서의 흐름에서 제외(===부유)되게 된다 다른 요소들까지 똑같은 속성이 전달되...

(특강:소울곰님) 피그마 특강 && float flex grid

📚 What is TIL? 레이아웃을 잡을 때 유용한 함수들 :root | var() 전역 CSS 변수 선언 :root로 html 태그를 선택하게 된다 💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다 ...

맨 위로 이동 ↑

flex

(특강:상훈님/종찬님) margin && position && flexbox

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ Negative Margins ✅ Margin auto 키워드의 사용 ✅ 레이아웃의 핵심, position ✅ transform 이해하기 ✅ relative와 absolute ✅ relative + absolute...

(특강:소울곰님) 피그마 특강 && float flex grid

📚 What is TIL? 레이아웃을 잡을 때 유용한 함수들 :root | var() 전역 CSS 변수 선언 :root로 html 태그를 선택하게 된다 💡 var() 변수를 처리하면 유지보수나 수정사항이 발생했을 때 빠르게 대처할 수 있다 ...

맨 위로 이동 ↑

Bootstrap

jQuery, Bootstrap 으로 고양이 집사레벨 테스트 만들어보기

📚 What is TIL? ✅ jQuery로 쉽고 빠르게 DOM 조작해보기 ✅ Bootstrap을 이용해서 빠르게 페이지 만들어보기 ✅ 미니 스타크래프트 만들어보기 ✅ 기념일 계산기 만들어보기 ✅ mbti 테스트 만들어보기 ➕ ✅ jQuery와 Bootstra...

웹 개발의 효율성? Bootstrap

📚 What is TIL? 웹 개발을 보다 효율적으로 수행하려면? Tailwind CSS | Bootstrap | SASS | D3 | Canvas 와 같은 도구 및 프레임워크를 사용한다 웹 개발을 더 쉽고 효율적으로 만들기 위한 목적이다 반응형 웹 사이...

맨 위로 이동 ↑

JavaScript

비동기 통신(Ajax)방식

📚 What is TIL? AJAX가 없던 시절 과거에는 사용자와 상호작용하는 웹 페이지를 만들기 위해서는 HTML과 함께 폼을 이용해 데이터를 서버에 전송하고, 서버에서 처리된 결과를 다시 HTML로 받아와 화면에 출력하는 방식을 사용했다 🔎 따라서, 페이지...

벤딩머신 기능구현하기

벤딩머신에 필요한 기능 🎰 동작해야할 순서대로 넘버링을 해보자면  1. 소지금과 같거나 적은 금액을 자판기에 입금한다  2. 거스름돈 반환 버튼을 누를 경우 잔액을 소지금에 반환해줘야 한다  3. 음료의 재고가 존재해야하고 음료를 선택했을 때 재고가 깎여야...

맨 위로 이동 ↑

overflow

float과 overflow 이해하기

📚 What is TIL? float이 무엇일까? 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다 이미지 또는 기타 요소를 시각적으로 보여주기 위한 방식이다 요소는 문서의 흐름에서 제외(===부유)되게 된다 다른 요소들까지 똑같은 속성이 전달되...

맨 위로 이동 ↑

bfc

float과 overflow 이해하기

📚 What is TIL? float이 무엇일까? 자신을 포함하고 있는 컨테이너의 좌 우측에 배치 되게 한다 이미지 또는 기타 요소를 시각적으로 보여주기 위한 방식이다 요소는 문서의 흐름에서 제외(===부유)되게 된다 다른 요소들까지 똑같은 속성이 전달되...

맨 위로 이동 ↑

margin

(특강:상훈님/종찬님) margin && position && flexbox

📚 What is TIL? 오늘 배운 내용의 핵심 ✅ Negative Margins ✅ Margin auto 키워드의 사용 ✅ 레이아웃의 핵심, position ✅ transform 이해하기 ✅ relative와 absolute ✅ relative + absolute...

맨 위로 이동 ↑

Semantic Tag

(주말특강:재현님) 태그의 용도 && Margin Collapsing

📚 What is TIL? article과 section 언제 쓰이는가? article 독립적인 콘텐츠에 사용된다 Facebook에서 뜨는 알 수 있는 사람이나 광고와 같이 다른 페이지에서 재사용할 수 있는 독립적인 콘텐츠에 사용하자 💡 쉽게 생각해서...

맨 위로 이동 ↑

Margin Collapsing

(주말특강:재현님) 태그의 용도 && Margin Collapsing

📚 What is TIL? article과 section 언제 쓰이는가? article 독립적인 콘텐츠에 사용된다 Facebook에서 뜨는 알 수 있는 사람이나 광고와 같이 다른 페이지에서 재사용할 수 있는 독립적인 콘텐츠에 사용하자 💡 쉽게 생각해서...

맨 위로 이동 ↑

jQuery

jQuery, Bootstrap 으로 고양이 집사레벨 테스트 만들어보기

📚 What is TIL? ✅ jQuery로 쉽고 빠르게 DOM 조작해보기 ✅ Bootstrap을 이용해서 빠르게 페이지 만들어보기 ✅ 미니 스타크래프트 만들어보기 ✅ 기념일 계산기 만들어보기 ✅ mbti 테스트 만들어보기 ➕ ✅ jQuery와 Bootstra...

맨 위로 이동 ↑

변수

JavaScript 시작! DOM, BOM, 변수, 연산자, string

📚 What is TIL? ✅ DOM과 BOM ✅ 변수 ✅ 산술연산 ✅ 비교연산 ✅ 논리연산 ✅ 변수의 타입 ✅ String 메소드 맛보기(정규표현식) DOM Document Object Model 개발자가 코드를 사용하여 웹 페이지의 콘텐츠, 구조 ...

맨 위로 이동 ↑

string

JavaScript 시작! DOM, BOM, 변수, 연산자, string

📚 What is TIL? ✅ DOM과 BOM ✅ 변수 ✅ 산술연산 ✅ 비교연산 ✅ 논리연산 ✅ 변수의 타입 ✅ String 메소드 맛보기(정규표현식) DOM Document Object Model 개발자가 코드를 사용하여 웹 페이지의 콘텐츠, 구조 ...

맨 위로 이동 ↑

number

Number, Boolean, 단락회로 평가

📚 What is TIL? ✅ var의 주의점 ✅ Math 메서드 ✅ BigInt ✅ 형변환 ✅ 일치연산자 사용주의점 ✅ 단락회로 평가와 병합연산자 ✅ isNaN 함수 ✅ 드모르간 법칙 var을 쓰지 않는 이유 let, const 와 같은 Block-lev...

맨 위로 이동 ↑

boolean

Number, Boolean, 단락회로 평가

📚 What is TIL? ✅ var의 주의점 ✅ Math 메서드 ✅ BigInt ✅ 형변환 ✅ 일치연산자 사용주의점 ✅ 단락회로 평가와 병합연산자 ✅ isNaN 함수 ✅ 드모르간 법칙 var을 쓰지 않는 이유 let, const 와 같은 Block-lev...

맨 위로 이동 ↑

Math

Number, Boolean, 단락회로 평가

📚 What is TIL? ✅ var의 주의점 ✅ Math 메서드 ✅ BigInt ✅ 형변환 ✅ 일치연산자 사용주의점 ✅ 단락회로 평가와 병합연산자 ✅ isNaN 함수 ✅ 드모르간 법칙 var을 쓰지 않는 이유 let, const 와 같은 Block-lev...

맨 위로 이동 ↑

array

Array, Object, Function

📚 What is TIL? 배열 동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다 배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다 요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다 🔎 배열의 원소...

맨 위로 이동 ↑

object

Array, Object, Function

📚 What is TIL? 배열 동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다 배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다 요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다 🔎 배열의 원소...

맨 위로 이동 ↑

function

Array, Object, Function

📚 What is TIL? 배열 동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다 배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다 요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다 🔎 배열의 원소...

맨 위로 이동 ↑

sort

Array, Object, Function

📚 What is TIL? 배열 동일한 데이터 유형의 여러 변수를 저장하는 데 사용된다 배열은 인덱스를 사용하여 요소를 접근하므로 요소를 검색하는데 효율적이다 요소의 순서를 유지하고 추가하거나 제거할때 다른 요소의 위치를 변경하지 않아도 된다 🔎 배열의 원소...

맨 위로 이동 ↑

memory

[코어자바스크립트] 메모리와 데이터 && 식별자와 변수

📚 What is TIL? 컴퓨터는 전기 신호의 on/off 상태로 정보를 표현하기 때문에 이진법을 이용하여 전선 한가닥으로 모든 수체계를 표현하는 방법을 선택했다 🔎 전류가 흐른다면 1 흐르지 않는다면 0 🔎 이진법은 컴퓨터가 정보를 처리하는 가장 작은 단...

맨 위로 이동 ↑

Regex

정규표현식 다뤄보기

📚 What is TIL? 정규표현식 Regular Expression 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용된다 정규표현식 연습 사이트 정규식 구성 /pattern/i 식의 슬래쉬 문자 두개 사이로 정규식 기호가 들어가는 ...

맨 위로 이동 ↑

Stack

[코어자바스크립트] Execution Context

📚 What is TIL? 실행 컨텍스트란? Execution Context 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트 코드가 실행되는 환경을 말한다 즉, 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행된다 그렇다면 실행 컨텍스크는 언제 생...

맨 위로 이동 ↑

Queue

[코어자바스크립트] Execution Context

📚 What is TIL? 실행 컨텍스트란? Execution Context 실행할 코드에 제공할 환경 정보들을 모아놓은 객체로, 자바스크립트 코드가 실행되는 환경을 말한다 즉, 모든 자바스크립트 코드는 실행 컨텍스트 내부에서 실행된다 그렇다면 실행 컨텍스크는 언제 생...

맨 위로 이동 ↑