AngeRay

Visual Studio Code 를 통해 HelloWorld 출력 1. Hello world를 화면에 출력 2. 자바스크립트 preparation(환경설정) 3. script를 html에 포함 시 어떤 방식으로 포함해야 가장 효율적인지?(async와 defer의 차이점??) node.js에는 자바스크립트 엔진이 있어서 브라우저 없이도 자바스크립트가 실행 가능하다. Console APIs에서 그중에 log라는 함수를 이용해서 내가 원하는 메세지를 Console창에 출력하는 것이 확인 가능하다. *** 여기서 API란? Application Programming Interface 의 약자로 Web APIs는 자바스크립트 언어자체가 포함되어 있는것이 아니라 브라우저가 제공하는 즉 브라우저가 이해가능한 함수들..

새로운 언어를 배울때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생배경에 대해 이해하는 것이 매우 중요하다. 이 언어를 배웠을 때 어느 분야에서 활용가능하고, 나에게 어떤 이득이 생길 수 있는지에 대한 이해가 필수 이다. 당시에는 HTML과 CSS로 간단하게 웹페이지를 만들었는데, HTML의 약자인 text에 link를 걸어서 페이지와 페이지 사이에 이동만 가능한 웹페이지 였다. 이미 사용자들에게 보여지고 있는 웹사이트 안에서 DOM 요소들을 조작하면서 다이다믹한 웹사이트를 만들기 위해서 새로운 언어를 추가하기로 한다. 브랜든은 짧은 시간안에 프로토타입을 베이스로한 유연한 언어를 개발하게 된다. (프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 시제품이 나오기 전..

text-styling 텍스트 색(color 라는 property 사용) 텍스트에 색깔을 설정하는 방법 색을 지정해주는 방법이 몇 가지가 있다. 1. 색이름을 지정해준다. 모든 색이 있지는 않지만 브라우저에서 140개의 색을 지원한다. 2. RGB값을 작성한다. 모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있다. 이 표현 방식이 바로 'RGB'이다. 3. HEX값(16진법) HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식이다. 몇 가지 텍스트 스타일링 텍스트의 굶기를 정하는 font-weight. - 100 부터 900 까지의 값들을 가질 수 있다. (100이 가장 얇고, 900이 가장 굵다.) - font-weight : normal 이 400과 같다(de..

도움이 되는 사이트 웹 개발에 유용한 사이트 당연히 google 이다. 구글링을 통해서 HTML, CSS에 대한 정보를 쉽게 찾을 수 있다. W3Schools : https://www.w3schools.com/ W3Schools Online Web Tutorials HTML Example: This is a heading This is a paragraph. Try it Yourself CSS Example: body { background-color: lightblue; } h1 { color: white; text-align: cente www.w3schools.com stackoverflow : https://stackoverflow.com/ Stack Overflow - Where Develope..

크롬 개발자 도구 크롬 개발자 도구 내가 원하는 요소(element)를 우클릭 후 검사를 클릭하면 해당 요소가 선택된다. 또는 F12를 누른다. user agent stylesheet 는 브라우저에서 각 요소마다 정해주는 스타일 이다. 생각해보면 폰트크기, 폰트굵기도 설정해 준 적이 없는데 h1~h6는 스타일을 가지고 있다. CSS 파일에서 직접 스타일을 적어주면 user agent stylesheet에 있던 스타일은 지워져서 나온다. 이건 쓰이지 않았다는 의미이다. 왜냐면 CSS파일에서 덮어썼기 때문이다. 구체적인 property를 우선순위로 설정한다. Computed 탭은 computed는 한국말로 계산되었단 뜻인데, 실제로 해당 요소에 입혀진 스타일들만 쭉 정리되어 있다. 그리고 따로 설정하지 않은..

코멘트 코멘트 웹 사이트에 아무런 영향을 주지 않는다. 왜냐면 브라우저가 무시해 버린다. 그렇다면 코멘트를 도데체 왜 쓰는 것일까? 코멘트는 일종의 노트 같은 건데, 코드가 많아도 코멘트를 써놓으면 한눈에 알 수 있다. 실제로 코드가 길로 복잡할수록 코멘트는 빚을 바란다. 코멘트를 적절히 사용해서 잘 정돈된 코드를 작성한다. HTML comment CSS comment /* */ JS comment // Python comment # 코멘트는 자주 쓰이는 것이기에 보통 단축키가 있다. 내가 사용하는 visual studio code에서는 ctrl + / 이다.

HTML tag types HTML에 tag가 아무리 많아도 2종류로 분류할 수 있다. 분류법을 보기전에 story로 이해력을 도와보자 예를 들어 이사를 간다고 했을때, 한꺼번에 모든 짐을 한박스에 넣는다면 이사를 가서 짐을 풀고 정리하기 굉장히 힘들다. 그래서 우리는 이사할 때 이이템들을 비슷한 것들 끼리 분류한다. 이렇게 정리하면 labeling이 쉬워진다. 그래서 우리는 box model을 이용해서 tag들을 관리하게 된다. tag는 box와 item이 되는 것 둘 중 하나 이다. 사용자가 볼 수있는 item들이 있는가하면 이 item들을 잘 정리할 수 있도록 도와주는 sectioning을 도와주는 보이지 않는 box가 있다. 이렇게 보이지 않는 box 들은 당연히 나중에 CSS를 통해서 styli..

Document and website structure In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure. Ba..

프론트엔드 개발자 되기 입문편_HTML HTML(Hypertext Markup Language) HTML은 웹을 이루는 가장 기본적인 빌딩 블럭이다. 이 언어는 web content의 의미와 구조를 정의한다. 예를 들어 레고로 치면 가장 밑바닥에 있는 블럭이다. HTML은 웹컨텐츠의 구조와 의미를 결정한다. Hypertext란? web page들의 연결을 의미한다. Links는 web의 기본적인 면이다. HTML 과 같이 쓰이는 CSS와 JS는 부가적인 언어일 뿐 HTML 없이는 웹사이트를 만들 수 없는 것이다. 웹 브라우저에 보여지도록 디자인된 문서를 의미한다. 이 언어는 표준화된 Markup 언어를 사용하고 있다. Markup language 언어란 ? 일반적인 텍스트와 문법적으로 구분하기 위해서 문..

프론트엔드 개발자 되기 입문편 프론트엔드 공부 순서 가장 기본적인 것은 HTML(집의 골격, 구조를 형성), CSS(집을 이쁘게 페인팅하고 꾸미는 역할), JavaScript(집을 조금더 스마트하게 꾸미는 역할) 이 세가지는 기본기를 탄탄하게 한다음에 다음 단계로 넘어간다. 이 세가지의 기본을 모두 탄탄히 잡았다면 TypeScript 공부를 한다. 온라인 강의 어떻게 들어야 더 효율적으로 내것으로 만들 수 있을까? 1. 목표를 확실하게 설정한다. → 4주안에 완강하겠다 보다는 좀 더 구체적인 계획을 세운다. → 나는 이 강의를 듣고 나만의 HTML, CSS로 구성된 포트폴리오를 만들것이다. 2. 자신과의 약속을 한다. → 한번 시작한건 끝까지 하겠다는 결심으로 온라인강의를 시작했다면 끝까지 완수한다. 3..