HTML과 CSS란?

HTML은 "Hyper Text Markup Language"의 약자로 웹페이지를 만드는데 사용되는 언어입니다.

현재는 HTML5 버전이 사용되고 있습니다.

HTML5를 사용하기 위해서는 HTML문서에서 '<!DOCTYPE html>'이라고 선언함으로써 사용할 수 있습니다.

HTML문서 기본 구성

[그림1]은 VISUAL STUDIO CODE로 HTML 기본 구성을 작성한 모습입니다.

단축키 '!' & 'Tab'키를 누르면 [그림1]과 같이 자동으로 작성되며

<html lang="en">부분을 <html lang="ko">로 고치고

<title>Document</title>부분에서 'Document'를 원하는 프로그램 제목으로 바꿔주면

기본적으로 HTML 작성을 위한 구성은 완성된 것입니다.

그러면 CSS는 무엇일까요?

CSS는 'Cascading Style Sheets'의 약자로 HTML로 작성된 홈페이지 외관을 장식할 때 사용되는 언어입니다.

예전에는 HTML 파일에 화면디자인 부분까지 함께 입력하여 작성을 하였습니다.

하지만, HTML이 점점 발전하면서 화면디자인 부분을 분리하여 작성할 목적으로 CSS를 만들게 되었습니다.

HTML 파일은 확장자를 '.html'로 CSS 파일은 확장자를 '.css'로 작성하게 되었습니다.

따로 작성된 CSS 파일을 HTML 파일에서 필요한 부분에서 불러다 사용하는 형식으로 작성됩니다.

먼저 CSS 파일을 적용하기 전에 화면 출력 모습을 보면 [그림4]와 같습니다.

CSS 파일을 적용하여 HTML 파일을 실행하면 [그림5]와 같이 나타납니다.

HTML 파일에서,

그리고, CSS 파일에서

h1 은 HTML 파일에서 h1 태그 부분의 디자인을 정의한다는 의미입니다.

color: red; 는 색상을 빨간색으로 출력하라는 의미입니다.

font-size: 30px; 은 글자크기를 30픽셀 크기로 출력하라는 의미입니다.

앞으로 HTML과 CSS에 대하여 공부해 나가며 하나씩 알아가고자 합니다.

아무개의 취미생활