웹문서의 본문을 구성하는 요소들중에 SECTION을 구성하는 요소에 대하여 알아보자. ✅ BODY 요소 요소는 문서의 본문 영역을 표시한다. 본문 영역은 실제 콘텐츠가 표현되는 공간이며, 이 공간에서 사용자와의 상호작용이 실질적으로 이루어진다. 또한 body 요소는 브라우저가 렌더링해야 할 범위를 알려준다. ✅ HEADER 요소 HTML5에 새롭게 추가된 요소로서, 웹 문서 맨 윗부분에 있으며 웹 사이트 이름, 글로벌 링크(로그인, 회원가입, 사이트맵, 언어 선택등 웹사이트 어느 곳에서든지 이용할 수 있는 링크)등으로 구성된 영역이다. LOGO 검색 사이트 이름(로고), 내비게이션, 헤드라인, 검색 등으로 구성된다. 과거에는 와 같이 사용했었다. 문서나 각 section, article 의 헤더 부분에 ..
📌 HTML 심화 개요 와이어프레임은 말 그대로 "와이어로 설계된 모양"을 의미하며, 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한것입니다.웹 애플리케이션을 개발할 때, 와이어프레임은 레이아웃의 형태를 잡는 단계를 의미합니다. 이 단계에서는 와이어프레임을 설계하는 방법과, id와 class속성을 목적에 맞게 사용하는 방법을 학습합니다. 📌 Chapter3-1. 웹 페이지의 구조잡기 HTML은 틀과 구조를 만드는 언어이다. 마크업언어라는 것은 구조를 만드는 언어이다. 이 사진은 N사이트의 댓글창이다. 이 화면을 만드는 과정을 소개하겠다. 결과적으로 이 화면을 만들기위해서는 HTML과 CSS가 필요하다. 어떻게 설계를 할까? 실제로 우리가 작업을 완료하면 이 댓글창이 완벽하게 작동이 되..
HTML(HyperText Markup Language)은 JavaScript와 같은 프로그래밍 언어가 아니라 웹 페이지의 뼈대를 구성하는 마크업언어입니다.이번 섹션의 목표는 하나의 완성된 웹 애플리케이션을 만드는 것입니다. 이를 위해 HTML로 구성된 뼈대 위에 JavaScript로 기능을 구현하고, CSS로 스타일을 입히는 과정을 거치게 될 것입니다. 따라서, 이 단계에서 HTML에 대한 기본적인 개념과 사용법을 충분히 익히는 것이 중요합니다. Chapter2-1. HTML 기본 구조와 문법 HTML - 웹 페이지의 틀을 만드는 마크업 언어 선언을 빼고 나머지 태그들은 쌍이 있다. 여는 순서와 닫는 순서가 철저하게 지켜지고있다. 이것을 트리 구조라 한다. HTML 태그들은 정말 많이 있다. 다 외우기..
마크업언어 : HTML HTML은 집을 짓기 전 설계도에 따라 구조를 잡듯,웹 페이지의 구조를 짜는 언어 Chpater1. 웹 개발 이해하기 HTML - 구조(Structure) CSS - 스타일(Presentation) JavaScript - 상호작용(Interaction) 웹개발과정은 건물을 짓는것과 같다. 너무 어려우면 강아지 집을 짓는것을 생각해보자. 누군가가 강아지 집을 지을때 강아지 집의 구조를 간단히 그리는 것은 웹개발에서 HTML 을 작성하는 거와 같다. 누군가가 그린 강아지 집의 구조를 그릴때 '어디가 문이다', '어디가 제목이다',이런 정보를 기록해야한다. 그것을 HTML로 문서화하면 오른쪽 그림과 같다. 누군가가 강아지 집에 대한 디자인에 대한 정보를 기록해논것을 문서화하면 css를 ..
함수 내부에서의 console.log( )와 return 차이 function z ( a,b ) { console.log(a+b) } 이렇게하고 z ( 1,2 ) 를 불러오면 콘솔창에 3과 undefined 가 뜹니다. undefined가 뜨는 이유는, function z 안에 값이 담겨져 있지 않기 때문입니다. function z ( a,b ) { return a+b } 을 해준다면, function z 안에 a+b라는 값이 담겨지면서 콘솔창에 3만 뜨게 됩니다. console.log(2) 는 console 에 2를 출력을 하기 위함이고, return 2는 함수에서 2를 반환하기 위함이다. 콘솔에서 보이는건 같겠지만 예를 들어 2에다가 2를 더한 값을 출력한다고 해보자. function returnNu..
✅ undefined 해당 변수가 비어있는 상태임을 나타낸다. 아예 정의가 되지 않은 값이다. boolean으로 형변환이 일어나는 경우 false가 된다. const foo; console.log(foo); // undefined console.log(typeof foo); // "undefined" console.log(!foo); // true ✅ null 정의는 되어있음에도 비어있음을 의미하는 값이다. boolean으로 형변환이 일어나는 경우 false가 된다. const bar = null; console.log(bar); // null console.log(typeof bar); // "object" console.log(!bar); // true null의 type이 "object" 인 것은 ..
📌 변수 개요 JavaScript에서도 데이터를 편하게 다루기 위해 데이터에 이름을 붙일 수 있다. 그 이름을 바로 변수라고 부른다. 데이터를 편리하게 저장하고 꺼내 쓸 수 있도록 변수에 대해 학습하자. 각각의 데이터에 이름을 짓는 방법을 알게 된다. 개발자답게 표현하자면 변수를 선언하고 값을 할당할 수 있는 것을 의미한다. 또 변수를 활용하여 복잡한 작업을 간단하게 처리할 수 있게 된다. 📌 변수의 선언과 할당 ✏️ 변수의 선언과 할당 문제를 해결하기 위해 컴퓨터와 소통하기 위해서는 특정 데이터에 대해 같은 이름을 공유하고 있어야 한다. JavaScript에서도 특정 데이터에 이름을 붙일 수 있는데, 이를 변수라고 한다. **반복적으로 사용하는 숫자를 컴퓨터가 특정한 이름(변수명)으로 기억하도록 하고 ..
📌 Number 타입 ✅ Number 타입 JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입이다. 정수(integer)와 실수(float)을 모두 표현할 수 있다. 100; // 정수를 표현할 수 있습니다. -100; // 음수를 표현할 수 있습니다. 100.123; // 실수를 표현할 수 있습니다. typeof 연산자로 해당 값이 숫자 타입인지 확인할 수 있다. typeof 100; // 'number' typeof -100; // 'number' typeof 100.123; // 'number' 같은 숫자 값 간에는 간단한 사칙연산을 할 수 있다.아래 예시에서 사용한 수학 기호 ( + - * / )를 자바스크립에..
📌 코드 기초 📖 코드 기초 개요 JavaScript의 기본 개념들을 학습하기 위해서는 코드를 실행하는 방법부터 알아야 한다. 또, JavaScript엔진이 어떻게 코드를 읽는지, 내가 작성한 코드를 어떻게 출력할 수 있는지에 대해 알아야 한다. 📌 코드 실행 ✅ JavaScript 코드 실행하기 JavaScript는 원래 브라우저에서 실행하기 위해 만들어진 프로그래밍 언어이다.그래서 HTML 파일과 JavaScript 파일을 함께 브라우저에서 실행해야 작동한다. 혹은 따로 Node.js라는 JavaScript 런타임을 컴퓨터에 설치해야 한다. 다만, 처음에는 좀 더 쉽게 JavaScript를 학습하기 위해서 StackBlitz에서 JavaScript 코드를 실행하자. ✅ StackBlitz로 코드를 실..
🌈 목표: 수료후 1~2개월이내에 웹 프론트엔드 개발자 취업을 목표로 매일, 꾸준히 공부를 하자! 🗓️ 스케쥴 관리 : *평일* 08:00 ~ 08:30 기상 및 세수 08:30 ~ 09:00 오늘 배울 내용 간단히 예습 09:00 ~ 12:00 코드 스테이츠 오전 강의 12:00 ~ 13:00 점심시간 13:00 ~ 18:00 코드 스테이츠 오후 강의 18:00 ~ 19:00 저녁시간 19:00 ~ 22:00 그날 배운 내용 복습하기 / 블로깅 22:00 ~ 24:00 개인정비 및 취침 (적어도 24시전엔 취침!) *주말* 09:00 ~ 09:30 기상 및 세수 09:30 ~ 12:00 오전 공부 12:00 ~ 13:00 점심시간 13:00 ~ 18:00 오후 공부 18:00 ~ 19:00 저녁 시간 ..
