후회가 없도록

1. 브라우저 렌더링 과정 1) DOM(Document Object Model) tree 생성: 렌더 엔진이 HTML을 파싱하여 DOM 노드로 이루어진 트리 생성. 2) render tree 생성: css 파일과 inline 스타일을 파싱. DOM과 CSSOM을 합친 렌더 트리를 생성. 3) Layout(reflow): 각 노드들의 스크린에서의 좌표에 따라 위치 결정. position이나 size 등도 해당 단계에서 계산. 4) Paint(repaint): 실제 화면에 출력. 위 과정에서 웹 페이지에 어떠한 변화가 발생했을 때, 2번 과정부터 다시 재진행 된다. 즉, 렌더 트리가 재생성 되고 이후의 과정이 다시 반복되며 화면에 UI 재출력이 되는 것이다. 2. Virtual DOM 1) Virtual D..

※ 해당 글에서는 CSS의 선택자를 임의로 태그명을 호출하는 것처럼 작성했지만, 실제로는 선택자 작성 방법을 참고하여 호출할 것. 1. CSS 박스 모델 HTML과 CSS에서는 각 태그와 구역을 박스 모델로써 나타낸다. 그리고 여러 개의 박스 모델들이 각각 아래와 같은 구조를 가지며 차곡차곡 쌓인 것이 웹 페이지이다. 이 박스 모델은 margin, border, padding, content로 구성된다. 이 중 margin, padding은 구역의 넓이와 높이, 여백 등을 설정할 수 있는 속성으로, 상하좌우 설정이 가능하다. top, right, bottom, left 순서로 한 줄에 속성값 작성도 가능하다. /* 상하좌우 중 원하는 방향 속성만 지정 */ box { margin-top: 50px; ma..

1. 선택자 CSS에서는 선택자라는 것이 있는데, 이는 HTML의 어떤 영역과 요소에 스타일을 적용할지 가리키는 것이다. 크게 태그 Type, Class, ID로 구성되어 있고, 세 가지 모두 각 태그의 인라인 설정(속성)에서 확인할 수 있다. 1) Type 태그명으로 요소를 선택 childTag { 속성: 속성값; } 2) Class 클래스 속성값. 태그 속 class 속성의 속성값으로, CSS에서는 클래스 바로 앞에 마침표(.)를 찍어서 표현한다. .ClassName { 속성: 속성값; } 3) ID ID 속성값. 태그 속 id 속성의 속성값으로, CSS에서는 ID 바로 앞에 샵(#)을 붙여서 표현한다. #IDName { 속성: 속성값; } 4) 같은 부모 선택자 내에서 특정 자식 선택자만 고르고 싶..

이 글의 내용은 HTML5를 기준으로 공부한 내용을 정리한 글이다. 아래 태그 중에는 몇 가지 태그를 제외하고 HTML5 외 버전이나 브라우저에서 사용할 수 없는 태그도 존재함을 유의할 것. 태그 정리에 앞서 HTML에서 알아두면 좋은 내용 1. HTML 주석 기호: 2. VSC(Visual Studio Code)에서 작성하는 경우에 !(느낌표) 하나를 입력한 후, 탭(tap) 키를 누르면 VSC에서 기본적인 구조를 작성해준다. 3. HTML에서 한글을 사용하기 위해서는 : 문서와 관련된 요약 정보를 담는 태그 4) : 눈에 보이는 웹 사이트의 내용과 모든 구조의 설계 내용을 담는 태그 5) : character setting의 약자로, 모든 문자(한글 등)를 웹 브라우저에서 깨짐 없이 표시할 수 있게 ..

HTML 사용에 있어서 재밌는 통계가 있는데, 앞으로 HTML을 작성함에 있어서 참고 자료로도 좋을 것 같아 간단하게 기록한다. 이 통계는 2021년 7월 기준이다. 1. 평균적으로 한 웹페이지에서 사용하는 태그의 개수는 아래와 같은 분포를 보이고, 32개인 경우가 가장 많다. 2. 한 웹페이지에서 사용되는 태그는 평균적으로 아래와 같은 빈도를 보인다. 3. 출처 https://www.advancedwebranking.com/html/#doctype The average web page from top twenty Google results Apparently, an average web page uses thirty-two different element types: The thirty-two elem..

한 달 전에 클론 코딩으로 만든 자그마한 프로젝트를 블로그에 정리하기 위해 오랜만에 열어보았다. 고작 'index.html', 'style.css', 'app.py'라는 이름의 3개 파일이 전부인데도, 그 사이에 몇몇 부분은 까먹거나 이해가 안 갔다. (하... 이제부턴 진짜 프로젝트와 공부도 중요하지만, 거기서 배운 점, 어려웠던 점 등을 기록으로 남기는 과정도 중요하게 여기고 기록해야겠다...ㅠㅠ) 그래도 나름 쉬운 언어(언어라고 하기에도 부끄럽지만)였기 때문에 다시 수정해보고, 결과를 보는 건 재밌었다. 그. 런. 데. 도저히 이해가 안 가는 게, 어느 순간부터 CSS 파일을 수정하고 위치를 바꿔서 링크해도 HTML에서 제대로 적용이 안 된다. CSS 파일을 제거했을 때 아예 HTML 모양이 망가지..

저의 경우에 아주 간단한 개인 프로젝트를 진행하기 위해 AWS를 통해 가상 서버를 만들고 이용해봤고, 아래와 같은 과정을 진행했습니다. 1. AWS 인스턴스 생성(가성 서버 생성과 같은 의미입니다.) 2. 깃 배시(Git bash)를 통해 내 노트북에서 가상 서버 컴퓨터로 접속 3. 파일 질라(File Zilla)로 가상 서버 컴퓨터에 내 프로젝트 파일 복사 4. 가상 컴퓨터에 있는 프로젝트 원격 실행 및 원격 종료 4개의 과정 중 1번, 2번 과정은 아래 링크의 글에 작성했습니다. https://as-j.tistory.com/44 [Web] AWS 가상 서버 이용하기(1) - AWS 인스턴스 생성하기 스타트업이나 개인 프로젝트를 하다 보면 제작한 웹 페이지를 24시간 돌아가는 서버를 통해 모두에게 서비..

스타트업이나 개인 프로젝트를 하다 보면 제작한 웹 페이지를 24시간 돌아가는 서버를 통해 모두에게 서비스를 공유할 수 있어야 합니다. 이 글에서는 개인 프로젝트로 원페이지 쇼핑몰 웹 페이지를 만들면서, 만든 파일을 AWS(Amazon Web Service)를 이용해 24시간 돌아가는 클라우드 가상 서버에 연결한 방법을 정리해본 글입니다. AWS를 통해 가상 서버를 만들고, 이 가상 서버에서 제가 만든 프로젝트를 실행시키기 위해 다음과 같은 과정을 진행했습니다. 1. AWS 인스턴스 생성(가성 서버 생성과 같은 의미입니다.) 2. 깃 배시(Git bash)를 통해 내 노트북에서 가상 서버 컴퓨터로 접속 3. 파일 질라(File Zilla)로 가상 서버 컴퓨터에 내 프로젝트 파일 복사 4. 가상 컴퓨터에 있..

GET, POST와 같은 데이터 타입을 이해하려면 우선 API가 무엇인지 이해해야 합니다. 간단하게 요약하면 API는 서버와 클라이언트가 서로 다른 프로그램(예를 들면 서버는 Python, 클라이언트는 html, JS)에서 요청과 응답을 서로 주고받을 수 있도록 만든 체계입니다. 대개 클라이언트는 요청을 보내고, 서버는 이에 대한 응답(데이터)을 제공하는 구조인데, 여기서 이 요청에 대한 종류를 크게 4가지, CRUD로 나눌 수 있습니다. CRUD는 각 알파벳마다 Create, Read, Update, Delete 등의 데이터 요청 방식을 의미합니다. 여기서 각 데이터 요청 방식에 따라 API에서는 마치 스티커(실제로는 메소드라고 부름)처럼 데이터 타입을 미리 정의하고, 각 방식에 알맞게 요청과 데이터가..

1. jQuery jQuery는 HTML 사용자가 HTML을 조금 더 잘 제어하기 위한 방법 중 하나로, 자바스크립트(Javascript)를 더 편하게 사용할 수 있게 하는 자바스크립트 함수의 모음(라이브러리)입니다. jQuery를 통해 다음과 같이 기존의 긴 자바스크립트 명령을 직관적인 함수로 사용할 수 있습니다. document.getElementById('element').style.display = "none"; 위 명령은 순수하게 자바스크립트 언어로 작성한 명령이고, 해당 id(예시에서는 'element')의 태그를 숨긴다는 명령입니다. $('#element').hide() 맨 위의 명령과 같은 명령이며, 보다 직관적이고 편리한(짧은) 것을 알 수 있습니다. 또, 알 수 있는 것은 자바스크립트 ..