1.2. HTML

HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹페이지를 위한 마크업 언어입니다. 웹에서 사용자에게 바로 보여지는 부분을 위한 언어라고 이해하면 됩니다.

1.2.1 준비물 연결하기

atom에서 코딩을 시작할거에요. 코드를 저장할 workspace 폴더도 다 만들어져있습니다. 아톰에서 workspace 폴더를 연결해야합니다. 한번만 해두면 다음부턴 그냥 바로 코드를 작성하면 됩니다.

atom을 실행시키고 File > Open Folder를 눌러 바탕화면에 있는 workspace 폴더를 지정합니다.

1.2.2 소스파일 생성하기

왼쪽 탭에 workspace 폴더가 나타납니다. 이제 html 파일도 생성해봐요. 탭에 있는 workspace를 우클릭해서 New File을 클릭합니다.

파일 이름은 first.html라고 해볼까요? 파일명을 입력하고 엔터치면 드디어 우리 소스파일이 생성됩니다!

1.2.3 코딩 시작!

이제 이 파일에 html 코드를 작성할거에요. 다음 코드를 적어보세요. 

<html>
  <head>
  </head>

  <body>
    <h2>html이구나!!</h2>
  </body>

</html>

ctrl + s를 눌러 저장을 하면 우리의 첫 코딩이 마무리됩니다. 저장은 습관적으로 해두는 습관을 가지도록해요 :)

1.2.4 내 프로그램 실행!

바탕화면 workspace 폴더로 가면 우리가 저장한 first.html 파일이 생겨있습니다. 앞으로 html 파일은 우리가 미리 설치해둔 chorme으로 실행되도록 연결프로그램 설정을 바꿔주세요.

그리고 파일을 더블클릭해서 열면 우리의 첫 웹페이지가 띄워집니다!

코드파일의 문구를 여러번 바꿔보며 실행해보세요 :)

1.2.5 HTML의 기본 규칙

HTML는 몇가지 규칙으로 이루어져 있습니다. <태그>와 </태그>로 감싸서 범위를 구분하고, 각 태그의 이름에 따라 다양하게 코드를 작성할 수 있습니다.

코드를 살펴볼까요?

<!-- 개발하면서 메모를 적어놓을 주석 -->
<html>
  <head>
    <title>타이틀바에 나타나는 타이틀</title>
    <!-- 브라우저의 탭이나 제목표시줄에 나타나는 타이틀입니다. -->
    <meta charset=”utf-8”>
  </head>

  <body>
    <h1>가장 큰 제목</h1>
    <!-- h1 부터 h6 단계까지 미리 정의되어 있습니다 -->
    <h2>소제목</h2>

    <p>여기는 본문 내용입니다.</p>
    <a href="https://www.naver.com">네이버</a>
  </body>
</html>

곤충이 머리, 가슴, 배로 구분되고 거미는 머리와 몸통으로 나뉘는 것처럼 HTML은 머리와 몸통으로 구분됩니다. 와 로 쉽게 구분할 수 있습니다. 헤드에는 보이지않는 정보들을 적고, 바디에는 화면에 나타나는 부분을 작성합니다.

바디에 다양한 태그들을 적었습니다. h1부터 h6까지 바꿔가며 실행해보세요. 글자의 크기가 달라집니다. 그냥 작은 글씨로 본문의 내용을 적을 때는 p 태그를 사용하고, 링크를 통해 이동하고 싶을 때는 a 태그를 사용하여 이동할 주소를 적으면 됩니다.

1.2.6 all that HTML

h, p, a 이 외에 다양하게 사용할 수 있는 태그가 많습니다. 이런 태그들을 모두 외워서 사용할 수는 없습니다. 그래서 항상 튜토리얼 페이지를 들어가보며 복사 붙여넣기로 활용합니다.

[TIP] W3schools HTML tutorial https://www.w3schools.com/html/

이 사이트는 우리가 앞으로 계속 방문할 페이지입니다.

우리가 이미 공부한 headings 부분을 보며 사이트 활용법을 알아볼게요.

왼쪽탭에 다양한 기능들이 나와있습니다. 이 중 내가 원하는 기능들을 클릭하면 그에 대한 설명을 자세히 볼 수 있습니다.

그리고 try it yourself 버튼을 누르면 직접 코드를 조금씩 바꾸며 바로 테스트해 볼 수 있습니다.

앞으로 필요한 기능이 있을 때마다 이 사이트를 참조하여 활용하도록 하세요 :)

1.2.7 자주 쓰이는 태그

자주 쓰이는 기능들입니다. 이 기능들은 사이트에 들어가서 꼭 읽어보도록 합니다.

HEADINGS

ATTRIBUTES

PARAGRAPHS

STYLES

COLORS

IMAGES

LISTS

1.2.8 [실습] 자기소개 페이지만들기

지금까지 배운 HTML을 활용해서 자기소개 페이지를 만들어보세요 :)

results matching ""

    No results matching ""