이번엔 html을 한번 해 봅시다!
html이 뭘까요?
하이퍼 텍스트 마크업 언어 (Hyper Text Markup Lnaguage
라고 하는데... 저는 크게 신경 안 씁니다.
이 html 언어가 바로 웹 페이지, 그러니까 사이트를 구성하는 언어예요!
html 은 크게 네 구역으로 나눠져 있답니다.
지극히 제 생각이지만요.
[헤더] [메뉴/네비게이션] [바디] [푸터]
이 네 구역 안에 다시 여러 가지 구역 (div) 으로 이루어져 있어요.
html의 코드 표기는 이렇답니다.
<코드>
이렇게 꺽쇠 안에 코드를 넣어서 표현하죠.
html은 특이하게 닫는 코드도 있어요. 닫는 코드는 코드 이름 앞에 슬래시 [/]를 표현합니다.
</코드>
자, 이제 시작해 봅시다.
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의 정보를 담아 줘요.
<meta charset="UTF-8">: 인코딩 정보
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 뷰포트 설정
<몰라도 됩니다, 나중에 다 설명할...거예요>
이제 <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, 그러니까 구역만 나눠 준 것이기 때문에
미리 보기 창이 달라진게 없을 겁니다. 이제 안에 콘텐츠를 제작하고, 적용하는 방법은
다음 시간에~
'egg.code > HTML' 카테고리의 다른 글
| [🎨썸네일 메이커] 5초만에 티스토리 썸네일 만들어 드립니다. (0) | 2023.12.14 |
|---|
