브라우저 랜더링 과정이라는 것은 도메인 주소(http://www.~~.com)를 브라우저에 요청할때 해당 html과 css, javascript를 불러와서 화면에 표현하는 과정을 뜻합니다.
1. HTML파일을 파싱 : 웹 브라우저에서 HTML파일을 읽어오고 구조를 해석하는 과정을 말합니다. 브라우저가 HTML문서를 파싱하면 DOM(Document Object Model)트리를 만듭니다. DOM은 웹 페이지의 구조를 표현하는 트리구조로, 각 요소는 노드로 표현합니다. (노드란 HTML태그를 뜻합니다. 태그와 태그의 요소, 컨텐츠 요소를 다 포함합니다.)
2. CSS 파일을 파싱 : HTML파싱 후에 CSS파일을 파싱하여 CSSOM(CSS Obeject Model)트리를 생성합니다. CSSOM은 스타일 규칙을 표현하는 트리구조로 각 스타일 규칙은 노드로 표현됩니다.
3. DOM CSSOM 결합 : 브라우저는 DOM과 CSSOM을 결합하여 Render Tree(랜더트리)를 생성합니다. 랜더 트리는 화면에 표시되는 요소들만 구성 된 트리구조로, 각 요소는 화면에 어떻게 배치될지 결정하는 정보를 가지고 있습니다.
4. 레이아웃 : 랜더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산하여 레이아웃을 수행합니다. 이 과정에서 각 요소의 크기, 위치, 여백, 색상 등이 계산되고 레이아웃은 화면에 보여지는 모습을 그려주는 과정으로 굉장히 중요한 과정입니다.
5. 페인팅 : 레이아웃이 완성되면 브라우저는 화면에 요소들을 페인팅하여 실제 화면에 표시합니다. 이 과정에서 각 요소의 색상, 텍스트, 이미지 등이 화면에 그려지며 사용자가 볼 수 있는 최종 결과물이 나오게 됩니다.
자바스크립트 코드 입력 시 주의사항(코딩 컨벤션 / 코딩 스타일)
1. 자바스크립트는 대/소문자를 구분하여 작성해야 합니다. - document.write() -> 올바른 문법 - Document.Write() -> 틀린 문법 / 오류납니다.
2. 코드를 한 줄 작성한 후에는 ;으로 마무리 합니다. 세미콜론을 쓰지 않고 한줄에 두개의 코드를 작성하면 오류가 납니다. * 한 줄에 한 문장만 쓰는 것이 가독성이 좋습니다. - document.write(); -> 올바른 문법 - document.write()document.write -> 틀린 문법 / 오류납니다.
3. 문자형 데이터를 작성할 때에는 ""(큰따음표)와 ''(작은따음표)의 겹치 오류를 조심해야 합니다. 어떠한 한 문장을 강조하고 싶을 땐 아래와 같이 입력합니다. - document.write('hello "박땡땡" word') -> 올바른 문법 / 앞뒤로 따음표가 동일해야합니다. - document.write("hello '박땡땡' word") -> 올바른 문법 / 앞뒤로 따음표가 동일해야합니다. - document.write("hello \'박땡땡\' word") -> 올바른 문법 : 굳이굳이 강조하고 싶은 문장을 작은따음표로 사용하고 싶다면 역슬래쉬￦를 작성하는 것도 올바른 문법입니다. : \엔터 위에 있는 역슬래쉬(￦).\를 기호 앞에 붙혀주면 문자의 시작과 끝을 구분하는 구분자가 아니라 다음에 오는 기호를 단순한 문자로 처리합니다. - document.write('hello '박땡땡' word') -> 처음과 끝이 똑같은 따음표라 오류납니다.
4. 코드를 작성할 때에는 {}나 [], ()의 짝이 맞아야 합니다. - document.write() -> 올바른 문법 - document.write(} -> 틀린 문법 / 오류납니다.
변수란
변수는 변하는 값을 저장할 수 있는 메모리 공간, 데이터를 담을 수 있는 그릇이라고 할 수 있습니다. 변수에는 데이터가 오직 한 개만 저장됩니다. 만약 새로운 데이터가 들어오면 기존에 있던 데이터는 사라지고 마지막에 남은 데이터만 남습니다. 변수에 담을 수 있는 데이터 종류로는 문자형(String), 숫자형(Number), 논리형(Boolean), 그리고 빈(Null)데이터와 undefined데이터가 있습니다.
변수 선언이란
변수를 사용할 준비를 하는 과정을 '변수 선언' 이라고 합니다. 변수를 선언할 때에는 var 키워드를 변수명 앞에 붙혀줍니다. 변수명에는 한글을 사용할 수 없으며, 영문, 숫자 그리고 일부 숫자 그리고 일부 특수문자( _,$ )만 포함 할 수 있습니다. 변수명은 의미에 맞게 만드는 것이 좋습니다. 예를 들어 사용자의 이름을 넣을 변수라면 var userName = '김땡땡'; 이런 식으로 짓는 것이 좋습니다. 만약 변수명이 단어와 단어의 조합으로 되어있다면 두번째 단어의 첫 글자는 대문자로 써주어야 합니다. 이런 코딩 컨벤션을 낙타의 등 모양과 닮았다고 하여 '카멜 표기법' 이라고 합니다. 또는 user_name 이런식으로 지어도 됩니다. (기본형) var 변수명 = 값; = > 변수에 초기화값을 넣어 초기화한 상태 var 변수명; = > 변수를 만든 상태
document.write('데이터')
브라우저에 (' ')안에 있는 문자를 표시할 때 사용하는 문법입니다. document는 html 문서입니다.
consol.Log('데이터')
브라우저 개발자 도구에 '콘솔창' 라는 것이 있습니다. 이 콘솔창에서는 자바스크립트 코드의 진행 같은 것을 간단하게 출력해 볼 수 있습니다. 콘솔창에 데이터 결과를 확인하고 싶을때 consol.Log를 사용합니다.
지금까지 배운 내용 익히기(영상)
변수 사용해보기
마무리
오늘은 처음 접해보는 자바스크립트에 대해 배워보았는데요:) 저도 처음 배워보는거다보니 설명이 많이 부족하지만 이해 부탁 드립니다 ㅠㅠ
