Stage 1 - 텍스트를 다루는 HTML tag를 배워보자

html과 css에 대해 간단히 살펴본 후 태그를 사용하여 웹페이지를 만들어봅시다.

HTML과 CSS

1991년 경 만들어진 후 계속하여 발전되어온 규칙이자 기술

html

우리가 자주 접속하는 네이버를 생각해봐요. 익숙한 네이버의 로고 이미지가 보일 것이고 상단에는 검색창이 있죠. 그 아래에는 여러 버튼과 기사, 컨텐츠 등 수많은 텍스트와 그림들이 있습니다. 로그인창의 아이디 입력폼비밀번호 입력란을 빼놓을 수 없겠죠? 이렇게 글자, 이미지, 박스, 폼 등 어떠한 요소에 해당하는 것을 html이라고 생각하면 쉽습니다.

css

무엇, 즉 요소에 해당하는 것이 html이라고 말했습니다. 그렇다면 이 요소들의 모양은 어떻게 결정될까요? 이 부분을 다루는게 css입니다. "네이버의 로그인 버튼은 초록색이다, 직사각형이다, 가로크기는 130px이다"와 같은 모양, 크기, 색 등에 대한 서술이 바로 css입니다.

네이버의 html과 css

네이버의 로그인창
네이버의 페이지 소스코드

이처럼 모든 웹사이트는 html과 css로 이루어져있습니다. html로 요소를 배치하고 css로 스타일을 만들어주는거죠.

html, css 외에도 큰 축을 담당하는 javascript가 있습니다. 모든 웹사이트가 같은 방식으로 만들어지지는 않으나 html과 css를 배제하는 웹사이트는 없습니다. javascript는 이 수업에서 다루지 않지만, 나중에 다른 스터디를 통해 배워보면 분명 재미있을거예요!

Hello World!

웹에 Hello World! 띄워보자!

자, 이제 설치하신 visual studio code를 실행하세요. 그리고 바탕화면에 test.html이라고 저장하고, 내용에는 과감하게 Hello World!라는 글자를 입력합니다.

이제 저장한 파일을 크롬(혹은 다른 인터넷 브라우저)에서 열어보세요!

축하드립니다! 여러분들은 이제 처음으로 웹코딩 세계에 입문하셨습니다. 어때요? 생각보다 쉽고 간단하죠? 지금은 간단한 문자만 띄울 수 있지만 앞으로는 그림, 박스 등 멋진 디자인의 웹을 띄울 수 있게 될 거에요.

태그의 기본 형태

사실 Hello World!라는 검고 작은 텍스트를 띄우는 것만으로는 웹페이지를 만들기 어렵죠. 어떤 글은 진해야하고 어떤 글은 크기가 커야하고 또 다른 색으로 바꿀 수도 있어야 해요. 어딘가에는 버튼을 배치해야하고 어딘가에는 이미지를 넣어야하는거죠. 이렇게 특별한 목적과 기능을 가진 요소를 배치하는 방법으로 html에서는 태그를 사용하고 있습니다.

태그의 기본적인 사용법
예제

태그는 여는쪽과 닫는쪽이 있어요. b 태그는 안에 들어있는 내용물의 글자를 진하게 만드는 기능이 있습니다.

저는 주로 <b>파이썬</b>을 사용합니다.

이러한 코드를 작성하고 아까처럼 크롬을 통해 실행해보세요. 파이썬이라는 글자만 더 진하게 나올거예요. 이렇게 태그는 여는쪽(<b>)와 닫는쪽(</b>)가 존재하고 그 사이에 있는 내용물이 영향을 받는답니다.

태그의 기본 형식은 위와 같지만, 여는쪽과 닫는쪽이 나뉘어져 있지 않은 태그도 있습니다. 예를들어 "한줄을 띄어라"라는 기능을 가진 <br>같은 태그죠. 이러한 예외 태그들 또한 앞으로 배워나갑니다.

텍스트 관련 태그 4종

그럼 지금부터 간단하고 중요한 4가지 태그 세트를 배워볼게요.

태그

설명

사용 예

h1, h2, h3, h4, h5, h6

텍스트를 제목 글씨체(headline)로 만듭니다.

<h1>제목입니다</h1>

br

한줄 띄어쓰기

안녕하세요?<br>저는...

b

글자 진하게

오늘은 <b>태그</b>를 배워봅니다.

a

링크를 연결합니다

<a href="http://naver.com">여기를 누르시면 네이버로 이동합니다.</a>

실습

visual studio code에 입력하고 브라우저에서 실행해볼까요?

<h1>태그를 배워봅시다</h1>
html <b>태그</b>란 말을 많이 들어봤죠?<br>
사용해보신 분들도 계시겠지만,<br>
처음 써보시는 분들도 많이 계실거예요.<br><br>
자세한 내용은 이곳에서 확인하실 수 있습니다.<br>
<a href="http://naver.com">여기를 클릭하세요!</a>
결과물