시작하면서
안녕하세요, 지난 인사에서 인사드렸던 것 처럼 html, css, js를 통해서 웹사이트를 만들어 보는 공부를 시작해보려합니다.
세 가지 언어 모두 기본적으로 사용해본 경험은 있지만, 솔직히 기억이 잘 나지 않더라구요.
그래서 정말 기초적인 내용이라도 하나하나 정리해 가면서 공부 해보려고 합니다.
코딩애플 강의를 들으며 공부할 예정이고, 들으면서 제가 배운 내용을 간략하게 요약하면서 이곳에 기록할 예정입니다.
틀린 내용이 있다면 댓글 달아주신다면 정말 감사할 것 같습니다.
그럼 지금부터 시작해보겠습니다.
html이란?
html은 markup 언어이다.
markup 언어란? 자료들이 어떻게 생겼나 구조를 표현하기 위한 언어
웹페이지를 만들 때 html을 사용한다.
html tag 알아보기
html에서 글, 내용을 작성할때는 반드시 tag 안에다가 넣어주어야 한다.
<p>안녕하세요</p>여기서 paragraph는 본문 내용을 의미한다
<h1>나는 제목이다!</h1>여기 나오는 h1태그는 글의 제목을 작성할때 사용하는 tag이다. 제목 순서에 따라 h1, h2, h3 등으로 나뉘게 된다.
이러한 태그를 사용해서 전체 html의 기본 양식에 글을 두개 작성해 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>나는 제목이다</h3>
<p>안녕하세요</p>
</body>
</html>
이렇게 크롬으로 index.html 파일을 조회하면 내가 html에 작성한 글이 브라우저로 나타나는 것을 볼 수 있다.
왜 tag를 사용해야 할까?
우리는 왜 tag를 이용해 작성해야 하는가? 태그없이 글을 작성해도 웹페이지에 나타나는 것을 볼수 있다.
왜냐하면 html은 markup language, 자료가 어디에 어떻게 배치되어 있나 표현하기 위한 언어이다.
tag를 이용해 우리는 저 내용이 본문인지, 제목인지를 한눈에 쉽게 알아볼 수 있다.
html을 통해 이미지 넣는 방법
<img src ="이미지 경로">작업 폴더에 이미지를 추가해 두고, 경로에 파일 이름을 넣는다면 사용 가능하다. 한번 test 해보겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>나는 제목이다!</h3>
<p>안녕하세요</p>
<img src="mokoko.jpeg">
</body>
</html>
실행 결과는 다음과 같다 (앞으로 html 공부동안 모코코짤을 많이 사용할 것 같다)
버튼을 누르면 사이트로 이동하게 만들어보자
다음은 버튼을 누르면, 특정 사이트로 이동하는 버튼을 만들어 보도록 하겠다.
<a href = "https://lostark.game.onstove.com/Main">
<button>Lostark</button>
</a>여기서 a는 anchor를 의미하며 하이퍼링크를 만들 수 있다. 저기에 button 대신에 이미지를 넣거나 그냥 문자를 넣는다면, 이미지나 문자를 넣으면 해당 사이트로 이동하게 구현할 수 있다.
리스트 만드는 법
<ul>
<li>1번</li>
<li>2번</li>
</ul>여기서 ul은 unordered list, li는 list item을 의미한다. 만약에 자동으로 숫자가 매겨지는 list를 만들고 싶다면 ul 대신 ol(ordered list)를 사용하면 앞에 1, 2, 3 숫자가 매겨지는 list를 만들 수 있다.
마무리
이번 글에서는 html의 기본 양식과 사용하는 기초적인 태그에 대해서 알아봤다.
다음 포스트에서는 css에 기초적인 내용을 알아보려 한다.
