html
Express (2) 동적 웹사이트 만들기 (계산기 서비스)
이번 포스팅에서는 Express를 사용하여 간단한 계산기 서비스를 제공하는 웹 애플리케이션 페이지를 만들어 보도록 하겠습니다. 계산기 html 작성 계산기로 사용할 html 문서를 아래와 같이 작성해줍니다. Calculator Submit 여기서 핵심은 바로 form 태그를 사용했다는 것인데요. 중요한 사항들만 간단히 정리해보도록 하겠습니다. form 태그를 사용하면 정보를 제출할 수 있음 action은 form 제출을 처리하는 URL을 지정하며 데이터가 도착하는 URL입니다. 사용할 수 있는 대표적인 HTTP 메소드는 post, get post는 데이터를 request body에 담아 보냄 get 은 action url에 ? 와 함께 전달됨 더 알아보기 https://developer.mozilla.o..
HTML meta chartset UTF-8 인코딩 설명 ✔️
UTF-8는 문자 인코딩에 가장 많이 사용되는 방법입니다. 이는 유니코드 시스템 코드 테이블을 사용하여, 현존하는 모든 문자들을 표시할 수 있습니다. 이 때문에, 인터넷에서 사용되는 대부분의 문자 세트에는 UTF-8 방식이 가장 많이 사용되고 있습니다. 컴퓨터는 글자, 숫자, 기호를 표시하기 위해 특정한 문자를 필요로 합니다. 이러한 일련의 문자는 특정한 순서를 따라 정렬되어 있습니다. 이를 문자 집합(character set)이라고 하는데요. 컴퓨터는 문자를 올바르게 파악하기 위해, 문자 인코딩이라 하는 비트(bits)의 패턴을 사용합니다. 문자 집합은 특정한 순서를 따라 이미 명시되어 있기 때문에, 문자 인코딩을 위해서는 해당 비트 패턴이 문자에 할당되어야 합니다. 만약, 선언된 문자 인코딩이 실제로..
DOM이란 무엇일까요?
DOM(Document Object Model)은 문서를 노드 및 객체로 표현한 것입니다. DOM은 웹을 다루는 데 사용되는 일종의 API입니다. DOM 모델을 사용하여 문서를 객체화하여 구조, 스타일, 콘텐츠를 변경할 수 있습니다. DOM은 웹 문서를 트리 구조를 따라 웹 문서를 계층적으로 표현합니다. 다음 그림을 참고해보세요. 이는 기본적인 HTML 문서를 노드 트리를 따라 구조적으로 표현한 DOM의 예시입니다. DOM과 자바스크립트 앞서 DOM이란 웹 문서를 다루는 데 사용되는 인터페이스라 정리했는데요. 대부분의 경우 자바스크립트를 통해 DOM을 제어할 수 있습니다. 다음 예시는 문서의 모든 태그를 선택하고 원하는 문단의 내용을 변경합니다. const paragraphs = document.quer..
<div>와 <span> 태그 차이 설명
와 은 스타일링을 목적으로 존재하는 HTML 코드입니다. 이는 콘텐츠를 태그로 둘러싸면 하나의 문단임을 의미하는 것과는 다르게, 어떠한 의미론적 의미(semantic meaning)을 갖지 않는 스타일 코드입니다. 이러한 와 은 콘텐츠 일부에 특별한 스타일 효과를 적용할 수 있는 유용한 코드입니다. 태그 설명 태그는 블록 레벨 요소로 보통 긴 콘텐츠를 그룹핑하는 데 사용합니다. 이를 통해 웹페이지의 레이아웃을 구성할 수 있습니다. 태그 설명 태그는 인라인 레벨 요소로 보다 보통 블록 레벨 요소 내 적은 콘텐츠 텍스트를 그룹화하는 데 사용합니다. , 활용 방법 와 은 보통 스타일링을 목적으로 class 와 id 속성과 함께 사용됩니다. 즉, 각 태그에 class 와 id 를 부여하고 각 클라스와 아이디 별..
HTML이란? HTML 뜻 설명 ✔️
HTML은 HyperText Markup Language을 뜻합니다. 어떤 의미일까요? 용어를 하나씩 살펴보도록 하겠습니다. 하이퍼텍스트 먼저, 하이퍼텍스트(HyperText)입니다. 하이퍼텍스트는 링크를 통해 한 문서에서 다른 문서로 이동할 수 있는 텍스트입니다. 하이퍼는 초(超)라는 의미를 갖고 있죠. 여러분이 어떻게 지금 이 웹페이지에 방문할 수 있었을까요? 바로 하이퍼텍스트를 통해서 입니다. 검색 또는 우연한 기회로 이곳으로 이동하는 링크가 걸린 텍스트를 클릭한 것입니다. 이처럼 여러 HTML 문서들은 하이퍼텍스트를 통해 서로에게 연결됩니다. 마크업 다음으로 마크업(Markup)입니다. 마크업은 텍스트(콘텐츠)가 표시되는 방법을 의미합니다. 쉽게 이해가 안 될 수도 있지만, 예를 살펴보면 간단합니..
HTML에 자바스크립트를 연결하는 세 가지 방법 ✔️
HTML 문서에서 다음 세 가지 방법으로 자바스크립트 코드를 연결할 수 있습니다. 1. script 태그 내에 직접 작성 이때, HTML 4.x 버전의 경우 아래와 같이 그러나 HTML 5의 경우에는 자바스크립트가 기본 언어로 지정되어 있기 때문에 이러한 속성을 부여해 주지 않아도 됩니다. 2. 외부 파일 추가 HTML 파일 내에 직접 코드를 작성하지 않고 싶다면, 다음과 같이 별도의 외부 파일로 자바스크립트를 삽입할 수 있습니다. 이처럼 외부 파일을 통해 자바스크립트를 추가할 경우, HTML과 코드가 분리되어 관리가 용이하며, 내부에 직접 자바스크립트를 추가하는 것보다 페이지 로딩 속도가 빨라질 수 있습니다. 참고 자료 w3schools - JavaScript Where To Tutorial Teach..
