웹 페이지는 크롬과 같은 브라우저에서 열 수 있습니다.
브라우저를 이용해서 어떤 사이트에 접속하면 브라우저는 사이트의 URL에 해당하는 .html 파일을 다운 받고
이 파일의 코드(HTML, CSS, JavaScript)를 계산해서 화면에 글자나 이미지를 그려줍니다.
때문에 웹 페이지를 만들려면 HTML 파일이 필요합니다.
HTML 파일을 만들어 보겠습니다.
1. HTML 파일 만들기
먼저 적당한 곳에 프로젝트 폴더를 만듭니다.
앞서 설치한 Visual Studio Code로 방금 생성한 프로젝트 폴더를 엽니다.
New File 아이콘을 클릭해서 index.html 파일을 만듭니다.
에디터에 !를 입력하고 생기는 팝업의 첫 번째 항목을 선택합니다.
자동으로 HTML 파일의 내용이 채워집니다.
여기서부터 코드를 수정하면 편합니다.
이중에서 지금 당장은 필요하지 않은 meta 태그들을 지웁니다.
그러면 아래와 같이 정리할 수 있습니다.
아래 코드를 복사해서 쓰셔도 상관없습니다.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
</html>
<body>와 </body> 사이에 hello world를 입력하고 저장합니다.
<body>
hello world
</body>
이제 프로젝트 폴더를 열고 index.html 파일을 더블 클릭해 크롬으로 열면
hello world라는 글자가 나타납니다.
이후 파일 수정 후 저장을 했을 때 웹페이지가 잘 변했는지 확인하려면 반드시 새로고침을 해야 합니다.
2. 태그
HTML 파일은 다양한 태그로 이뤄져 있습니다.
시작 태그와 끝 태그로 내용을 감싸는 형태와
<태그 이름>태그의 내용</태그 이름>
시작 태그만 있는 형태가 있습니다.
<태그 이름>
각 태그는 HTML 문서에 포함되는 엘리먼트를 정의하고
엘리먼트를 이용해서 문서를 예쁘게 꾸미거나 (CSS를 이용)
클릭했을 때 등의 동작을 구현할 수 있습니다. (JavaScript를 이용)
3. 기본 태그
이해를 돕기 위해 간단히 만들면서 설명해 드리겠습니다.
먼저 index.html 파일을 만들고 아래 코드를 입력합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Web Page Basics</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>버튼을 클릭하세요.</p>
<button id="button">클릭</button>
<script src="index.js"></script>
</body>
</html>
<!DOCTYPE html>은 제일 앞에 와서 이 파일이 HTML 문서라는 것을 알려줍니다.
<html></html>은 HTML의 최상위 부모가 되는 엘리먼트 입니다.
<html>의 바로 안쪽에는 <head>와 <body>가 옵니다.
이렇게 태그 바로 안쪽에 있는 태그를 자식 엘리먼트(child element)라고 부릅니다.
반대로 자식 엘리먼트의 상위 엘리먼트를 부모 엘리먼트(parent element)라고 부릅니다.
<head></head> 안에는 HTML의 메타(meta) 정보들을 담습니다.
<body>와 달리 웹 페이지에서 보이지 않는 설정들을 하는 곳이라고 생각하시면 되겠습니다.
<title></title>에 내용을 넣으면 크롬의 탭에 입력한 글자가 나타납니다.
<link>로 HTML에서 사용할 .css 파일을 불러올 수 있습니다.
href 속성에 불러올 파일의 경로를 넣습니다.
여기서는 styles.css로 했으니
같은 위치에 styles.css 파일을 만드세요.
<body></body> 안에는 실질적으로 웹 페이지에서 보이는 엘리먼트가 들어갑니다.
<body>에 글자를 넣을 때 쓰는 <p></p>와
버튼을 넣을 때 쓰는 <button></button>을 추가했습니다.
<body>
<p>버튼을 클릭하세요.</p>
<button id="button">클릭</button>
<script src="index.js"></script>
</body>
아래처럼 나타납니다.
<button id="button">처럼 태그에 속성(attribute)을 넣을 수 있습니다.
여기서는 button의 id를 button이라고 정해준 겁니다.
<button>을 CSS와 JavaScript에서 불러오기 위해 이름 지어줬습니다.
<script></script>로 JavaScript 파일을 불러옵니다.
보통 <script>는 엘리먼트들을 다 정의한 뒤 <body>의 제일 끝에 둡니다.
그래야 먼저 정의된 엘리먼트를 가져올 수 있습니다.
여기서는 JavaScript 파일인 index.js 파일을 불러오고 있습니다.
index.js 파일도 같은 위치에 만들어 줍니다.
4. CSS
밋밋한 버튼을 간단히 바꿔 보겠습니다.
CSS를 이용해서 단순히 웹 페이지에 배치만 해 놓은 엘리먼트를 예쁘게 꾸밀 수 있습니다.
앞서 styles.css 파일을 index.html에서 불러올 수 있게 설정했습니다.
styles.css 파일에서 CSS 코드를 입력하기만 하면 됩니다.
#button {
background-color: orange;
color: white;
border: 0;
border-radius: 3px;
padding: 10px;
}
#button은 id 속성을 button으로 한 엘리먼트를 의미합니다.
여기서는 <button id="button">클릭</button>을 가리킵니다.
이후 중괄호 안에 속성(property)과 값(value)을 넣어
버튼의 디자인을 바꿀 수 있습니다.
background-color는 배경색을 의미하고 orange 색을 입힙니다.
color는 글자색을 의미하고 white 색을 입힙니다.
border는 경계선을 의미하고 0을 넣어 버튼의 경계선을 없앱니다.
border-radius는 사각형의 네 꼭지점을 둥글게 하는 속성으로 3px만큼 살짝 둥글게 합니다.
padding은 버튼과 버튼 안쪽의 글자 간격을 의미하고 10px만큼 벌립니다.
5. JavaScript
버튼을 클릭했을 때 경고창이 나타나도록 해보겠습니다.
단순한 문서에서 이런 동작을 추가하고 싶을 때 JavaScript를 이용합니다.
앞서 index.js 파일을 index.html 파일에 추가했으니
index.js 파일을 열어 JavaScript 코드를 작성하겠습니다.
const button = document.getElementById('button');
button.addEventListener('click', () => {
alert('버튼이 클릭됐습니다.');
});
지금 당장 위 코드를 완벽히 이해할 필요는 없습니다.
첫 번째 줄에서 id가 button인 엘리먼트를 가져오고
두 번째 줄 이하에서 이 button을 클릭했을 때
'버튼이 클릭됐습니다.'라는 alert 메시지가 나타나게 해준다 정도로만 이해하세요.
전체 코드
https://github.com/socratone/web-page-basics
더 읽으면 좋은 자료들
https://www.w3schools.com/html/html_intro.asp
'프론트엔드 개발 입문' 카테고리의 다른 글
| 자바스크립트 공부하기 좋은 사이트, 꼭 알아야 할 것들 (4) | 2021.05.29 |
|---|---|
| 프론트엔드 개발 도구와 설치 방법 (0) | 2021.05.18 |
| 웹 프론트엔드 개발자 시작하기 (4) | 2021.05.17 |
