[왕초보 HTML5] 무작정 따라하기 1. html 파일 생성 및 기본구조.
이전 글 보기.
2020/03/31 - [WEB 무조건 따라하기/[왕초보] HTML5] - [왕초보 HTML5] 무작정 따라하기 시작하기전..
안녕하세요.
왕초보 HTML5 무작정 따라하기 1편 태그편입니다.
이번 포스팅에서는 html 파일 생성 및 기본구조를 설명 해드리겠습니다.
메모장으로 작성해도 되지만
우리는 Jsfiddle 이라는 웹사이트 상의 html태그를 표현해주는
웹어플리케이션을 사용할겁니다.
일단 html 파일 만들기를 해야하니 메모장으로 시작하죠...
[파일 만들기]
1. 메모장을 엽시다.
- 메모장이 안보인다? 윈도우키 눌러봅시다.
요렇게 검색하셔서 메모장을 열어줍니다.
※미세팁. notepad 라고 검색하셔도 메모장이 나옵니다.
메모장에 이렇게 적어봅시다.
<!Doctype html>
<head></head>
<body>
</body>
</html>
기본 구조입니다. 기억합시다.
<!Doctype html>은 이 문서는 html5 로 작성된 문서이다... 라고 정의하는 문구라고 보시면됩니다.
(습관화 합시다.)
<html> ~ </html> html의 문서의 시작과 끝을 알리는 태그입니다.
<head> ~ </head> html 문서내의 기본 설정 및 페이지에 대한 속성 , 옵션등을 설정 하는 태그.
<body> ~ </body> html 문서내의 몸통 즉. 실질적으로 사람눈에 보이는 태그들이 들어가는 몸통태그
자 ~ 기본적인 구조는 아셨겠죠... ?
이정도로만 하자 하고 넘어가시면 됩니다. 추후에 더 자세하게 알려드릴꺼니까요
메모장 으로 다시 넘어가서.
파일 > 다른이름으로 저장 누르시고.
파일형식을 모든파일로 설정해주시고.
파일이름을 왕초보.html 로 작성합시다.
.html은 직접 써주셔야 하는겁니다~
저장~ 누르시면 파일이 하나 저장되겠죠.
파일 찾아가서 실행해보시면
하얀 화면에 아무것도 표시가 안될겁니다.
왜냐?
<body> ~ </body> 에 아무것도 작성하신게 없기 때문이겠죠?
자. 파일 생성까지 끝이 났습니다.
이번에는 파일로 생성하지말고 앞으로의 예제를 따라하기위해서 Jsfiddle 라는 웹어플리케이션을
이용해볼껍니다.
으로 접속해봅시다.
요런 페이지를 볼 수 있을텐데 영문으로 직성되서 뭐가 뭔지 모르시겠죠? 네 저도몰라요 몇개만알죠 ㅋㅋ
여기서 우리가 태그1편 에서 작성할꺼는. html 과 result 부분만 사용할껍니다. CSS, JAVASCRIPT
부분에는 추후에 사용할꺼기 때문에 굳이 필요없어요.
우측 상단의 Settings 누르셔서 Right results 라는 이미지를 클릭합니다.
html 창에 아까 메모장에 작성하신 기본 문법을 작성합니다.
아래처럼 똑같이 작성하신다음에 왼쪽위의 run 을 눌러봅시다.
사진과 같이 나왔다면 성공!
앞으로 태그는 이 사이트로 할껍니다.
다음 포스팅에서 만나겠습니다
감사합니다!
'WEB 무조건 따라하기 > [왕초보] HTML5' 카테고리의 다른 글
| [왕초보 HTML5] 무작정 따라하기 3. 많이쓰이는 태그편 (주구장창) (0) | 2020.04.01 |
|---|---|
| [왕초보 HTML5] 무작정 따라하기 2. 인라인 요소? 블록 요소? (0) | 2020.04.01 |
| [왕초보 HTML5] 무작정 따라하기 시작하기전.. (0) | 2020.03.31 |
