파이썬 코딩을 시작으로 데이터 분석 라이브러리 판다스(Pandas) 그리고 웹 프레임워크 플라스크(Flask)까지 살펴봤습니다. 제가 생각하고 있는 툴 또는 웹서비스 개발에 필요한 언어와 라이브러리, 프레임워크 순으로 공부하면 되겠다 싶었지만 웹의 기본 중의 기본인 HTML 조차 제대로 이해하지도 못하며 계속 진행하기 어려웠습니다.
파이썬과 판다스를 알아갈 때만 하더라도 상당히 이해하기가 쉬웠다고 생각되나 파이썬 웹 프레임워크인 플라스크를 다루며 제일 답답했던 게 HTML과 자바스크립트였습니다. HTML을 언어라 생각하지도 않고 너무 만만하게 생각했던 것 같습니다. 결국 웹 서비스를 계획하고 있는 분들이라면 HTML/CSS부터 기초를 다지고 자바스크립트(Javascript)로 테크를 타시는 게 옳아 보입니다. 그 다음에 타입스크립트(Typescript) 또는 웹 프레임워크 장고(Django), 플라스크(Flask)를 공부하는 게 순서인 것 같습니다.
저는 HTML을 너무 만만하게 생각하다 이제서야 들여다보게 됐습니다. HTML/CSS는 그리 어려운 내용이 없다고 생각되어 2주 정도 시간을 두고 훑어볼 예정입니다. 웹 프로그래밍에 관심이 있는 분이라면 저처럼 나중에 후회 말고 HTML 기초부터 다지시길 당부드립니다. ^^
HTML(HyperText Markup Language : 하이퍼텍스트 마크업 언어)는 웹 페이지에 마크업 하는 언어입니다. 파이썬 스크립트는 *.py 자바스크립트는 *.js 텍스트 문서는 *.txt라는 확장자를 가지며 HTML은 html 확장자를 붙여 다른 파일과 구분합니다. 저는 HTML을 배우기 위해 기존 사용하던 VS Code를 그대로 사용하며 실행 결과를 바로바로 확인하도록 도와주는 플러그인(Plug-in)으로 라이브 서버(Live server)를 설치했습니다.
그리고 VS Code를 처음 설치하면 상관없지만 기존에 VS code로 다른 코드를 작성했다면 언어 모드를 별도 설정해야 합니다.
이제 VS code에서 코딩 작업을 원활하게 도와줄 플러그인 HTML snippets을 설치합니다.
이제 VS Code에서 main.html(파일명은 임의로 지정하며 확장자는 html을 적용)을 만들고 코딩을 시작합니다. 지금까지 문제없이 설치되었다면 임의의 문자열 출력해봅니다. !를 타이핑 후 <tab>을 누르거나 html:5를 타이핑 후 엔터를 입력하면 html5의 기본 골격이 완성되는 것을 확인할 수 있습니다.
VS code에서 자동 저장 옵션을 사용하게 되면 문자열이 변경될 때마다 웹 브라우저에서 변경된 문자열을 뿌려줍니다.
HTML의 기본 구조를 살펴보기 전 기본적인 표기법부터 살펴봅니다. (저는 이 표기법도 처음엔 몰랐답니다.) 우선 태그는 <와 >를 이용해 구분합니다. 그리고 HTML5 표준서에는 태그와 태그 안에서 사용되는 속성들은 모두 소문자 사용을 권장합니다.
|
권장 사용법
|
<img src="image.jpg">
|
|
권장하지 않는 사용법
|
<IMG src="image.jpg">
|
<img>태그, <br>태그처럼 하나만 사용되는 태그를 제외한 대부분의 태그는 여는 태그와 닫는 태그로 이뤄지며 코드의 가독성을 위해 들여 쓰기(indentation)를 권장합니다.
|
권장하지 않는 사용법
|
|
|
<ul>
<li>메뉴 1</li> <li>메뉴 2</li> </ul> |
<ul>
<li>메뉴 1</li> <li>메뉴 2</li> </ul> |
태그는 아래와 같이 속성과 함께 사용할 수 있습니다.
<img src="picture/img.jpg" width="100", height="200" alt="사진 이미지">
<img>태그에 src 속성을 이용하여 디렉터리 위치와 파일명을 지정합니다. 크기 속성인 width(가로, 폭) 속성, height(세로, 높이) 속성과 alt 속성(보조 설명)을 이용하였습니다.
간단하게 html을 작성해 보고 확인합니다. 스크립트 어디에서 굵고 큰 문자열이 출력되고, 줄 바꿈이 일어나며 그림이 출력되는지 알 수 있습니다. 이렇게 화면에 표시할 내용에 태그를 사용해서 역할을 구분해 주는 것을 마크업(markup)이라고 합니다.
<!DOCTYPE html>는 현재 문서가 HTML5언어로 작성된 웹페이지라는 것을 브라우저에 전달합니다. <html lang="ko">는 html의 시작과 한국어로 된 문서임을 알려줍니다. (닫을 때는 </html>) <head></head>사이에는 현재 문서의 메타정보가 담기며 웹 브라우저에는 출력되지 않습니다. 만약 현재 페이지를 브라우저에서 즐겨찾기에 추가하게 되면 <title>과 </title> 사이의 제목으로 저장합니다. 실제 화면에 출력되는 내용은 <body>와 </body> 사이에 담기게 됩니다. 그리고 VS Code에서 자동 생성하는 <meta name="viewport" content="width=device-width, initial-scale=1.0">는 모바일 기기에서 페이지를 확인할 때를 위한 것 정도로만 우선 알아 둡니다.
차세대웹기술지원센터
차세대웹기술지원센터 소개하고 동향정보와 활용정보, 교육안내 등 관련 정보 제공
html5.websrv.co.kr
'코딩 이야기 > HTML & CSS' 카테고리의 다른 글
| input 태그 속성에 대해 자세히 살펴보기 – HTML5 (0) | 2021.12.14 |
|---|---|
| 폼(form)과 input 태그 살펴보기 – HTML5 (0) | 2021.12.14 |
| 웹 페이지에 하이퍼링크와 이미지 표시하기 – HTML5 (0) | 2021.12.14 |
| 웹 페이지에 목록과 테이블(표) 표현하기– HTML5 (0) | 2021.12.14 |
| HTML 기초 문법 중 태그(tag)에 대해 살펴보기 – HTML5 (0) | 2021.12.14 |
댓글