본문 바로가기

테크노트44

html 테이블(table)태그와 리스트(list)태그를 알아보자 html의 기본태그 중 하나인 테이블(table)태그를 알아봅니다. table태그는 표를 그리는 태그입니다. 간단합니다. 먼저 용어를 살펴보자면 아래와 같은 내용입니다. 이 중에서 가장 중요한 것은 태그입니다. 왜냐하면 tr은 행(table row)을 나태내며 이해하는 기준이 되기 때문입니다. 뭐든지 줄(라인)이 기준이죠? 거기서 출발하시면 됩니다. 샘플을 보시겠습니다. First name Last name Score Jill Smith 50 Eve Jackson 94 John Doe 80 (결과) 여기서 우리는 테이블에 대한 스타일(style)을 사용할 때 직접 테이블에 속성을 이용하지 말것을 html5 표준은 이야기합니다. html5 에서는 태그의 align, bgcolor, border, cellp.. 2022. 1. 28.
스크립트 선언방법 과 HTML파싱작업 ( ft.페이지로드가 느려지는 경우) html을 동적으로 만드는 방법은 바로 자바스크립트를 사용하는 것입니다. 그래서 자바스크립트 사용하기 위한 선언을 하는데요 이 선언 방법에 따라 전체적인 페이지 로드 속도가 좌우될 수 있는 부분이 존재합니다. 그래서 이번시간은 스크립트 선언방법과 스크립트 속성인 async 와 defer 에 대해서도 알아보겠습니다. 우선 브라우져에서 페이지 로드되는 순서를 알아보도록 하겠습니다. 1. 클라이언트 웹 페이지 접속 시 서버로 요청을 보낸다. (클라이언트는 웹 브라우저) 2. 서버에서 html파일을 응답하고 클라이언트는 html파일을 파싱한다. 3-1. DOM(Document Object Model)트리를 생성한다. 3-2. html 파싱에서 의 css파일 요청이 있다면 서버에 css 파일을 요청합니다. (스크.. 2022. 1. 26.
html에서 블록(block) 태그와 인라인(inline) 태그의 차이점 여기서는 html에서 블록태그와 인라인태그의 차이점에 대해서 간단히 알아보겠습니다. 이러한 블록과 인라인의 개념을 잡는 것이 나중에 css와 html을 잘 사용하는 좋은 방법이 됩니다 (1) html 블록(block) 태그 블록(block)형태의 속성을 가진 태그들이 블록(block)모양을 가집니다. 항상 새로운 줄에서 시작하며, 해당 줄의 모든 너비를 차지 (실습) p요소는 display 속성값이 블록형태입니다. (화면) (2) html 인라인(inline) 태그 인라인(inline)형태의 속성을 가진 태그들이 새로운 줄에서 시작하지 않음 해당 줄의 길이는 전체 중에 일부 내용만 가집니다. (실습) span태그는 display 속성값이 인라인형태 태그임 (화면) 자세한 것은 아래 영상을 참고하세요 2022. 1. 26.
HTML doctype tag 선언 방법 (html 4.01, xhtml 1.0, html 5) html 4.01 : 안정된 표준의 HTML의 버전이다. 이 버전에서는 CSS(Cascading Style Sheet)로 디자인적인 요소를 구분하게 되고, HTML로는 웹페이지의 전반적인 구조만을 명시하는 것을 원칙 추천 doctype 은 xhtml 1.0 : XML과 HTML을 합성하여 더 확장된 태그를 사용할 수 있으며, 문법은 정확히 지켜지지 않는다면 표현되지 않도록 문법 검사를 엄격하게 적용하였다. 이 새로운 웹의 표준이 XHTML이다. 추천 doctype 은 html 5 : W3C가 XHTML을 표준에서 탈락시키게 되고, WHATWG에서 정의한 표준을 따르기로 한다. 결론적으로 HTML5와 CSS3가 표준으로 확정되게 되고, 지금의 HTML5 표준이 완성 관련 영상 내용은 아래를 참조하세요 2022. 1. 25.
html5와 웹표준 SGML(Standard Generalized Markup Language) - HTML의 근본 먼저 처음에 HTML이 생겨나게 된 목적은 하나이다. 웹페이지의 컨텐츠들을 다양한 환경(브라우저)에서 열람을 해도 동일하게 볼 수 있도록 하나의 표현 언어를 생성할 필요성이 생겨난 것이다. 그 약속된 언어의 표현을 정의하려다 보니 이미 존재하는 SGML이라는 것이 눈에 띄었다. SGML(Standard Generalized Markup Language)이라는 것은 문서용 마크업 언어를 정의하기 위한 메타언어이다. 즉 웹페이지가 아니라 전반적인 모든 문서들을 표현하기에 알맞는 언어이다. 당시 웹페이지는 지금의 화려한 웹 페이지와는 달리 텍스트정보와 간단한 이미지가 결합된 형태로 정보를 제공하는 것이 그 목적이었.. 2022. 1. 25.
초보개발자가 알아야 하는 HTML 기초 HTML은 웹페이지를 만드는 언어입니다. 웹페이지에서 서로간에 이해할 수 있는 문서 표준이 HTML 입니다. HTML은 Hypertext Markup Language 의 약자입니다. Hypertext : 문서와 문서가 링크로 연결되어 있다는 의미 Markup : 태크(Tag)를 사용해 구성 Language : 언어라는 의미 우리가 알아야 할 것은 바로 HTML 문법이며 사용법입니다. 태크(tag)는 에서 시작하여 로 마무리 되겠습니다. 마찬가지로 다른 대다수의 태그(tag)들도 이와 같이 시작태그에서 마침태그로 완성 되겠습니다. 그렇다면 기본적인 HTML의 작성 예시를 보겠습니다. HELLO, HTML 이번시간 html 요약 시간으로 html은 크게 헤드와 바디로 구성된다는 것만 알아두면 됩니다. 헤드 .. 2022. 1. 7.
초보개발자가 알아야 하는 CSS 기초 이번 시간은 CSS가 무엇인지에 대해 간략하게 알아보는 시간을 갖겠습니다. CSS란 Cascading Style Sheets 의 줄임말로 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이고 보통 HTML 문서를 시각적으로 꾸미는 용도로 사용한다. 선택자(selector)는 html 문서상에서 각 태그들을 식별할 수 있게 붙여놓은 이름을 선택자로 활용할 수 있습니다. 위의 CCS 타입이 눈에 안 들어오거나 가독성이 떨어진다고 생각할 수도 있으나 선택자의 이름을 임으로 정하고 중괄호를 이용해 블록을 만들어주고 그 안에 마치 키(key)값과 밸류(value)값을 선언하듯이 프로퍼티(property) 와 프로퍼티 밸류(property value)를 선언하면 됩니다. 자세한 것은 CSS 별도 클래스.. 2022. 1. 7.
웹(Web)의 이해 이번시간에는 웹개발을 하기 전에 알아야할 기본적인 웹의 이해와 웹의 동작등에 대해 이야기하겠습니다. 웹을 이해하기 전에 우선 클라이언트와 서버에 대해서 알아야합니다. 클라이언트(client)는 요청자, 손님, 고객, 엔드유저 등이라고 말할 수 있고 서버(server)는 봉사자, 정보제공자, 백엔드 등이라고 표현합니다. 이들의 관계는 요청과 응답으로 이루어져 있습니다. 즉, 클라이언트가 요청하면 서버는 해당 정보를 응답해 주는 구조입니다. 우리가 인터넷을 하기 위해 웹브라우져를 열고 특정 URL (www.google.com)을 호출하면 자신은 클라이언트로서 요청한 것이고 해당 서버는 요청한 내용에 대해 응답을 해주어야 합니다. 모든 서버는 자신의 주소인 IP주소를 가지고 있습니다. 그런데 IP주소는 외우기.. 2022. 1. 6.
웹(Web)의 역사 이번 시간은 웹의 역사에 대해 이야기하겠습니다. 바로 인터넷의 탄생 이야기 인데요 인터넷은 1960년대에 미국 국방부 산하의 고등 연구국에서 군사적인 목적으로 처음 개발되었다. 당시 통신시스템은 중앙집중적이었기 때문에 군사적인 목적으로 분산된 형태의 통신시스템을 구상하였는데 이것이 인터넷의 시작이었습니다. 하지만 우리가 흔히 "인터넷" 이라고 하면 떠올리는 각종 웹사이트 등의 시초는 바로 1990년대 팀 버너스 리가 개발한 월드 와이드 웹(World Wide Web)입니다. 팀 버너스 리는 웹서버와 웹브라우저를 개발하고, 이 둘이 통신할때 사용하는 프로토콜인 HTTP라는 통신 규약을 정의하고, 웹 브라우저에 정보를 표현할 수 있게 하는 프로그래밍 언어, HTML을 발명했습니다. - 1990년 10월 웹페.. 2022. 1. 5.

티스토리툴바