(SEB_FE) SECTION1

웹 개발에 있어서 HTML, CSS, JavaScript의 역할을 각각 설명할 수 있다.VScode에서 폴더를 열고 새로운 파일을 생성할 수 있다.VScode를 이용하여 작성한 HTML, CSS를 브라우저에서 확인할 수 있다.HTML은 웹의 구조, CSS는 스타일, J

1. HTML이 "구조를 표현하는 언어" 라는 의미를 자신의 언어로 표현할 수 있다. HTML의 구조와 문법에 대해서 이해하고 적용할 수 있다. 자주 사용되는 HTML 요소(Element)가 무엇인지 알고 차이를 설명할 수 있다. div, span 요소가 무엇이고, 어

▼▼▼🐣갓 태어난 병아리와도 같은 결과물🐣▼▼▼제목을 h2 요소로 작성한다.자신을 표현할 수 있는 이미지를 img 요소로 추가한다.자신의 목표를 li 요소를 사용하여 작성한다.목표를 이루기 위한 다짐을 li 요소를 사용하여 작성한다.이외에도 q 요소를 사용해서 내

1. 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다. 와이어프레임만 보고 HTML로 코딩할 수 있다. div 요소 또는 section, header 등의 시맨틱 요소로 영역을 구분하는 이유를 이해할 수 있다. HTML 문서에서 언제 id 혹은 class를 사용해야 하

1. CSS의 사용 목적을 이해한다. CSS의 기본 문법과 구조를 이해한다. CSS를 HTML에 적용하는 방법에 대해서 이해한다. HTML 안에 CSS를 직접 정의하는 것을 권장하지 않는 이유를 이해한다. CSS를 이용해 텍스트를 꾸밀 수 있다. CSS에서 쓰이는 단위

1. CSS 박스 모델을 이해할 수 있다. 박스를 구성하는 네 가지 요소를 구분하고 각각에 대해 설명할 수 있다. ➡ margin, border, padding, content 박스 크기를 측정하는 두 가지 기준의 차이를 이해할 수 있다. 모든 콘텐츠는 각자의 영역을

다양한 CSS selector 규칙을 이해한다.후손 selector와 자식 selector의 차이를 이해한다.필요시 검색을 통해 필요한 selector를 찾아 적용할 수 있다.전체 셀렉터는 문서의 모든 요소를 선택태그 셀렉터는 같은 태그명을 가진 모든 요소를 선택. 복

1. HTML의 요소를 CSS로 선택(select)할 수 있다. 각 요소가 하나의 박스라는 것을 이해한다. 원하는 CSS 속성을 검색해서 사용할 수 있다. ▼▼▼🐣갓 태어난 병아리와도 같은 결과물2🐣▼▼▼

아직까진 만점... BUT! 좋은 해설은 기록해두고 자주 다시 보자. box-sizing 의 값이 border-box 인 경우, 기존 CSS box model의 box 크기 산정 방식과 달라진다.border-box인 경우 box의 높이: height + padding-

레이아웃을 위한 HTML을 만들 수 있다.단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도 (스타일링 요소나 UX(사용자 경험, User Experience)를 판단하는 것이 아니다!)즉, 역동적인

1. display: flex; 를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다. flex-direction 을 이용하여 요소를 정렬할 방향을 결정할 수 있다. justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정할 수 있다

HTML과 CSS를 활용하여 만들고자 하는 웹 애플리케이션의 레이아웃을 구성할 수 있다. Flexbox속성을 이용하여 자식 요소를 정렬할 수 있다. 자식 요소에 flex 속성을 추가하여 부모 요소에서 각각의 자식 요소가 차지하는 비중을 조절할 수 있다. Bare-m

어제 만들었던 계산기 과제를 보고 좀 심심한 거 같아서 오전동안 수정했다! ▼▼▼결과물(ฅ˘⩊˘ฅ)▼▼▼ 컨셉은 8bit로 정했다ㅎㅎ 귀엽다... 확실히 배경 넣으니까 훨씬 덜 심심한 거 같다. 난 왜이렇게 각진게 좋을까?... 부드러운건 디자인적으로 별로 안끌린다

JavaScript 코드를 직접 실행할 수 있다.원하는 데이터를 console.log()로 출력할 수 있다.JavaScript 엔진이 코드를 읽는 법에 대해 기억한다.코드와 주석을 구분할 수 있다.값과 연산자를 구분할 수 있다.console.log()로 구구단을 출력할

데이터 타입이 무엇인지 이해한다.JavaScript의 데이터 타입 중 Number, String, Boolean이 있다는 것을 기억한다.Number 타입에 사용가능한 연산자를 사용하여 간단한 연산을 console에 출력할 수 있다.Math 내장 매서드 중 Math.fl

변수가 메모리에 데이터를 저장하는 방법이라는 것을 기억한다.let 키워드를 활용하여 변수를 선언하고 원하는 값을 할당할 수 있다.변수를 활용하여 더 쉽게 구구단을 출력할 수 있다.template literal을 사용할 수 있다.변수: 특정 데이터에 이름을 붙인 것! 변

⭐변수 활용하기 💫변수를 활용한 연산 변수에 숫자 타입의 값이 할당되어 있는 경우 숫자 타입에 사용 가능한 모든 연산이 가능 💫템플릿 리터럴(template literal) string 타입의 변수를 선언, 할당할 때 백틱(\`)을 사용하는 방법! 큰 따옴표, 작

Q. is Pythagorean? 문제 삼각형의 세 변을 입력받아 직각삼각형(pythagorean)인지 여부를 리턴해야 합니다. > #### 주의 사항 삼각형의 각 세 변은 무작위로 입력됩니다. 자바스크립트에서 x의 제곱(x squared)을 구하는 방법은 3가지

특정한 조건에서만 실행되는 코드를 작성할 수 있다.truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다.비교 연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다.if, else if, else를 사용하여 여러 개의 조건을 중첩해서 사

1. for 반복문을 작성할 수 있다. for 반복문이 여러 개의 코드 블록의 조합이라는 것을 이해한다. 구구단 n단 출력을 반복문으로 구현할 수 있다. 반복문 내부에 조건문을 활용할 수 있다. 이중반복문의 동작 순서를 이해할 수 있다. 구구단 1-9단 출력을 이중반복

1. 함수표현식, 함수선언문으로 함수를 정의하고 호출할 수 있다. 매개변수와 전달인자에 대해 설명할 수 있다. 함수에 return문이 필요한 이유를 이해한다. 함수를 이용해 구구단 n단을 출력하는 재사용이 가능한 코드를 작성할 수 있다. 함수 정의 입력을 받아서 코드

Q.06_(advanced)convertScoreToGradeWithPlusAndMinus 문제 점수를 입력받아 점수에 해당하는 등급을 리턴해야 합니다. 출력 string 타입을 리턴해야 합니다. 각 등급의 최저 점수는 아래와 같습니다. ('F'의 경우 최대 점수를

문제1 이상의 자연수를 입력받아 소수(prime number)인지 여부를 리턴해야 합니다.소수는 1과 2를 제외하기 때문에 반복문의 초기식을 3으로 해주자.특정 수의 약수 목록의 정중앙에는 그 수의 제곱근이 있다. ex. 특정수: 12약수: 1-2-3-<span

⭐Bare Minimum Requirements 버튼이 잘 눌렸는지 확인하기 기본 계산 기능 구현하기 💫 버튼이 잘 눌렸는지 확인하기

리눅스 터미널을 실행할 수 있다.CLI를 이용한 작업과 GUI를 이용한 작업이 동일함을 이해할 수 있다.리눅스 터미널에서 기본적인 명령어를 사용할 수 있다.명령어를 사용할 때, 등장하는 키워드에 대해 이해할 수 있다.관리자 권한을 이해할 수 있다.절대 경로와 상대 경로

패키지와 패키지 매니저 필요성을 이해할 수 있다.각 운영체제에 맞는 패키지 매니저를 사용할 수 있다.리눅스 운영체제의 패키지와 패키지 매니저는, 포장된 상품과 온라인 쇼핑몰 같은 역할리눅스의 패키지는 여러 파일을 모아 하나의 파일로 저장하고 있는 압축파일패키지 안에 들

nvm, Node.js, npm을 설치하고, 버전을 확인할 수 있다.명령어 node를 이용해 JavaScript 파일을 Node.js 런타임에서 실행할 수 있다.과제 시작 전 package.json 파일을 확인하고, npm install을 사용할 수 있다.<spa

1. Git의 환경설정을 할 수 있다. 버전 관리 시스템의 필요성을 이해할 수 있다. Github과 Git의 관계에 대해 이해할 수 있다. local repository와 remote repository의 차이를 이해할 수 있다. 프로그래밍을 할 때, 문법이 틀렸거나

1. 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다. length 속성을 이용하여 배열의 길이를 조회할 수 있다. 배열의 요소가 배열인 이중 배열을 이해하고, 이중 배열의 요소를 조회하거나 변경할 수 있다. 배열의 각 요소에 대

원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지 이해할 수 있다.원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다.원시 자료형이 할당될 때는 변수에 값(value

스코프의 의미와 적용 범위를 이해한다.스코프의 주요 규칙을 이해한다.전역 스코프와 지역 스코프의 차이를 이해한다.block scope와 function scope의 차이를 이해한다.변수 선언 키워드(let, const, var)와 스코프와의 관계를 설명할 수 있다.전역

클로저 함수의 정의와 특징에 대해서 이해할 수 있다.클로저가 갖는 스코프 범위를 이해할 수 있다.클로저를 이용해 유용하게 쓰이는 몇 가지 패턴을 이해할 수 있다.A closure is the combination of a function bundled together

1. spread/rest 문법을 사용할 수 있다. 구조 분해 할당을 사용할 수 있다. 화살표 함수로 함수를 정의할 수 있다. ⭐spread/rest 문법 💫 spread 문법 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용

⭐Type 💫 엄격한 동치 연산자( === )를 사용하자! > 위 예시들 처럼 JS에는 다소 이해하기 힘든 부분들이 존재한다. 이런 별난(quirky) 부분들을 따로 모아 둔 저장소가 따로 있을정도! 이런 별난 특성들은 전부 암기해서 대응하려 하지 말고, 올바른

오늘은 학습 목표가 딥따 많다..! 힘내자 ...DOM의 개념을 이해한다.DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 이해한다.HTML에서 JavaScript 파일을 불러올 때 주의점에 대해서 이해한다.DOM과 JavaScript의 차이에 대해 이해

DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다. querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다. oncilck, onkeyup 속성이나 addEventListener 메서드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할

기초적인 event를 알고, event handler를 element에 적용할 수 있다.onclick 에 직접 할당하는 것과 addEventListener의 차이를 이해한다.eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다

‘지나간 일을 돌이켜 생각하는 것’➡ 걸어왔던 길을 되돌아 보고, 목표를 향해 계속 나아가기 위해 필요한 노력이 무엇인지 생각하고 실천하는 것을 꾸준히 반복함으로써, 꾸준히 성장하기 위해서목표 상기하고, Keep(이번 섹션동안 좋았던 점, 앞으로도 지켜가고 싶은 부분)