2023. 6. 7. 09:04ㆍLectures - 코딩 강좌/HTML 웹페이지 강좌
# 시작하기에 앞서서...
요즘 열심히 코딩 공부를 하여 웹 문서 정도는 가뿐히 만들어 내는 상아. 그 모습을 지켜보던 혜성이는 상아르 시험하기 위해 웹 페이지에 레쿠쟈의 사진과 함께 레쿠쟈의 도감 설명을 적어서 보여달라고 한다. 이왕이면 예쁘게 색깔도 입히고 하면 좋을 것 같다고 추가 요청까지 한다. 상아는 어이가 없어서 따지고 말았다. 왜 사업용 웹페이지에 포켓몬 도감을 만들어야 하는지 이해가 안된다고 했다. 그러나 얼굴에 철판 석 장을 깔고 있는 혜성이는 단호하게 말했다.
"귀엽잖아 ㅎㅎ 잘 만들면 금전적인 보수는 심심하지 않게 해줄거니깐."
아무리 실리가 좋다던 23세 이상아 이지만, 자본주의에 굴복하고 마는데...
일단 돈은 챙기고 봐야 하지 않겠어? 흔쾌히 수락해 버리는 상아였다. 그래서 상아와 함께 웹페이지 서식에 대해 연구하기 위해 집으로 냉큼 달려가서 컴퓨터를 켰다.
(위 사진은 얼마전에 구매한 레쿠쟈 인형 사진 입니다 ^^)
# 이번 시간의 목표!
이번 시간에는 레쿠쟈의 도감을 웹페이지에 만들어 볼거에요.
처음에는 HTML 구문을 이용하여 대략적인 틀을 만들어 볼거고, 그 다음으로는 CSS 구문을 사용하여 칙칙한 디자인을 좀 더 다체로워 보이도록 서식을 지정해 볼 예정입니다. 아마 제목을 보시고 눈치 채신 분도 있겠지만 이번 강좌는 HTML 따로 CSS 따로 설명을 할 예정이라 크게 2부분에 나눠서 2번째와 3번째 강좌에서는 HTML을 위주로, 4번째 강좌에서는 CSS와 폰트 파일 불러오는 것에 대한 내용으로 진행이 될 것 같습니다.
먼저 HTML에 대해 알아보고 구문의 특징을 살펴볼겁니다. 다음 HTML의 기능에 대해 알아보고, 마지막으로 최종목표인 레쿠쟈의 도감을 만들어 보도록 할께요.
# 2.1. HTML은 먹는걸까요?
HTML, 어디서 많이 들어 봤는데 혹시 먹는건가요?
앗... 아쉽지만 먹는게 아니었습니다. HTML은 말이죠 우리가 컴퓨터나 스마트폰을 켜면 자주 쓰는 크롬, 엣지, 네이버 웨일, 오페라, 뭐 나이좀 있으신 분들은 파이어 폭스 등 웹 브라우저 프로그램에서 웹 페이지를 볼 때 이 각각의 웹 페이지의 구조를 설명해서 웹 브라우저가 알아먹을 수 있도록 하는 역할을 합니다. 즉 웹 페이지와 웹 브라우저 간의 의사소통 수단, 언어라고 보시면 됩니다. 그래서 지난 강좌에 만들었던 "index.html" 파일은 이 언어로 적혀 있기 때문에 우리가 이 녀석을 웹 문서라고 부르는 거지요.
# 2.2. 우리 HTML를 사랑해야 하는 이유!
요즘 대부분의 웹페이지들은 HTML을 이용하여 설계가 되어 있습니다. 그렇가면 도대체 어떤 점에서 HTML이 최고다 라고 생각할 수 있게 해주는 걸까요? HTML의 장점은 다음과 같습니다!
장점 ①: 구조가 단순하고 문법이 쉽다.
이 HTML은 말이죠 우리가 생각하는 프로그래밍 언어들과 사뭇 다른점이 많습니다. 아래를 볼까요?
예시로 제 블로그 포스팅 글을 들고 와봤는데... 워낙 장문이 많다 보니깐 지저분하네요...
다른 예시를 보죠!
<!DOCTYPE html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
▶결과
My First Heading
My first paragraph.