1. 아톰 설치하기
다운로드 사이트 --> https://atom.io/
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
2. web 폴더 만들기> html-personal site 폴더 만들기> index.html 파일 만들기
3. 보일러플레이트(상용구 코드)
index.html 파일에 코드를 작성해보자.
html만 쓰고 enter를 쳐도, 아래와 같이
모든 상용구 코드가 삽입된다.
보일러플레이트는 상용구 코드로
템플릿과 같은 것이다.
일반적으로 재사용할 수 있는 기본 형식이다.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1) 문서유형 선언
브라우저가 이 파일을 HTML 5 문서로 렌더링하도록 해준다.
<!DOCTYPE html>2) html 코드
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><html> ~ </html> 사이의 모든 코드가 html 코드로 작성이 될 것이다.
이 안은 head와 body로 이루어져 있다.
3) head
- html 파일의 일부로서 웹페이지의 정보를 담고 있다.
페이지를 어떤 식으로 처리할지 웹브라우저에게 알려주는 역할을 한다.
- <title></title> 제목을 표시한다.
- meta attributes
1) charset = "utf-8"
웹페이지 안의 모든 문자집합이(char set) UTF-8 인코딩 시스템으로 인코딩 되었다는 의미이다.
메타 태그는 웹페이지를 렌더링하거나 표시하는 방법을 브라우저에 알린다. ex) <meta charset= UTF-8>
2) name = "description"
웹사이트의 내용에 대한 정보를 검색에 제공한다.
meta에 관한 설명은 아래의 링크에서 더 자세히 알아보자.
https://www.w3schools.com/tags/tag_meta.asp
meta description이 어떻게 이용되는지 실습해보자!
우선 아래의 사이트에 접속해보자.
https://developer.mozilla.org/en-US/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
오른쪽 버튼 클릭> 페이지 소스 보기> ctrl+F(검색) description을 누르고 내용을 살펴본다.
<meta name="description" content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."/>
네이버에 mdn web docs를 검색해서
나오는 글을 본다.
그러면 description의 content 내용과 똑같다는 것을 알 수 있다.
<head>
<meta charset="utf-8">
<title>올리비아의 개인 사이트</title>
4. 저장
오른쪽 상단의 파란 점은
새로 변경된 내용이 바뀌지 않았다는 것을 뜻한다.
ctrl +s or 파일 >save
로 저장을 수시로 해주자!
5. 웹사이트 접속하기
파일 오른쪽 마우스 클릭> 파일경로 복사> 웹브라우저 주소창에 복사하기
6. emmet 에밋
에밋으로 할 수 있는 모든 작업, 약어를 알 수 있다.
단축키에 익숙해지면 시간을 절약할 수 있고
웹 개발자로 가는데 많은 도움이 된다.
https://docs.emmet.io/cheat-sheet/
'HTML & CSS' 카테고리의 다른 글
| [41-10 HTML] p, em, i, strong, hr, ol, ul, li, type (0) | 2022.10.07 |
|---|---|
| [41-9 HTML]atom 패키지 설치 방법, 패키지 추천, beautify, emmit (0) | 2022.10.07 |
| [41-7 HTML] UTF-8, 유니코드 (1) | 2022.10.05 |
| [41-6 HTML] 1990년대 웹사이트의 모습 (1) | 2022.10.05 |
| [41-5 HTML] html 주석처리 (0) | 2022.10.05 |