티스토리 뷰
1. Front-End vs. Back-End
2. Rendering(랜더링)
3. Web Browser(웹 브라우저)
4. Visual Studio Code
5. HTML(Hyper Text Markup Language)
1. Front-End vs. Back-End
Front-End와 Back-End의 차이는 앞에 붙은 Front와 Back의 단어 뜻에서 직관적으로 알 수 있다. Front-End는 눈에 보이는 곳, Back-End는 눈에 보이지 않는 곳이라고 생각하면 쉽다. Front-End 웹 개발은 HTML, CSS, JavaScript의 사용을 통해 웹 사이트의 그래픽 사용자 인터페이스를 개발하여 사용자가 해당 웹 사이트를 보고 상호작용할 수 있도록 하는 것이다. Back-End는 컴퓨터와 응용프로그램 또는 컴퓨터와 데이터베이스(DB) 사이의 인터페이스 부분을 말한다.
Front-End는 주로 HTML, CSS, JavaScript를 쓰고, Back-End는 MySQL, django 등을 쓴다.
2. Rendering(랜더링)
랜더링이란 HTML, CSS, JavaScript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다. 대부분의 브라우저는 랜더링을 수행하는 랜더링 엔진을 갖고 있다. 하지만, 모든 브라우저가 같은 랜더링 엔진을 사용하지는 않는다.
랜더링 과정은 다음과 같다.
(1) DOM(Document Object Model), CSSOM(CSS Object Model) 생성
랜더링의 가장 첫 번째 단계는 서버로부터 받은 HTML, CSS를 다운로드 받는 것이다. 그리고 HTML, CSS 파일은 단순한 Text이므로 연산과 관리가 유리하도록 Object Model로 만들게 된다. HTML, CSS 파일은 각각 DOM Tree와 CSSOM으로 만들어진다.
(2) Render Tree 생성
DOM Tree와 CSSOM Tree가 만들어졌다면 그 다음으로 이 둘을 사용하여 Render Tree를 생성한다. 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와 달리 Render Tree는 스타일 정보가 설정되어 있으며 실제 화면에 표현되는 노드들로만 구성된다.
(3) Layout
Layout 단계는 브라우저의 뷰포트(viewport) 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 즉, 생성된 Render Tree 노드들이 가지고 있는 스타일 속성에 따라서 브라우저 화면의 어느 위치에 어떤 크기로 출력될지 계산하는 단계이다.
(4) Paint
Layout 계산이 완료되면 이제 요소들을 실제로 painting한다. 이전 단계에서 계산한 스타일 값들을 Render Tree를 이용해 채워넣게 된다. 이때 처리해야 하는 스타일이 복잡할수록 Rendering 시간이 늘어나게 된다.
3. Web Browser(웹 브라우저)
웹 브라우저는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다. 웹 브라우저의 종류로 Safari, Firefox, Chrome, Edge, Opera 등이 있다. 웹 브라우저는 주소를 나타내는 영역(네트워크)과 화면을 보여주는 영역(랜더링)으로 나뉜다. 화면을 보여주는 영역은 HTML, CSS, JavaScript 언어를 이용한다.
[그림 5]와 같이 웹 브라우저는 주소를 나타내는 영역과 화면을 나타내는 영역으로 나뉜다.
4. Visual Studio Code
Visual Studio Code(VS Code)는 Microsoft가 Windows, macOS, Linux용으로 개발한 소스 코드 편집기이다. 디버깅 지원과 Git 제어, 구문 강조 기능 등이 포함되어 있으며, 사용자가 편집기의 테마와 단축키, 설정 등을 수정할 수 있다. 다시 말하자면, Visual Studio Code는 개발자의 코드 작성을 쉽게 할 수 있도록 해주는 도구이다. 메모장 기능을 강화한 것이라고 봐도 무방하며, 자동완성 기능을 지원한다.
'확장'탭의 단축키는 Ctrl+<Shift>+X이다.
웹 개발을 위해 필요한 라이브러리는 [그림 7]과 [그림 8]에 나와있는 korean과 live server이다.
5. HTML(Hyper Text Markup Language)
HTML은 웹 페이지를 위한 지배적인 마크업 언어이다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호<>에 둘러싸인 "태그"로 되어있는 HTML element 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 JavaScript와 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.
HTML 언어는 좌측상단부터 사람이 글자를 읽듯이 읽는다. 꺾쇠 괄호<>를 이용해서 쓰는 부분들은 꼭 </>로 닫아주어야 한다. (input과 같은 예외도 존재한다.) HTML의 구성요소로는 크게 head와 body 영역이 있다. head 영역의 <title></title>은 웹 페이지의 최상단에 페이지 이름이 표시되어 나타나게 한다. <body></body>는 화면이 나타나는 영역에 표시된다. body 영역을 잘 활용할 줄 아는 사람이 HTML 언어를 잘 다루는 사람이라고 한다. 그리고 트리구조를 띠고 있는 HTML 언어는 들여쓰기를 신경써서 해야 한다.
[그림 10]의 코드를 live server를 이용해 웹 페이지에 구동했을 때 [그림 11]과 같이 나타난다.
HTML의 여러 태그에 대해 정리해보았다.
| 종류 | 속성 | 설명 |
| <h1></h1> ~ <h6></h6> | block | 제목으로 많이 쓰며, h1에서 h6으로 갈수록 폰트 사이즈가 작아진다. |
| <ul></ul>, <li></li> | block | 순서가 없는 목록(Unorder List)이며, <ul> 내부에 <li> 요소를 포함하여 각 항목을 표시한다. |
| <a></a> | inline | Anchor의 약자로, <a>태그는 혼자 사용하지 않고, href와 같은 속성을 함께 사용한다. |
| href | - | Hypertext Reference의 약자로, 연결할 주소를 지정하는 속성이다. |
| <div></div> | block | Division의 약자로, 레이아웃을 나눌 때 주로 쓰인다. |
| <span></span> | inline | HTML 문서에서 inline 요소들을 하나로 묶을 때 사용한다. |
| <input> | inline | 사용자의 데이터를 입력받을 수 있는 대화형 컨트롤을 생성한다. (</input>이 필요없다.) |
| type | - | input type의 종류로 text, password, button, radio, submit, checkbox 형식이 있다. |
| value | - | value는 속성값이 화면에 미리 입력되어진 상태로 나타나게 한다. (로그인할 때 편하다.) |
| placeholder | - | placeholder는 입력하는 곳에 무엇을 입력해야 하는지 회색 글자로 알려준다. |
| name | - | name은 그룹을 묶어주는 역할을 하며, radio 버튼은 한 그룹에서 1개만 클릭할 수 있다. |
| id | - | id는 고유한 속성을 나타내며 class와 비슷한 역할을 한다. |
| checked | - | checked는 웹페이지를 새로고침할 때 radio 버튼이 어디에 선택되어 있을지 정해준다. |
| <label for></label> | inline | label은 radio 버튼을 클릭할 때 버튼 옆 글자 클릭도 인식할 수 있게 해준다. |
[그림 13]는 웹페이지에 [그림 12]을 구현한 모습이다. 배경이 까맣게 나타나는 이유는 다크 모드를 사용하고 있기 때문이다.
※ 블록(block) 태그 vs. 인라인( inline) 태그
- 블록 태그는 항상 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.
- 인라인 태그는 새로운 라인에서 시작하지 않고, element의 너비도 해당 라인 전체가 아닌 element의 내용만큼만 차지한다.
'HTML, CSS' 카테고리의 다른 글
| 클릭하면 나타나는 메뉴 만들기 (0) | 2021.12.28 |
|---|---|
| CSS 선택자 (0) | 2021.12.27 |
| 웹페이지 복제하기2 (0) | 2021.12.23 |
| 웹페이지 복제하기1 (0) | 2021.12.22 |
| CSS / Windows 명령어 (0) | 2021.12.21 |
- Total
- Today
- Yesterday
- DOM
- Char
- History 객체
- bom
- 컴파일
- Browser Object Model
- location 객체
- int
- long
- Navigator 객체
- keyword
- c언어
- 키워드
- Document Object Model
- 변수
- short
- 리액트 #React #props #state #javascript
- window 객체
- gcc
- Screen 객체
- 자료형
- stdio.h
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |