[html] #1 온라인 html 코드 편집기 (IDE) 코드샌드박스 (CodeSandbox)

이번엔 html을 한번 해 봅시다!

html이 뭘까요?

하이퍼 텍스트 마크업 언어 (Hyper Text Markup Lnaguage

라고 하는데... 저는 크게 신경 안 씁니다.

이 html 언어가 바로 웹 페이지, 그러니까 사이트를 구성하는 언어예요!

html 은 크게 네 구역으로 나눠져 있답니다.

지극히 제 생각이지만요.

[헤더] [메뉴/네비게이션] [바디] [푸터]

이 네 구역 안에 다시 여러 가지 구역 (div) 으로 이루어져 있어요.

html의 코드 표기는 이렇답니다.

<코드>

이렇게 꺽쇠 안에 코드를 넣어서 표현하죠.

html은 특이하게 닫는 코드도 있어요. 닫는 코드는 코드 이름 앞에 슬래시 [/]를 표현합니다.

</코드>

자, 이제 시작해 봅시다.

https://codesandbox.io

CodeSandbox: Online Code Editor and IDE for Rapid Web Development

Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.

codesandbox.io

여기 들어가서 로그인을 해 주고요!

여기서 New Sandbox를 클릭하면 이런 메뉴들이 뜹니다.

html 코드를 작성하기 위해 "Static" 이라는 템플릿을 사용하면 되겠죠? (됩니다...)

코드 샌드박스가 참! 좋은 점이 실시간 반영이랍니다. 코드를 수정하고 저장 [Ctrl + S} 해 주면

바로 옆에 미리보기 창에 반영됩니다.

들어가 보면 이 템플릿이 이미 적용되어 있는데요. 여기서 html 기본 구조를 보여드릴게요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <!--콘텐츠 내용-->
  </body>
</html>

<!DOCTYPE html> 은 이게 html이다~ 라는걸 알려주는 코드고,

진짜 코드는 <html> 이라는 코드로 시작합니다. <head> 안에 이 html의 정보를 담아 줘요.

<몰라도 됩니다, 나중에 다 설명할...거예요>

이제 <body> 안에 콘텐츠를 넣으면 됩니다. 여기서 <div> 이라는 태그를 사용해 구역 (division)을 나눠 줄 겁니다.

<body> 안의 코드들은 모두 웹페이지로 출력되니 이 안에서 <div> 으로 이 구역의 용도를 나눠 줄 거예요.

    <div id="header">
    </div> <!--end header-->

우선 헤더부터,

이 코드는 주석 처리 코드입니다. 말 그대로 주석 처리예요.

이렇게 div 끝에 이건 이런 div의 끝입니다! 하고 알려주는 습관 도움 많이 됩니다~

<div> 코드 안에 id라는 속성을 추가해 줬는데, 이는 CSS 적용 시 편리하도록 미리 id를 적용한 거랍니다.

이 이름을 가진 div이 유일하게 1개이면 id, 여러 개면 class를 사용해요!

    <div id="header">
    </div> <!--end header-->
    <div id="main">
    </div> <!--end main-->

밑에 main도 추가해 줬어요.

<div id="container">
  <div id="header">
  </div> <!--end header-->
  <div id="main">
    <div id="content">
    </div> <!--end content-->
  </div> <!--end main-->
</div> <!--end container-->

콘테이너로 전체를 감싸고, 메인 안에 콘텐츠를 넣었습니다.

    <div id="container">
      <div id="header">
      </div> <!--end header-->
      <div id="main">
        <div id="content">
        </div> <!--end content-->
      </div> <!--end main-->
      <footer id="footer">
      </footer>
    </div> <!--end container-->

푸터는 이렇게 코드로 넣었습니다.

아직까지는 division, 그러니까 구역만 나눠 준 것이기 때문에

미리 보기 창이 달라진게 없을 겁니다. 이제 안에 콘텐츠를 제작하고, 적용하는 방법은