웹 개발 기본지식 - HTML 기본구조

여는말 – 파이썬에서 HTML이 꼭 필요한가?

파이썬을 위한 기본지식으로 HTML을 소개하고자 합니다. 이는 직장인들이 파이썬을 배우는 이유 중 하나가 사무의 자동화고, 자동화해야 할 사무에는 인터넷을 통해 처리해야 할 업무들도 상당히 많기 때문입니다.

 

우리가 알아야 할 내용은 특정 웹페이지의 정보 흐름이 어떻게 이뤄지는가 같은 거창한 것은 아닙니다. 우리에게 필요한 것은 웹페이지를 개발자 모드로 뜯어보았을 때, 코드 덩어리와 실제 웹페이지를 매칭시킬 수 있는 능력입니다.

 

일반적으로 HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용되고, CSS는 웹 페이지의 스타일, 레이아웃 및 디자인을 정의하는 데 사용됩니다. 그리고 자바스크립트는 각종 상호작용을 제공하기 위해 부가적으로사용됩니다(사실 안 쓴 웹 페이지가 거의 없긴 하지만요) .

 

때문에 파이썬에서는 HTML과 CSS를 분석하므로써, 어느 요소에 접근할건지를 특정할 수 있게 됩니다.

 

아울러, 자바스크립트를 호출하는 명령어를 통해 파이썬에서 구현하기 어려운 부분은 자바스크립트로 직접 실시할 수 있습니다.

 

즉, 내가 웹페이지에서 일일이 들어가서 처리해야 할 업무를 파이썬에게 맡기려면, 웹 개발에 대한 이해가 꼭 필요하다는 말입니다.

 

웹의 구성요소 / 자주 사용되는 용어

1. 클라이언트 : 정보를 요청하는 사람. 지금 화면을 보고 있는 당신을 포함하여, 웹에 접속하여 정보를 얻고자 하는 사람들을 의미힌다.
2. 서버 : HTML 문서를 클라이언트에게 제공하는 자. 구글, 네이버, 혹은 소규모 홈페이지 개설자 등등…
3. 브라우저 : 요청 메시지를 작성, 웹서버에 전달하는 역할을 하는 프로그램으로, 인터넷 익스플로러, 삼성 인터넷 브라우저, 크롬 등을 이야기한다.
4. 프로토콜(규약) : 어떤 정보를 주고 받기 위해 정해져있는 규칙이다. 우리가 한 장소에서 다른 장소로 가기위해서는 출발지와 도착지의 주소를 알고, 교통수단이 있어야 하며, 도로교통에 대해 이해하고 있어야 한다. 이러한 내용들은 법령중에서도 도로명주소법, 운수사업법, 도로교통법의 영향을 각각받는다. 비슷하게 정보가 이동할 때에도, HTTP, TCP, IP라는 규약이 정보의 흐름 각 과정에 영향을 준다.
   • HTTP : 웹상에서 정보를 주고 받기 위한 프로토콜(규약)이다. TCP나 IP가 데이터의 흐름, 기기라는 범용적인 부분과 관련되어 있다면, HTTP는 문서의 전송이라는 한정적인 목적으로 사용된다.
   • TCP와 포트 : 데이터를 통신할때에는 TCP(Transmission Control Protocol)라는 규약이 이용되는데, 이는 데이터의 공유를 시작, 흐름정리, 마감하는 역할을 수행한다. 이때 사용되는 창구를 포트라고 부른다. 가령, HTTP는 TCP 80번 포트를 사용하며, HTTPS의 경우는 433포트를 사용한다. 따라서 해당 포트는 다른 프로그램에서 사용하지 않는다.
   • IP : 인터넷이라는 공용망에서 각종 서로 다른 기기들이 접속할 수 있도록 하는 통신 규약이다. TCP가 교통법규에 해당한다면, IP는 출발지와 도착지를 나타내는 주소로 표현할 수 있겠다.
5. 애플리케이션 : HTTP상에서 동작하는 프로그램으로 일반적으로 ASP, JSP, PHP, ASPX와 같은 확장자를 가진 프로그램들을 의미
6. HTML5 : 웹 문서를 하이퍼텍스트라고 부른다. 이때 이를 화면으로 표시하기 위한 기초 언어를 Hyper Text Markup Language라고 부르며, 줄여서 HTML이 된다. HTML5는 이러한 HTML의 5번째 버전이다. 비디오 및 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X없이 브라우저에서 쉽게 사용하는데 중점을 두는 것이 특징이다. 2014년 10월에 HTML5 표준안이 확정되었고, 2017년 12월에 HTML5.2 표준안이 확정되었다.
   
   

 

728x90

 

 

HTML 명령어의 구조와 명칭

HTML 요소의 분석

 

1. 요소(element) : 태그의 선언과 종료, 동봉된 태그 내용물을 아우르는 하나의 명령어 세트
2. 태그(tag) : head, body, tail, a, p, br 등 <>에서 가장 처음을 차지하는 단어로 상징되는, 명령의 시작과 끝을 나타내는 명령어
3. 속성(attribute) : 각 태그별로 선언가능한 부가적인 명령어 체계
   • a태그의 속성 : href 등
   • p태그의 속성 : class / title 등
   • 참고사항 : HTML/CSS에서는 요소의 부가적 명령어를 ‘정적인 의미로’ Attribute로 지칭하나, 파싱을 고려하는 자바스크립트에서는 ‘동적인 의미로’ Property로 지칭한다. 한글로는 둘 다 속성이라 해석하거나 혼동을 피하기 위해 둘 다 원어발음으로 부르거나, 전자는 속성, 후자는 프로퍼티로 구분하여 지칭하기도 한다.
4. 값(value) 혹은 인수(argument) : 각 속성별로 입력된 데이터
   • parameter(매개변수)는 임의의 값을, argument는 실제 입력되는 구체적인 숫자를 의미한다. 예를들어, Excel함수 sum에는 parameter로 para1, para2, para3 …을 가지며, Sum(3, 4, 5)의 경우 각 Parameter로 3, 4, 5라는 Argument가 대입되었다고 표현할 수 있다.
     
     

HTML vs DOM

1. HTML : 마크업 언어 그 자체. 내부에 스크립트 호출, CSS 호출을 위한 단어 등이 포함되어 있으나, 그 자체로 ‘스크립트’는 아니다.
2. DOM : HTML를 브라우저가 파싱하여 만들어낸 결과물을 의미한다.
3. 비교
   • 내가 작성한 HTML은 DOM이다? : 아니다. 그러나 그 코드가 브라우저에 의해 파싱되면 DOM이 된다.
   • 페이지 소스 보기에서 보이는 내용물이 DOM이다? : 아니다. 소스 보기는 HTML을 보여준다.
   • 개발자도구에서 보이는 코드가 DOM이다? : 그렇다. 브라우저에 의해 파싱되고 Script에 의해 수정된 결과물들이 반영된 최종적인 결과물인 환경, 명령어를 DOM이라 부른다.