[HTML/CSS] 웹의 기초 개념
안녕하세요,
웹 개발의 세계에 오신 것을 환영합니다! 오늘은 HTML과 CSS의 기초 개념을 재미있고 쉽게 설명해드리겠습니다.
웹 개발을 처음 시작하는 분들도 부담 없이 이해할 수 있도록 최대한 간단하게 풀어볼게요. �
그리고 잠깐! 웹사이트가 어떻게 시작되었는지 간단한 이야기도 함께 들어볼까요?
1. 웹사이트는 어떻게 시작되었을까요?
WWW. 우리가 흔히 쓰는 인터넷 주소가 인터넷의 시초입니다. WWW(World Wide Web)이라고 부르는데요.
1990년대 초, 팀 버너스 리(Tim Berners-Lee)라는 과학자가 를 발명했어요. 당시 그는 "어떻게 정보를 더 쉽게 공유할 수 있을까?" 고민하다가 HTML이라는 언어를 만들었죠. 이 HTML은 정보의 구조를 정리하고 인터넷으로 연결할 수 있게 도와주는 언어였습니다.
WWW의 창시자, 팀 버너스 리 경 (Sir이 이름에 붙는다)쉽게 말하면, HTML은 인터넷 세상에서 집을 짓는 기본 블록을 제공한 셈이에요. 그리고 팀 버너스리는 이 웹과 자신이 고안해 낸 다른 기술들을 특허도 내지 않고 무료로 풀어버립니다. 자신의 이익보다 정보가 널리 무료로 공유되는 웹의 정신에 기초합니다.
그렇다면 정보를 전달하기 위한 HTML이 구체적으로 어떤 것을 뜻할까요?
이제 우리도 그 세계에 발을 들여볼까요.
2. HTML이란 무엇인가요?
HTML은 웹 페이지의 뼈대입니다. 집으로 비유하자면 기둥과 벽을 만드는 역할을 하죠.
HTML은 HyperText Markup Language의 약자이고, 웹 페이지의 구조를 잡는 데 사용됩니다.
무슨 말인지 모르시겠다고요?
예시를 들어드리면, 인터넷에 HELLO WORLD 라는 문구를 나타내고 싶으면 아래와 같이 가능합니다.
여기서 <H3> <H2> <H1>에 따라서 적히는 HELLO WORLD의 글씨가 다른 것을 볼 수 있죠.
이처럼 인터넷에 여러 글씨를 나타낼 수 있게 해주는 것들을 HTML이라고 합니다.
여기서 <> 를 우리는 태그라고 해요. 태그 안에 들어가는 단어에 따라 다른 기능을 가집니다. 신기하죠
더 어려운 예를 들어볼게요. 아래 코드를 입력하면 화면에 "안녕하세요, 세상!"이라는 제목과 문장이 웹페이지에 나타납니다!
검은색 화면이 코드, 흰 화면이 인터넷 창을 의미합니다.어떤가요? 이제 조금 느낌이 오시나요.
이제 각자 태그가 어떤 역할을 하는지 조금 알아볼게요.
이 HTML 코드에 쓰인 태그는 아래와 같아요.
<html>: HTML 문서의 시작과 끝. <head>: 보이지 않는 설정(제목, 스타일 등) 포함.
<title>: 브라우저 탭에 표시되는 제목.
<body>: 눈에 보이는 웹페이지 내용.
자주 사용하는 태그들도 아래와 같아요.
<h1> ~ <h6>: 제목. 크고 작은 헤딩.
<p>: 문단 나누기
<a>: 링크. 클릭하면 다른 곳으로 이동!
<img>: 사진이나 그림 삽입.
<ul>, <ol>, <li>: 목록 만들기.
방금 배운 태그들을 이용해서 나만의 네이버 홈페이지를 만들고 싶으면 아래와 같이 바로 HTML을 이용해서 만들 수 있어요.
조금 WEB의 개념이 다가오시나요.
사실 지금은 너무 간단하지만 우리가 만드려는 아래와 같이 복잡하고 컬러풀한데요.
이제 여기 HTML 글씨에 색을 입히고 그래픽을 넣어야 네이버 같은 사이트가 완성이 됩니다.
그리고 개발된 언어가 이제 CSS라는 언어입니다.
HTML에 적힌 글에 색을 입히고, 다양한 시각적 효과들을 주는 기능을 합니다.
네이버 웹사이트 메인 화면말 그대로 CSS는 웹 페이지에 옷을 입히는 디자이너입니다!
CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 색상, 폰트, 레이아웃 등을 정의합니다.
웹 개발의 기본을 익히셨으니, 이제 첫걸음을 뗐습니다!
우선 여기까지 HTML의 정의에 대해서 한번 알아보았고 다음 포스팅에서 CSS의 개념에 대해서 설명드릴게요.
�
#HTML #CSS #웹사이트개발 #웹사이트제작 #홈페이지제작업체 #홈페이지제작 #웹사이트제작업체
